那些关于前端的Vue(2)

Vue组件如何通讯

我在这里例举几种常见的吧。

• 父–>子使用props,子–>父用$emit触发事件
• 通过自定义事件使用 $on(eventName) 监听事件，使用 $emit(eventName) 触发事件
• 还有可以通过状态管理器vuex进行组件通讯

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

• vue组件渲染过程
  初次渲染时，将模板编译为render函数，触发响应式，对data 的getter和setter进行监听，执行render函数生成VDOM，即生成Vnode和patch(elem,vnode)。
• vue组件更新过程时
  修改data后触发data属性里面的setter(在此之前已经监听了getter)，执行render函数生成newVnode，patch(vnode,newVnode)

在这里补充一些知识点

• vdom的本质是用树型结构的JS对象来描述真实的DOM结构的信息，这个树结构的JS对象包含了整个DOM结构的信息.。

• 在vnode技术出现之后，我们建立一个虚拟 dom 对象来对应真实的 dom 树，那么每次 dom 的更改就变成了 js 对象的属性的更改
  ，这样一来就能查找 js 对象的属性变化要比查询 dom 树的 性能开销小。

• vnode优化性能核心思想，就是每次更新 dom都尽量避免刷新整个页面，而是有针对性的 去刷新那被更改的一部分 ，来释放掉被无效渲染占用的 CPU性能。同时，也减少了大量的dom操作，减少了浏览器的回流和重绘。
  （使用了diff算法，优化遍历，对真实DOM进行新增修改删除，实现局部更新）
  diff算法的本质就是调用patch（）函数（对diff算法的详情在后续更新）

双向数据绑定v-model原理

v-model 本质

<input type="text" @keydown.enter="send" v-model="getcontent">

本质是

<input :value="getcontent" @input="getcontent=$event.target.value">