创建前，创建后，渲染前，渲染后，更新前，更新后，销毁前，销毁后，举例说明这些：
<body>
<div id="box">
<h1>{{msg}}</h1>
<button @click='updatemsg'>更新</button>
</div>
<button οnclick="des()">销毁</button>
<script src="./vue.js"></script>
<script>
let vue1=new Vue({
el:'#box',
data:{
msg:'我是msg'
},
methods:{
updatemsg(){
this.msg='更新后'
}
},
beforeCreate(){ //vue实例创建前 这个时候vue实例已经创建，但data和methods还没有被初始化。
console.log(this.msg) //undefined,因为data,methods还没有被初始化，所以获取不到数据
},
created(){ // vue实例创建后，在这个阶段是最早可以使用data和methods的钩子函数，但是这个阶段dom中的数据还没被渲染
// 发送http请求最早可以在created生命周期请求
console.log(this.msg) //我是msg
},
beforeMount(){ // 渲染前 在这个阶段 vue实例生成了一个虚拟dom，存在内存中，但是HTML页面还没有被渲染；
let h1=document.querySelector('h1')
console.log(h1) // <h1>{{msg}}</h1>
},
mounted(){ //渲染后 在这个阶段内存中的虚拟dom被真实的dom替换到浏览器页面中（将data中数据渲染页面上）
let h1=document.querySelector('h1')
console.log(h1) //<h1>我是msg</h1>
},
beforeUpdate(){ // data中的数据已经是最新的，但是页面中的数据还未同步；(data中的数据已改变但是数据未渲染)
let h1=document.querySelector('h1')
console.log(h1.innerHTML+'---更新前') //我是msg---更新前
},
updated(){ //数据更新后 data中的数据和页面中的数据已经同步更新；
let h1=document.querySelector('h1')
console.log(h1.innerHTML+'---更新后') //更新后---更新后
},
beforeDestroy(){ //vue实例销毁前，这个时期vue实例可以以继续使用
console.log('销毁前')
},
destroyed(){ //vue实例销毁后，vue不能继续使用
console.log('销毁后')
}
})
function des(){
vue1.$destroy() //销毁vue实例
}
</script>
</body>
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
