categories:
- vue基础
tags: - vue生命周期
目录
vue生命周期
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<App></App>
</div>
<script src="./vue.js"></script>
<script>
Vue.component('Test',{
data(){
return {
msg:'hello world',
} ;
},
template:`
<div>
<div>{{msg}}</div>
<button @click="clickHandler">改变</button>
</div>
`,
methods:{
clickHandler(){
return this.msg += "尴尬";
}
},
beforeCreate:function () {
// 组件创建之前
console.log(this)
// 已创建vue对象，但是数据没有创建
},
created:function () {
// 组件创建之后
console.log(this.msg)
// 使用组件，就会调用created()方法
// 在created方法中可操作后端数据，数据驱动视图
// 应用：发起ajax请求
},
beforeMount:function () {
// 挂载数据到DOM之前会调用
console.log(document.getElementById('app'))
},
mounted:function () {
// 挂载数据到DOM之后会调用
console.log(document.getElementById('app'))
},
beforeUpdate:function () {
//在更新DOM之前调用该钩子，应用可以获取原始DOM
console.log(document.getElementById('app').innerHTML)
},
updated:function () {
//在更新DOM之后调用该钩子，应用可以获取原始DOM
console.log(document.getElementById('app').innerHTML)
},
//以下两个组件需要禁用keep-alive组件
beforeDestroy:function () {
//销毁之前
console.log("beforeDestroy");
},
destroyed:function () {
// 销毁之后
console.log("destroyed")
// 销毁定时器
},
//以下两个组件需要与keepalive配合使用
activated:function () {
// 组件被激活了
console.log('组件被激活了')
},
deactivated:function () {
// 组件被停用了
console.log('组件被停用了')
}
})
var App = {
data(){
return {
isShow:true
}
},
//vue内置组件<keep-alive></keep-alive>能在组件的切换过程中将状态保留在内存中。防止DOM重复渲染
// 使用之后，并不会触发销毁函数
template:`
<div>
<div class="app">
<keep-alive>
<Test v-if="isShow"/>
</keep-alive>
<button @click="isShow = !isShow">改变生死</button>
</div>
</div>`
}
new Vue({
el:'#app',
data(){
return {}
},
components: {
App
}
})
</script>
</body>
</html>