Vue常用面试题（二）

Vue
v-show 和 v-if 的区别？
为何 v-for 中要用 key？
描述 Vue 组件生命周期（有父组件的情况）？
Vue 组件如何通讯？
描述组件渲染和更新的过程？
双向数据绑定 v-model 的实现原理？

React
React 组件如何通讯？
JSX 本质是什么？
context 是什么，有何用途?
shouldComponentUpdate 的用途（SCU）？
描述 redux 单项数据流？
setState 是同步还是异步？

 

webpack 
前端代码为何要进行构建和打包？
module chunk bundle 分别什么意思，有何区别？
loader 和 plugin 的区别？
webpack 如何实现懒加载？
webpack 常见的性能优化？
babel-runtime 和 babel-polyfill 的区别

如何回答上述面试题：

框架的使用（基本使用，高级特性，周边插件）
框架的原理（基本原理的了解，热门技术的深度，全面性）
框架的实际应用，即设计能力（组件结构，数据结构）

vue原理：

虚拟dom的过程:

③　patchVnode
执行生命周期对应的函数
设置vnode.elem ,由旧的vnode知道要设置虚拟dom的哪个元素
...
若新text为undefined,则默认children有值
a.新旧都有children ,updateChildren
b.只有新children,将新children添加到elem
c.只有旧children,移除旧children //移除dom元素
d.旧text有值,移除旧text

diff 算法总结：
1. 判断是否sameVnode（就是看key 和 tag 是否相同）
2. 是的话，patchVnode，进一步比较；否，直接替换成新的，没有比较的价值
3. patchVnode: 
  1）只是文本不一样，修改文本
  2）旧的有子节点，新的没有子节点，删除子节点
  3）新的没有子节点，旧的有子节点，新增子节点
  4）新的旧的都有子节点，且子节点不相同，updateChildren

若新text不为undefined,移除旧children,设置新的text

编译模板：
模板编译为render函数，执行render函数返回vnode；
基于vnode再执行patch和diff；
使用webpack vue-loader，会在开发环境下编译模板（重要）
使用vue-cli是集成webpack环境的，编译模板的工作都是在打包的时候做的，也就是产出的代码就没有模板了，全是render函数的形式了。这也算是vue性能优化的一点，这也是一种共识。
但是如果只是自己创建的简单的vue项目（html+js），没有集成webpack环境，它是在浏览器运行时才编译的。

vue组件是如何渲染更新的/

初次渲染过程：
解析模板为render函数（或在开发环境已完成，vue-loader）
触发响应式，监听data属性 getter setter (模板中用到的变量会触发getter)
执行render函数，生成vnode，patch(elem, vnode

更新过程：
修改data，触发setter（此前在getter中已被监听）
重新执行render函数，生成newVnode
patch(vnode, newVnode)