Vue生命周期和MVVM框架

  
生命周期:

组件从开始到结束的全过程
  • 创建阶段: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")
 //app.$mount("#app")和el:"#app"都是挂载到真实DOM中。
什么是虚拟DOM
是一个很大的JSON数据,用于描述视图模板的,保存在内存中。
虚拟DOM存在的价值点
更新,把DOM更新粒度降到最低,规避人为DOM滥操作。
什么是diff运算
在更新阶段,patch对新旧虚拟DOM进行对比,找出脏节点,提交更新。
什么是MVVM框架
MVVM流程 : M数据层 -> VM虚拟DOM层 -> V视图层
网页本质 = M数据层 + V视图结构