Vue生命周期和MVVM框架

  • Vue生命周期和MVVM框架已关闭评论
  • 22 次浏览
  • A+
所属分类:Web前端
摘要

组件从开始到结束的全过程更新阶段:beforeUpdate、updated网页本质 = M数据层 + V视图结构


生命周期

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

  • 创建阶段: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视图结构