目录写在前面生命周期图解总结写在前面 vue.js的核心就是以简洁的模板语法将数据渲染进Dom系统。Vue实例在渲染成html的时候往往要经过以下的步骤: 读取数据和方法,设置数据绑
vue.js的核心就是以简洁的模板语法将数据渲染进Dom系统。Vue实例在渲染成html的时候往往要经过以下的步骤:
vue实例初始化,数据监听和方法属性挂载之前调用
数据监听和方法属性挂载之后调用,是最早可以获取和操作数据及方法的数据
template解析之后调用,这个时候实例还没挂载到dom上
replace el之后调用,实例已经挂载到dom上,是最早可以操作dom的时候
组件中的数据发生变化的时候执行,此时数据已经和页面保持同步,只是页面还没更新
数据更新后,页面也是最新的
实例销毁之前调用,实例上的方法和属性还可以调用
实例已经销毁,实例上的东西已经不可以使用
问: 什么时候可以操作dom?
outer html(直接渲染在根节点下面的)在beforcreate阶段就可以操作,使用template渲染的要在mounted阶段才可以操作
<div id='app'>
<span id='span1'> 直接渲染的文字 </span>
<span id='span2'> {{message}} <span>
<com id='span3'></com>
</div>
<script>
function deepClone(obj){
return obj && JSON.parse(jsON.stringify(obj));
};
</script>
<script>
function test(stage) {
var span1 = document.getElementById('span1');
var span2 = document.getElementById('span2');
var span3 = document.getElementById('span3');
debugger;
};
Vue.component('com', {
template: '<span>使用template渲染的文字</span>'
});
var vm = new Vue({
el:'#app',
data: {
message: 'hello vue!'
},
beforeCreate() {
test('beforeCreate');
},
created() {
test('created');
},
beforeMount() {
test('beforeMount');
},
mounted() {
test('mounted');
}
});
</script>
beforeCreate阶段、created阶段、beforeMount阶段
可以操作outer html但获取不到data中的数据,template这个时候还没渲染,无法被获取到
mounted阶段
mounted阶段页面已经渲染完毕,可以操作所有的dom
组件的生命周期还有actived和deactived是keep-alive的专属。
到此这篇关于Vue组件与生命周期详细讲解的文章就介绍到这了,更多相关Vue组件与生命周期内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: Vue组件与生命周期详细讲解
本文链接: https://www.lsjlt.com/news/169552.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0