Vue虚拟DOM生命周期

Vue实例在什么周期中各阶段属性和触发事件总结：

涉及到的生命周期钩子(lifecycle hooks): beforeCreate,created,mounted,beforeUpdate,updated,activated,deactivated,beforeDestroy,destroyed.

实例方法: vm.$mount,vm.$forceUpdate,vm.nextTick,vm.$destroy.

实例选项:data,computed,methods,watch,props,propsData,el,template,render,renderError.

1. 调用new Vue()生成

   • 在初始化实例之后，在设置数据监控，事件／watch 之前，触发beforeCreate,在这个状态，实例的选项(options)没有设置完成，因此不能使用实例（组件）中的方法(methods)和数据(data)。主要作用，预设实例需要的一些数据初始值等。
   • 完成实例的选项处理后，触发created,在这个状态， $el<u>属性仍然不可用</u>。

2. DOM节点挂载

   挂载节点时机分两种情况：

   1. 实例中有el选项，在完成实例生成后开始挂载。
   2. 实例中没有el选项，在调用vm.$mount(el)时挂载。

   开始挂载后，选择模版分两种情况:

   1. 实例中有template选项，编译template中的内容到render中。

   2. 实例中没有template选项，则获取el选线的outHTML属性作为template。

      ​ 注释：el.outHTML与el.innerHTML的区别：outHTML包括el自身

   完成模版编译后，触发beforeMount，之后，创建DOM节点vm.$el并且替换el节点。然后出发mounted,Vue Dom节点挂载完成的。

3. 更新(update)，激活(activate)

   1. 更新数据,在date 修改后，触发beforeUpdate，重新编译virtual DOM，并且显示到页面上，然后触发updated。

   2. activated与deactivated

      只有keep-live虚拟组件中的实例会触发，即

      <keep-live>
        <component/> //激活时会触发activated,无效时会触发deactivated.
      </keep-live>
      

      keep-live作用:缓存标签内的实例，控制实例显示隐藏时，不需要再次生成实例，对需要频繁切换的实例可以提高性能。

      如果父组件不在keep-live标签内,父组件隐藏时，缓存会清除，会触发deactivated

4. vm.$destroy()

   调用vm.$destroy()方法后，触发beforeDestroy,然后断开数据监控，完成后触发destroyed。

   注释：调用$destroy后，修改实例数据，页面显示不会发生变化，但是实例中元素绑定的事件能正常执行。

   ​ 如果父组件被销毁，子组件也会被销毁，keep-live缓存的实例会失效。

   ​ 使用<component :is="view"/>标签时，is属性改变，原有的实例会被销毁。

附图(来自Vue官网)

*vue官方链接：http://vuejs.org/ *

lifecycle.png