标签:除了 等等 function 方法 number 操作 改变 利用 his
vue框架和react框架虽然都是虚拟dom,组件化开发,其中的不同点还是蛮多的。首先vue的双向绑定而react则是单项数据流。react使用了jsx语法,让编程更组件话。除了这些他们的生命周期还是不一样的
总归他们都经历了 初始化阶段,运行阶段,销毁阶段。其中运行阶段又分渲染和数据更新两部分
先说下vue的生命周期相对比较简单:
初始化阶段:
1:new Vue(...) 实例化、组件通过new Vue() 创建出来之后会初始化事件和生命周期,然后就会执行beforeCreate钩子函数,这个时候,数据还没有挂载呢,只是一个空壳,无法访问到数据和真实的dom,一般不做操作
2:挂载数据,绑定事件等等,然后执行created函数,这个时候已经可以使用到数据,也可以更改数据,在这里更改数据不会触发updated函数,在这里可以在渲染前倒数第二次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取
运行阶段:
1:接下来开始找实例或者组件对应的模板,编译模板为虚拟dom放入到render函数中准备渲染,然后执行beforeMount钩子函数,在这个函数中虚拟dom已经创建完成,马上就要渲染,在这里也可以更改数据,不会触发updated,在这里可以在渲染前最后一次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取
2:接下来开始render,渲染出真实dom,然后执行mounted钩子函数,此时,组件已经出现在页面中,数据、真实dom都已经处理好了,事件都已经挂载好了,可以在这里操作真实dom。
到这里还不算结束,如果在程序运行中,没有更新数据则无视,一旦有数据更新了,就会走以下两个钩子:beforeupdate,update
当组件或实例的数据更改之后,会立即执行beforeUpdate,然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染,当更新完成后,执行updated,数据已经更改完成,dom也重新render完成,可以操作更新后的虚拟dom
销毁阶段:
1:当经过某种途径调用$destroy方法后,立即执行beforeDestroy,一般在这里做一些善后工作,例如清除计时器、清除非指令绑定的事件等等
2:组件的数据绑定、监听...去掉后只剩下dom空壳,这个时候,执行destroyed,在这里做善后工作也可以
总结起来无外乎就七个当然真实的流程要更细致复杂,有兴趣的可以自己研究源码,实际项目中用到这些完全够了:
newVue()实例化 => beforeCreate,created =>beforemounted,mounted =>(if data change){ beforeupdate,update } => beforedestroyed,destroyed
这里有几点要注意:
1:Vue的编译实际上是指Vue把模板编译成 render 函数的过程
2:render选项参数比template更接近Vue解析器!所以综合排列如下:
<div> <header> <h1>I‘m a template!</h1> </header> <p v-if="message"> {{ message }} </p> <p v-else> No message. </p> </div> 会被渲染成: function anonymous() { with(this){return _c(‘div‘,[_m(0),(message)?_c(‘p‘,[_v(_s(message))]):_c(‘p‘,[_v("No message.")])])} }
4:在Vue中,数据更改会导致虚拟 DOM 重新渲染,并先后调用beforeUpdate钩子函数和updated钩子函数
重渲染(调用这两个钩子函数)的前提是被更改的数据已经被写入模板中!!(这点很重要)
var vm = new Vue({ el: ‘#app‘, data: { number: 1 }, template: ‘<div id="app"><p></p></div>‘, beforeUpdate: function () { console.log(‘调用了beforeUpdate钩子函数‘)//控制台没有打印 }, updated: function () { console.log(‘调用了updated钩子函数‘)//控制台没有打印 } }) vm.number = 2
// 在模板中使用number这个数据 template: ‘<div id="app"><p> {{ number }} </p></div>‘,//添加{{number}}
beforeUpdate: function () { console.log(‘调用了beforeUpdate钩子函数‘)//此时被打印出来了 }, updated: function () { console.log(‘调用了updated钩子函数‘)//此时被打印出来了
}
也就是说:只有Vue实例中的数据被“写入”到我们的模板中,它的改变才可以被Vue追踪,重渲染从而调用 beforeUpdate钩子函数和updated钩子函数
5:
标签:除了 等等 function 方法 number 操作 改变 利用 his
原文地址:https://www.cnblogs.com/zbbk/p/13097914.html