vue生命周期钩子函数一目了然
四对儿生命周期钩子函数
<script src="js/vue.js"></script>
</head>
<body>
<div id="box" class="box">
{{n}}
<input type="text" ref="txt" v-model="n"> <!--ref 标示节点-->
<button @click="kill">强制卸载</button>
</div>
<script>
new Vue({
el:"#box",
data:{
n:1
},
beforeCreate(){
console.log(" beforeCreate ");
},
created(){
console.log(" created ");
},
beforeMount(){
console.log(" beforeMount ");
},
// render(createElement){ //自动发送，写了会影响原发送信息
// return createElement("h2",null,"hello");
// },
mounted(){
console.log("mounted")
this.n=6;
this.$refs.txt.focus(); //找到节点
this.timer = setInterval(()=>{
console.log(1111)
},1000)
},
beforeUpdate(){
console.log("beforeUpdate")
},
updated(){
console.log("updated")
},
beforeDestroy(){
console.log("beforeDestroy");
clearInterval(this.timer); //销毁时，触发beforeDestory函数执行
},
destroyed(){
console.log("destroyed")
},
methods:{
kill(){
this.$destroy(); //销毁this指这个vue组件
}
}
})
</script>
</body>
下图为转载：