目录
生命周期
创建阶段
beforCreate
beforCreate函数 无法访问定义的状态
created
created函数 调用时已经定义了状态，可以访问到状态，
可以初始化状态或者挂载到当前实例的一些属性。
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="box">
</div>
<script>
new Vue({
el:"#box",
data: {
myname:"Li"
},
beforeCreate() {
console.log("beforeCreate", this.myname)
},
created() {
console.log("created", "初始化状态或者挂载到当前实例的一些属性")
}
})
</script>
</body>
</html>请求效果：
可以在created中 处理初始化一些全局变量，
到这一步，才挂载当前实例的一些属性。
示例如下：
created() {
console.log("created", "初始化状态或者挂载到当前实例的一些属性")
this.myname = this.myname + '-111'
this.user = localStorage.getItem("user")
}挂载阶段
Mount挂载
不使用el属性，还可以使用mount挂载。
示例如下：
new Vue({
data: {
myname:"Li"
},
beforeCreate() {
console.log("beforeCreate", this.myname)
},
created() {
console.log("created", "初始化状态或者挂载到当前实例的一些属性")
this.myname = this.myname + '-111'
this.user = localStorage.getItem("user")
}
}).$mount("#box")BeforeMount
beforeMount函数 模板解析之前最后一次修改模板节点。
示例如下：
beforeMount() {
console.log(this.$el)
},Mounted
Mounted函数 依赖于dom创建之后，才进行初始化工作的插件（轮播插件）
示例如下：
mounted() {
console.log("mounted", "拿到真实的dom节点", document.getElementById("box").innerHTML)
// 依赖于dom创建之后，才进行初始化工作的插件（轮播插件）
// 订阅 bus.$on
// 发送ajax
},说明
订阅在 中央事件总线时使用过
发ajax请求后端数据 然后赋值渲染
上面的四个事件，一次生命周期中只会执行一次。
根组件中的组件
根组件中也支持写组件属性，
示例如下：
// 根组件
new Vue({
el:"#box",
data: {
myname:"Li"
},
template: `<div>root component -- {
{}}</div>`,
beforeCreate() {
console.log("beforeCreate", this.myname)
},
created() {
console.log("created", "初始化状态或者挂载到当前实例的一些属性")
this.myname = this.myname + '-111'
this.user = localStorage.getItem("user")
}
})更新阶段
更新事件有两个函数；当状态改变后，会触发更新事件。
更新前得到的是旧的dom，可以用来记录未修改前的dom状态。
示例如下：
<div id="box">
{
{myname}}
<button @click=" myname='xiaoli'">change</button>
<ul>
<li v-for="data in datalist" :key="data">
{
{data}}
</li>
</ul>
</div>
<script>
// 根组件
new Vue({
el:"#box",
data: {
myname:"Li",
datalist:[]
},
//template: `<div>root component -- {
{}}</div>`,
beforeCreate() {
//console.log("beforeCreate", this.myname)
},
created() {
//console.log("created", "初始化状态或者挂载到当前实例的一些属性")
//this.myname = this.myname + '-111'
//this.user = localStorage.getItem("user")
},
beforeMount() {
//console.log(this.$el)
},
mounted() {
//console.log("mounted", "拿到真实的dom节点", document.getElementById("box").innerHTML)
// 依赖于dom创建之后，才进行初始化工作的插件（轮播插件）
// 订阅 bus.$on
// 发送ajax
// 模拟发送ajax 获取后端数据
setTimeout(() => {
this.datalist = ["张三", "李四", "王五"]
}, 2000)
},
beforeUpdate() {
console.log("beforeUpdate", "更新之前，记录之前dom的某些状态，比如滚动条的位置")
},
updated() {
console.log("updated", "更新完成，获取更新之后的dom，才进行swiper工作的插件")
}
})
</script>销毁阶段
销毁事件一般用在子组件的销毁，根组件较少使用。
做一个封装抢购的倒计时子组件示例。
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="box">
<child v-if="isCreated"></child>
</div>
<script>
Vue.component("child", {
data() {
return {
time:1000
}
},
// 设置销毁条件
created() {
this.id = null
},
// 增加倒计时
mounted() {
this.id = setInterval(()=> {
console.log("倒计时")
this.time--
}, 1000)
window.onresize = () => {
console.log("resize")
}
},
template:`
<div>
抢购倒计时组件
<div>{
{time}}</div>
</div>
`,
beforeDestroy() {
console.log("beforeDestroy", "清除定时器，事件解绑。。。")
clearInterval(this.id)
window.onresize = null
},
destroyed() {
console.log("destroyed", "清除定时器，事件解绑。。。")
}
})
let vm = new Vue({
el:"#box",
data: {
isCreated: true
}
})
</script>
</body>
</html>效果：
