Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue组件 - 生命周期
目录
生命周期
创建阶段
beforCreate
created
挂载阶段
Mount挂载
BeforeMount
Mounted
说明
根组件中的组件
更新阶段
销毁阶段
总结
生命周期
创建阶段
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>效果：
总结
Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue组件 - 生命周期