vue面试总结
vue面试总结
1.vue生命周期
1、beforeCreate():组件实例刚刚被创建 (el和data并未初始化)
2、created():组件创建完成,属性已绑定,但DOM还未生成,$el属性还不存在 (完成data数据的初始化)
3、beforeMount():模板编译/挂载之前 (完成了el和data初始化)
4、Mounted():模板编译/挂载之后 (完成挂载)
5、beforeUpdate():组件更新之前
6、updated()：组件更新之后
7、beforedestroy():组件销毁之前
8、destroyed():组件销毁之后
9、 activated keep-alive组件激活时调用。该钩子在服务器端渲染期间不被调用。用于性能优化缓存dom和数据。
deactivated keep-alive组件停用时调用。该钩子在服务端渲染期间不被调用。
适应场景：
beforecreate : 可以在这加个loading事件，在加载实例时触发
created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
mounted : 挂载元素，获取到DOM节点
updated : 如果对数据统一处理，在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框
nextTick : 更新数据后立即操作dom
语言阐述：
那么我最常用的：created、mounted、destroyed、activated
created通常在初始化数据的时候使用，比如说：我们获取异步的ajax，初始化ajax获取的数据放在created里面
mounted挂载元素，跟dom相关的 比如说触发获取dom的操作，
destroyed 比如说我在这个页面做了一个定时器，那么离开页面的时候，要做一个clear，要不然就会出现内存泄露，因为是单页面应用，跳转之后不会自动销毁。
再比如监听一些事件，比如滚动事件，离开的时候也要给它卸载，不然造成内存泄露；
activated 需要配合keep-alive才能生效，比如首页这种存量大更新不频繁的地方，可以给它做一个缓存，再第一次访问的时候把它缓存下来。用于性能优化缓存dom和数据。
使用：套到路由的外边，整个页面就会被它缓存起来，但是之后你会发现，在后台数据更新的时候，第一次访问过后再刷新的时候，还是之前的数据，dom就不再更新了。如果想要继续更新的话，就需要把初始化数据，也就是created里面的数据放到activaed里面，这样就会解除缓存。
2.vue的传值
1.路由带参数进行传值：
a.通过query把orderId 从A组件传递给B组件，
this.$router.push({path:'/conponentsB',query:{orderId:123}}) //跳转到B
b.在B组件中获取A组件传递过来的参数
this.$route.query.orderId
2.通过设置 session Storage缓存的形式进行传递
3.父子组件传值
父传子 props
子传父 子组件用$emit触发事件，父组件用$on监听子组件的事件
兄弟传值 定义一个新的vue实例eventBus.js,
然后a组件用 eventBus.$emit,
b组件用 evrntBus.$on
父链 this.$parent 子组件使用可以直接访问该组件的父实例或组件
this.$children 父组件也可以使用它访问所有的子组件
子组件索引 用ref来为子组件指定一个索引名称，就是在子组件标签上ref指定一个名称，然后在父组件通过this.$refs访问指定名称的子组件
vuex传值
vuex有state、mutations、action、getters
state存放属性、变量
mutations用于同步，改变state的值
action 用于调取异步，如获取ajax， 并传递给mutations
Getters 可以对state进行计算操作，
modules 主要用来拆分state
常用的是mutations 对应的方法是 commit
actions 对应的方法是 dispatch
3.computed、watch的区别
computed计算属性本身具有缓存特性，界面刷新，计算属性有限读取缓存，判断是否有相关值的改变，相关值改变才会计算属性
（举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择。）
而watch方法调用没有，
每次刷新，方法都会执行，类似于事件监听+事件机制；
watch的方法默认是不会执行的，只有依赖的属性发生变化才会执行。
watch无法监听数组的情况，以及解决方案
无法监听数组的情况
1. 利用索引直接设置一个数组项时，例如：arr[indexOfItem] = newValue;
2. 修改数组的长度时，例如：arr.length = newLength;
3. 解决方案 1.this.$set(arr, index, newVal); 2.使用数组 splice 方法
4.MVVM模式（前后端分离的模式）
（注：react、vue都不是MVVM框架，只是有借鉴MVVM的思路）
View ：用户看到的视图
Model ：本地数据和数据库中的数据
ViewModel：视图和数据库之间的桥，它就像是一个中转站，负责转换Model中的数据对象来让数据变得更容易管理和使用，
该层向上 与视图层进行双向绑定，
向下与Model层通过接口请求进行数据交互，
通常我们写产品：
1.通过接口从数据库中读取数据，然后将数据经过处理展现到用户看到的视图层
2.从视图上读取用户的输入，然后又将用户的输入通过接口写入到数据库中，
