Vue 生命周期
举了个例子,可以在控制台看输出的结果,就一目了然了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>生命周期</title>
</head>
<body>
<div id="app">
<App></App>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
Vue.component('Test', {
data() {
return {
msg: "hello world",
}
},
template: `<div @click="clickChange">{{msg}}</div>`,
methods: {
clickChange() {
this.msg = this.msg + '大家好'
}
},
// 生命周期
beforeCreate() {
// 组件创建之前
// 实粒已经获取到,但是获取不到data里的值
console.log(this.msg)
},
created() {
// 组件创建之后
console.log(this.msg)
// 调用该组件就会调用created方法,
// 在created这个方法中可以操作后端的数据,数据驱动试图
// 应用:发请Ajax请求
},
beforeMount() {
// 挂载数据到DOM之前
console.log(document.querySelector("#app"));
},
mounted() {
// 挂载数据到DOM之后会调用Vue以后的DOM
console.log(document.querySelector("#app"));
},
beforeUpdate() {
// 更新DOM之前调用该钩子,
// 应用:可以获取原始DOM
console.log(document.querySelector("#app").innerHTML);
},
updated() {
// 更新DOM之后调用该钩子,
// 应用:可以获取最新的DOM
console.log(document.querySelector("#app").innerHTML);
},
beforeDestroy() {
// 销毁之前
console.log('beforeDestroy');
},
destroyed() {
// 销毁之后
console.log('destroyed');
},
activated() {
console.log('组件被激活了')
},
deactivated() {
console.log('组件被停用了')
},
});
var App = {
data() {
return {
isShow: true
}
},
// vue内置组件<keep-alive></keep-alive>
// 能在组件的切换过程中将状态保留在DOM中,防止重复渲染DOM
template: `<div class="app">
<keep-alive>
<Test v-if="isShow"></Test>
</keep-alive>
<button @click="isShow=!isShow">改变生死</button>
</div>`
};
new Vue({
el: "#app",
components: {
App
},
});
</script>
</html>