vue

vue

1、v-sho 和 v-if 的区别是什么

（1）、当条件为真的时候 没有区别 当条件为假的时候 v-if是不创建元素 v-show 渲染元素然后隐藏掉
（2）、v-if更适合数据的筛选和初始渲染， v-show更适合元素的切换

2、为何 v-for 中要用 key

1.vue中列表循环需加:key=“唯一标识” 唯一标识尽量是item里面id等
2.key主要用来做dom diff算法用的
3.没有key的时候默认使用的是“就地复用”策略
4。标签名一样，key一样这时候就会就地复用，如果标签名不一样，key一样不会复用。

3、描述 Vue 组件生命周期（有父子组件的情况）

加载渲染过程
父beforeCreate —> 父created —> 父beforeMount —> 子beforeCreate —> 子created —> 子beforeMount —> 子mounted —> 父mounted
子组件更新过程
父beforeUpdate —> 子beforeUpdate —> 子updated —> 父updated
父组件更新过程
父beforeUpdate —> 父updated
销毁过程
父beforeDestroy —> 子beforeDestroy —> 子destroyed —> 父destroyed

Vue 组件如何通讯

描述组件渲染和更新的过程

1、vue 组件初次渲染过程

解析模板为 render 函数

触发响应式，监听 data 属性的 getter 和 setter

执行 render 函数， 生成 vnode，patch(elem,vnode)

2、vue 组件更新过程

修改 data， 触发 setter （此前在getter中已被监听）

重新执行 render 函数，生成 newVnode

patch(vnode, newVnode)

双向数据绑定 v-model 的实现原理

vue中的v-model可以实现双向绑定，其核心思想通过Object.definePropery来对Vue的数据进行数据劫持，
主要分为三部分
observer主要是负责对Vue数据进行数据劫持，使其数据拥有get和set方法
指令解析器负责绑定数据和指令，绑定试图更新方法
watcher负责数据监听，当数据发生改变通知订阅者，调用视图更新函数更新视图