详解Vue生命周期和MVVM框架

生命周期

与动态组件有关的两个特殊的钩子：

与组件异常捕获有关的一个钩子：

生命周期有哪些

生命周期

组件从开始到结束的全过程

创建阶段：beforeCreate、created挂载阶段：beforeMount、mounted

更新阶段：beforeUpdate、updated

组件从开始到结束的全过程

创建阶段：beforeCreate、created

挂载阶段：beforeMount、mounted

更新阶段：beforeUpdate、updated

销毁阶段：beforeDestroy、destroyed

与动态组件有关的两个特殊的钩子： activated(激活)、deactivated(休眠) 与组件异常捕获有关的一个钩子： errorCaptured 生命周期有哪些

beforeCreate：声明methods方法，声明生命周期钩子

created：注入provide数据，响应式劫持、把data上数据遍历后放在this上

beforeMount：通过el/$mount/template找视图模板，把template视图模板编译成render() (render方法是用于创建虚拟DOM的)

mounted：创建$el挂载节点，调用render()方法第一次生成虚拟DOM（Vnode是对真实视图结构的一种数据描述），Vue开始编译工作，循环递归，指令和声明式变量进行touch，依赖收集、通知Watcher第一次完成DOM渲染

beforeUpdate：网页呈现在你的面前上，当各种事件交互触发data变化时

updated：再次调用render()方法生成新的虚拟DOM（现在就有了两个虚拟DOM，执行patch运算（diff运算）找出两个虚拟DOM之间的最小差异（脏节点集合），通过一个队列进行异步更新。

beforeDestroy：当调用$destroy()或路由切换时，即将进入销毁阶段

destroyed：移除当前组件的Watcher（DOM将无法再更新了），拆卸掉所有的子组件，移除事件监听器（wacth等等）

const app = new Vue({
      data () {
        return {
          num: 1
        }
      },
      watch: {
        num () {
          console.log('--- num changed')
        }
      },
      // 声明methods方法
      // 声明生命周期钩子
      beforeCreate () {
        console.log('---beforeCreate')
      },
      // 注入provide数据
      // 响应式劫持、把data上数据遍历后放在this上
      created () {
        console.log('---created')
        // 调接口
      },
      // 通过el/$mount/template找视图模板
      // 把template视图模板编译成render() (render方法是用于创建虚拟DOM的)
      beforeMount () {
        console.log('---beforeMount')
      },
      // 创建$el挂载节点
      // 调用render()方法第一次生成虚拟DOM（Vnode是对真实视图结构的一种数据描述）
      // Vue开始编译工作，循环递归，指令和声明式变量进行touch，依赖收集、通知Watcher第一次完成DOM渲染
      mounted () {
        console.log('---mounted')
        // 调接口、开定时器、建立websocket长连接、echarts图表实例化、DOM/BOM操作。。。
      },
      // 网页呈现你的面前上，当各种事件交互触发data变化时
      beforeUpdate () {
        console.log('---beforeUpdate')
      },
      // 再次调用render()方法生成新的虚拟DOM（现在就有了两个虚拟DOM）
      // 执行patch运算（diff运算）找出两个虚拟DOM之间的最小差异（脏节点集合），通过一个队列进行异步更新。
      updated () {
        console.log('---updated')
        // updated在某些场景下，可以模拟出watch/$nextTick()的功能。
      },
      // 当调用$destroy()或路由切换时，即将进入销毁阶段
      beforeDestroy () {
        console.log('---beforeDestroy')
        // 清除定时器、清除缓存
      },
      // 移除当前组件的Watcher（DOM将无法再更新了）
      // 拆卸掉所有的子组件
      // 移除事件监听器（wacth等等）
      destroyed () {
        console.log('---destroyed')
      },
      methods: {
        add () {
          console.log('---add')
          this.num++
        }
      }
    })
    app.$mount('#app')