Vue中几个相似概念的比较

1 activated和deactivated

​ 这两个钩子函数不算做生命周期周期的函数，只有当和keep-alive同时使用时，才会产生作用，也就是说时缓存时期发生的作用。只有当组件在<keep-alive>内被切换，才会有activated和deactivated这两个钩子函数</keep-alive>

​ 组件A和组件B。当第一次切换到组件A时，组件A的created和activated生命周期函数都会被执行，这时通过点击事件改变A的文字颜色，在切换到组件B,这时A的deactivated的生命周期函数会被触发，大师destroyed函数不会被触发。在切换到组件A，组件A的activated生命周期函数会被触发，但是它的created生命周期函数不会被触发，而且A组件的文字颜色也是我们之前设置过得。

​ 在设置了缓存的组件里，除了第一次渲染挂载的时候会触发created mounted activated函数。第二次进入次组件的时候是不会触发created mounted函数。进入和离开有activated和deactivated钩子作为进出口

2 watch和computed

3 create和mounted

​ 浏览器渲染过程：

• 构建DOM数
• 构建css规则树，根据执行顺序解析js文件
• 构建渲染树Render tree （Vue中这一步就是创建Vue实例）
• 渲染树布局 layout
• 渲染树绘制
  

3.1 beforecreate阶段，对浏览器来说，整个渲染流程还未开始，对Vue来说，实例还未出初始化.

​ (Vue还没创建，未渲染)

​ 所以这个阶段不能获取dom节点，没有data中的数据，data observer和event/watcher也未被调用，methods中也没法调用函数

3.2 created阶段，js,css文件都以解析完毕，但是don树还未创建，但是Vue实例一节创建完毕

​ （Vue已创建，但是还未渲染到根节点上）

​ 所以在这个阶段可以获取data里面的数据，但是不能document.getElement，Vue实例已经被创建但是还没有挂载在根节点上

3.2 mounted阶段，对浏览器来说，已经完成了dom与css规则树的render、

​ 这个时期可以获取dom。也可以拿到data和methonds中的函数