Vue生命周期和MVVM框架实例分析

这篇文章主要介绍“Vue生命周期和MVVM框架实例分析”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“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')

app.$mount('#app')和el:'#app'都是挂载到真实DOM中。

什么是虚拟DOM

是一个很大的JSON数据，用于描述视图模板的，保存在内存中。

虚拟DOM存在的价值点

更新，把DOM更新粒度降到最低，规避人为DOM滥操作。

什么是diff运算

在更新阶段，patch对新旧虚拟DOM进行对比，找出脏节点，提交更新。

什么是MVVM框架

MVVM流程 : M数据层 -> VM虚拟DOM层 -> V视图层

网页本质 = M数据层 + V视图结构

关于“Vue生命周期和MVVM框架实例分析”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网精选频道，小编每天都会为大家更新不同的知识点。