05-Vue.js虚拟DOM、diff算法、生命周期

一、虚拟DOM、Diff算法

1、操作真实DOM越少越好，尽量多操作数据

2、虚拟dom对象模型来模拟真实DOM

3、当一个页面很复杂时，DOM结构的模拟就变得复杂了，所以Vue使用了JSX语法糖

• JSX javascript+xml
  让我们可以在Js中写dom
• render
  将jsx通过render方法解析成对象模型

4、完整流程

• template模板使用jsx语法进行编辑
• 通过render函数将jsx解析成VDom对象模型
• 将VDom对象模型渲染成真实DOM，然后挂载在页面中
• 当数据改变时，第二次生成VDom

二、生命周期

1、为什么有生命周期？

• Vue为了在一个组件从创建到销毁的过程中添加一些功能，方便更好控制组件

2、Vue的生命周期分为3个阶段
注意：钩子函数不要写成箭头函数，因为箭头函数会改变this指向！

• 初始化
  beforeCreate
created
beforeMount
mounted

• 运行中
  beforeUpdate
updated

• 销毁
  beforeDestroy
destroy

  • 外部销毁：通过开关完成，DOM被删除了，组件也被删除了
  • 内部销毁：通过调用$destroy()完成，组件呗删除了，DOM需要手动删除

3、动态数据放在update中写时，会有重复实例化，即持续触发

解决方法(推荐第三种)：
a、加判断条件
b、定时器 setTimeout，放在主线程后执行，异步队列中，保证真实DOM渲染
c、Vue内部提供的nextTick，nextTick(callback)或this.$nextTick(callback)

注：在组件上添加原生事件如@click，需要在其后加上.native，如@click.native