复习笔记——Vue

Posted 2022-11-20 敲代码的小小酥

1.MVVM模型: M模型层，相当于vue的data属性，业务相关数据；V视图层，相当于html+css;
MV进行双向绑定，M修改数据，V自动修改，V修改数据,M也自动修改
2.箭头函数: 在vue属性中，不要定义箭头函数，因为this此时指向的是Window对象，而不是vue对象。在vue定义的函数内部，要定义箭头函数，如定时任务等，这样this指向的是vue对象。因为箭头函数里this指向的是调用对象的上一级对象。

3.vm中data属性和computed属性，在形成vm实例后，会在vm属性里，直接有data里定义的属性，并生成了属性的get和set方法。也可以通过_data.属性名称获取data里的属性值。

4.调用vm.属性改变data中属性值时，本质是调用了属性的set方法，进行改变。需要注意的是，在data中定义的数组，vue是不会对数组生成set方法的，而是对数组中每个元素，生成set方法，所以，当对数组元素修改时，例如增加元素，删除元素等，要调用vue特定的方法，这样vue会底层调用元素set方法，实现自动更新。

5.vue生命周期钩子函数:
beforeCreated: vm实例创建之前调用；
created:vm实例创建之后调用，此时可以获取data,methods属性里的值
beforeMount:vm挂载页面之前调用，此时页面里插值表达式都是文本，没有被vm赋值，此时修改dom，会被vm覆盖。

mount:挂载之后
beforeUpdate: 修改vm数据后，没更新到dom前
updated: 更新到dom后

6.父子组件传递数据:
父组件给子组件传递数据:
props属性

子组件给父组件传递数据:
自定义事件定义
全局事件总线:通过$bus属性的$emit方法来设置信息，在其他组件，通过$bus属性的$on方法获取数据，达到信息传递

7.修改了模型的数据后，模型的数据往view层修改，是需要时间的，所以，修改完model数据 后，立即调用view层这个数据的话，还是旧值，可以通过$nextTick函数来防止获取到旧值情况的出现

8.vue通过axios发送异步请求，对于跨域问题解决:
开发时，通过vue提供的自带的ProxyTable进行请求转发到后台，避免跨域，生产中，可以通过nginx解决跨域或者通过后台配置接口跨域

9.插槽: 在父组件中，定义子组件的dom元素，在子组件中使用<solt>占位，在父组件里的子组件标签中定义具体dom元素。

10.vuex技术:通过store进行数据共享，里面有Actions对象，Mutations对象，State对象，最终共享的是state对象里数据。

11.路由:
replace属性: push模式是浏览器回退都退回上一个组件，replace模式是跳到上一个为push模式的组件上。

路由跳转后，默认是组件销毁，等再次跳到这个组件时，重新创建组件。可以设置为不销毁，这样可以保留用户所填的信息。

路由组件两个独有特性:
activated:路由组件被激活时触发
deactivated:路由组件失活时触发。

hash模式:浏览器上出现#号，#号后面路径为vue内部路由路径;
history模式浏览器没有#，但是请求会发送到后台，在开发环境，vue-cli自动识别了这种请求，会自动路由到组件上，但是在部署后，就会报404，需要配置一下后台服务器。