知识梳理 vue

v-if和v-show的区别

答：v-if在进行显示和隐藏的时候是将整个元素从dom树上删掉v-show是设置的overflow: hidden;

v-for中的key有什么作用

答：这和vue中的Diff算法有关，比较同级的节点，若找不到与新节点类型相同的节点，则插入一个新节点，若有相同类型的节点则进行节点属性的更新，最后删除新节点列表中不包含的旧节点。

computed和watch的区别

答：

computed

支持缓存，只有依赖数据发生改变，才会重新进行计算

不支持异步，当computed内有异步操作时无效，无法监听数据的变化 computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值

如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed 如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

watch

不支持缓存，数据变，直接会触发相应的操作； watch支持异步； 监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；

当一个属性发生变化时，需要执行对应的操作；一对多；

监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数， immediate：组件加载立即触发回调函数执行， 　　deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到

*组件通信

父子组件通信：props  时间全局总线
发布订阅
Vuex

*v-model原理

数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。在vue里面使用v-model实现双向数据绑定。
Vue 实现 双向数据绑定 主要采用：数据劫持结合“发布-订阅”模式的方式，通过Object.defineProperty（）的 set 和 get，在数据变动时发布消息给订阅者触发监听
Object.defineProperty他可以直接在一个对象上面定义一个新属性，或者修改一个对象的现有属性，并返回这个对象.
​
语法
Object.defineProperty(object, propertyname, descriptor) //参数（3个且必须）
参数
object ：要在其上添加或修改属性的对象。
propertyname：要定义或修改的属性的名称。（存在修改，不存在，自定义，设置属性和描述配置）
descriptor:将被定义或修改的属性描述符。(可以包含以下属性，默认情况下， writable， enumerable，configurable值为false)
方法访问器,可选键值（）
get() : 属性的 getter 函数，如果没有 getter，则为 undefined。当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（由于继承关系，这里的this并不一定是定义该属性的对象）。该函数的返回值会被用作属性的值。
set() : 属性的 setter 函数，如果没有 setter，则为 undefined。当属性值被修改时，会调用此函数。该方法接受一个参数（也就是被赋予的新值），会传入赋值时的 this 对象。

生命周期函数

1. create 和 mounted
beforecreated：el 和 data 并未初始化
created:完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化
mounted ：完成挂载
2. update
我们单击页面中的“更新数据”按钮，将数据更新。下面就能看到data里的值被修改后，将会触发update的操作。
3. destroy
销毁完成后，我们再重新改变message的值，vue不再对此动作进行响应了。但是原先生成的dom元素还存在，可以这么理解，执行了destroy操作，后续就不再受vue控制了。因为这个Vue实例已经不存在了。

Vue双向数据绑定

数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。在vue里面使用v-model实现双向数据绑定。 Vue 实现 双向数据绑定 主要采用：数据劫持结合“发布-订阅”模式的方式，通过Object.defineProperty（）的 set 和 get，在数据变动时发布消息给订阅者触发监听 Object.defineProperty他可以直接在一个对象上面定义一个新属性，或者修改一个对象的现有属性，并返回这个对象.

语法 Object.defineProperty(object, propertyname, descriptor) //参数（3个且必须） 参数 object ：要在其上添加或修改属性的对象。 propertyname：要定义或修改的属性的名称。（存在修改，不存在，自定义，设置属性和描述配置） descriptor:将被定义或修改的属性描述符。(可以包含以下属性，默认情况下， writable， enumerable，configurable值为false) 方法访问器,可选键值（） get() : 属性的 getter 函数，如果没有 getter，则为 undefined。当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（由于继承关系，这里的this并不一定是定义该属性的对象）。该函数的返回值会被用作属性的值。 set() : 属性的 setter 函数，如果没有 setter，则为 undefined。当属性值被修改时，会调用此函数。该方法接受一个参数（也就是被赋予的新值），会传入赋值时的 this 对象。