beforeCreate 和 created
- 小结：created 中可以操作数据，实现vue -> 页面的影响
- 应用：发起ajax请求
代码：
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
//定义Test组件
var Test = {
data:function(){
return {
text:'steven qin',
}
},
template:`<div>
我是test组件
</div>`,
beforeCreate:function(){
//组件创建之前
console.log(this.text);
},
created:function(){
//组件创建之后
console.log(this.text);
},
//小结：使用该组件，就会触发以上的事件函数（钩子函数）
// created 中可以操作数据，实现vue -> 页面的影响
// 应用：发起ajax请求
};
//定义App组件
var App = {
components:{
test:Test,
},
template:`
<div>
<test/>
</div>
`,
};
new Vue({
el:'#app',
components:{
app:App,
},
template:'<app/>'
});
</script>
</body>
挂载前beforeMount 和 挂载后mounted
-
beforeMount装载 Vue启动前的DOM; -
mounted装载执行 Vue启动后的DOM，只执行一次;
代码：
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
//定义Test组件
var Test = {
data:function(){
return {
text:'steven qin',
}
},
template:`<div>
我是test组件
</div>`,
beforeMount:function(){
//vue起作用，装载数据到DOM前
console.log(document.body.innerHTML);
},
mounted:function(){
//vue起作用，装载数据到DOM后
console.log(document.body.innerHTML);
},
};
//定义App组件
var App = {
components:{
test:Test,
},
template:`
<div>
<test/>
</div>
`,
};
new Vue({
el:'#app',
components:{
app:App,
},
template:'<app/>'
});
</script>
</body>
image.png
beforeUpdate 更新前 和 更新后updated
- 这两个有更改数据才会触发
- 应用：
beforeUpdate可以获取到原DOM；updated可以获取到新DOM
代码：
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
//定义Test组件
var Test = {
data:function(){
return {
text:'steven qin',
}
},
template:`<div>
我是test组件 {{text}}
<button @click="text = text+1;">gogo</button>
</div>`,
beforeMount:function(){
//vue起作用，装载数据到DOM前
console.log('beforeMount');
},
mounted:function(){
//vue起作用，装载数据到DOM后
console.log('mounted');
},
//基于数据改变，影响页面
beforeUpdate:function(){
console.log(document.body.innerHTML);
},
updated:function(){
console.log(document.body.innerHTML);
},
//这两个有更改数据才会触发
//应用： beforeUpdate 可以获取到原DOM；
//updated 可以获取到新DOM
};
//定义App组件
var App = {
components:{
test:Test,
},
template:`
<div>
<test/>
</div>
`,
};
new Vue({
el:'#app',
components:{
app:App,
},
template:'<app/>'
});
</script>
</body>
beforeDestroy 销毁前 和 销毁后destroyed
- 销毁，最终都是做一些其它功能的释放，比如，保存到localStorage
代码：
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
//定义Test组件
var Test = {
data:function(){
return {
text:'steven qin',
}
},
template:`<div>
我是test组件 {{text}}
<button @click="text = text+1;">gogo</button>
</div>`,
//对应父组件 v-if false 就销毁当前组件（子组件）
beforeDestroy:function(){//销毁前
console.log('beforeDestroy');
console.log(this.text);
},
destroyed:function(){//销毁后
console.log('destroy');
console.log(this.text);
},
beforeCreate:function(){//vue启动前DOM
console.log('beforeCreate');
console.log(this.text);
},
created:function(){//vue启动后DOM
console.log('created');
console.log(this.text);
}
};
//定义App组件
var App = {
components:{
test:Test,
},
data:function(){
return {
isExist:true,
}
},
template:`
<div>
<test v-if="isExist"></test>
<button @click ="isExist = !isExist;">事关子组件生死</button>
</div>
`,
};
new Vue({
el:'#app',
components:{
app:App,
},
template:'<app/>'
});
</script>
</body>
如果频繁的销毁destroyed和创建created组件，对业务显然是不合理的，因此可以使用
<keep-alive></keep-alive>这个内置组件来缓存组件(包裹被销毁的如父组件是v-if来控制的组件)，这又会触发下面的这两个生命周期
activated 激活 和 deactivated 停用
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
//定义Test组件
var Test = {
data:function(){
return {
text:'steven qin',
}
},
template:`<div>
我是test组件 {{text}}
<button @click="text = text+1;">gogo</button>
</div>`,
//对应父组件 v-if false 就销毁当前组件（子组件）
beforeDestroy:function(){//销毁前
console.log('beforeDestroy');
console.log(this.text);
},
destroyed:function(){//销毁后
console.log('destroy');
console.log(this.text);
},
beforeCreate:function(){//vue启动前DOM
console.log('beforeCreate');
console.log(this.text);
},
created:function(){//vue启动后DOM
console.log('created');
console.log(this.text);
},
activated:function(){
console.log('组件激活');
},
deactivated:function(){
console.log('组件停用');
}
//created 和 activated 都是 v-if = 'true' 子组件的状态
//created 没有被keep-alive 内置组件包裹，activated被keep-alive包裹了。
};
//定义App组件
var App = {
components:{
test:Test,
},
data:function(){
return {
isExist:true,
}
},
template:`
<div>
<keep-alive>
<test v-if="isExist"></test>
</keep-alive>
<button @click ="isExist = !isExist;">事关子组件生死</button>
</div>
`,
};
new Vue({
el:'#app',
components:{
app:App,
},
template:'<app/>'
});
</script>
</body>
image.png
