vue

题目1

v-show和v-if的区别

my answer:

v-show是已经加载组件了，按需渲染

v-if是还没加载组件,符合条件时加载渲染

解答：

场景：频繁切换v-show display:none/不频繁v-if

组件销毁/渲染

题目2

Vue组件如何实现通讯？

my answer:

子组件通过prop属性访问父组件的传递的参数，

子组件通过事件传递修改父组件上的属性，

跨组件时可以通过inject/provide穿透，但少用，

也可以用vuex状态管理进行传递，

兄弟组件通过ref传递实例的方式访问兄弟组件的属性和方法

解答：

父子组件 props/children/$parent

获取子组件实例 ref
不相干组件 eventBus
全局共享 vuex,storage

parent为组件实例

eventBus -> vm实例 -> 导出实例 ->vm.on

• 父子组件prop/$emit
• 自定义事件emit,$off(beforeDestory里移除监听的操作)
• Vuex

题目3

v-for为什么要使用key?

my answer:

因为有key 可以定位到对应的列表项，避免出现子项之间的位置错误，使程序更高效的运行，减少查找时间

风中的信同学：

简单来说是为了方便vue在进行模板更新的时候更方便得对比新旧vnode的区别，如果新旧的vnode的key相同，则不需要重新创建一个虚拟节点只要更新虚拟节点的属性即可，如果key不同，则需要重新创建一个虚拟节点，并且把新旧的虚拟节点替换掉旧的虚拟节点。同时，不光需要有key属性，且从性能优化角度来讲，key也不应该使用index这一类固定规则不变的数据或者是 Math.random() 这种一直在变的指作为key，这两者都不方便进行diff算法的比对，所以vue推荐设置key属性来提升diff算法的效率

老师：

虚拟dom跟真实dom的映射

{
  tag: 'div',
  {id : 3}
}

• key是唯一的，不要使用index(没有顺序调整时可以用)和random(找不到对应的索引)
• diff算法中，通过tag和key进行判断，看是否是sameVnode
• 可以复用节点，减少销毁，重新创建的次数，提高渲染效率

题目4

请描述组件的生命函数

题目5

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

myanswer:

数据劫持 -> 数据响应式 -> 页面渲染 -> 编译 -> 发布订阅->数据更改时重新更新组件和渲染页面

风中的信同学：

1. 合并 props/data/computed/methods 到 this 上下文()
2. 读取 watch 配置，创建观察者并添加到观察者列表
3. beforeMount 组件挂载，遇到子组件先渲染子组件，重复1-3步骤，子组件渲染完成后继续父组件的渲染
4. 等待实例数据变化，比对数据是否发生变化，发生变化则重新渲染组件
5. 更新 vnode，更新组件

老师：

首次渲染：组件变成render函数，观察data数据里属性，获取的值渲染对应内容

更新：修改值，通知watcher, 重新渲染