Vue中的mixin,Vdom和watch的介绍

mixin使用它的好处：

1. 将 options 中的配置项可以单独抽离出来，单独管理，这样方便维护 使用：

• 新建一个对象用来保存 options 中某一个配置项，比如： methods
  接下来要将我们创建好的对象混入到我们的 ViewModel 中，我们的混入形式有两种
• 局部混入 【 推荐 】
  只是在当前 vm 中才有

new Vue({
mixins: [ myMixin ]
})

• 全局混入
  在所有的vm中都会有

Vue.mixin({
methods: {
aa () {}
}
})

虚拟DOM 和 Diff 算法

1. 什么是虚拟DOM？

• virtual dom，也就是虚拟节点。它通过JS的Object对象模拟DOM中的节点，然后再通过特定的render方法将其渲染成真实的DOM节点 dom diff 则是通过JS层面的计算，返回一个patch对象，即补丁对象，在通过特定的操作解析patch对象，完成页面的重新渲染

1. 使用虚拟DOM有什么好处？

• 减少性能损耗，提高渲染效率

1. 什么是Diff 算法？

• diff算法即差异查找算法，两两之间进行比较找到不同的地方。

1. diff算法是用来做什么的？

• 新旧虚拟dom 的比较，如果有差异就以新的为准，然后再插入的真实的dom中，(只插入有差异的部分，其他的原封不动)重新渲染

** Vue 2.x版本使用的就是 VDOM ( 虚拟DOM ) **

1. jsx 在vue采用的原因
   VDOM对象树态繁琐了， 如果能像hom结构一样书写就好了， 这就引入了 jsx
2. render函数是做什么的

• render方法的实质就是生成template模板;

1. VDOM的渲染流程

• 获取数据
• 根据数据创建VDOM （相当于给对象赋值）
• 根据VDOM渲染生成真实DOM ( 根据createElmeent(‘DIV’) )
• 当数据发生改变后，又会生成新的VDOM
• 通过 diff 算法 比对 多次生成的 VDOM, 将不同的内容比对出来，然后在进行真实DOM渲染,一样的内容是不会进行渲染的，这就是VDOM 的 ‘就地复用’ | ‘惰性原则’

但是jsx始终还是不能直接去用的，必须转换成 对象 才能使用， vue中 使用render 函数 解析jsx语法， 然后换成 对象结构 ，在通过 createElment 生成节点，渲染成 真实DOM

watch 侦听属性

1. 是用来监听 data 选项中的数据的，只要data中的数据发生改变，它就会自动触发
2. watch是一个对象，它里面存储的是 { [key: string]: string | Function | Object | Array }
3. 往往watch我们里面常存储的是方法4. watch中方法的名称就是 data 选项中数据的名称
4. 深度监听

watch: {
num: {
deep: true,
handler () {     //数据改变之后执行的事情
}
}
}