19_生命周期
2018-02-09 本文已影响0人
CHENPEIHUANG
Vue生命周期图示
Vue的生命周期：
1）创建Vue空对象
2）初始化Vue的数据·方法·计算属性等，在之前调用beforeCreate钩子函数，之后调用created钩子函数
3）判断是否设置el属性
如果没有设置过则判断Vue实例是否调用了$mount方法
如果设置过el属性或调用$mount方法则判断是否设置template属性
如果有则将template指定视图作为模板，如果没有则就将el所在的元素作为模板
4）编译模板，即根据所获取到的模板生成虚拟DOM，并且解析模板内的插值及指令
5）将虚拟DOM挂载在真实DOM中，在挂载前调用beforeMount钩子函数，在挂载后调用mounted钩子函数
6）如果数据有更新，则重新触发虚拟DOM更新，同时触发真实DOM也更新，更新前调用beforeUpdate钩子函数，更新后调用updated钩子函数
7）调用vm.$destroy()销毁Vue实例
设置数据监听(beforeCreate和created) ->
编译模板-> 挂载实例到DOM(beforeMount和mounted) ->
数据变化是更新DOM(beforeUpdate和updated) ->
销毁(beforeDestory和destroyed)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<input type="msg" v-model="msg"/>
<p class="box">{{msg}}</p>
<p>{{newMsg}}</p>
</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:"hello"
},
methods:{
show(){
}
},
computed:{
newMsg(){
console.log("计算属性被调用")
return this.msg.toUpperCase()
}
},
beforeCreate(){
console.log("Vue实例数据初始化前调用。。。")
console.log(this.msg)//undefined
console.log(this.show)//undefined
},
created(){
console.log("Vue实例创建了，数据初始化完成。。。")
console.log(this.msg)//hello
console.log(this.show)//Object
//created方法中可以请求后台数据，对data属性进行初始化
},
//template:"<h1>Hello</h1>"
beforeMount(){
console.log("befotMount钩子函数被调用。。。")
console.log(this.$el)
//console.log(document.getElementById('app'));
},
mounted(){
console.log("mount钩子函数被调用。。。")
console.log(this.$el)
//console.log(document.getElementById('app'))
//在mounted方法中,进行DOM操作
},
beforeUpdate(){
console.log("数据更新导致DOM更新前"+document.getElementsByClassName('box')[0].innerHTML)
},
updated(){
console.log("数据更新导致DOM更新后"+document.getElementsByClassName('box')[0].innerHTML)
//updated方法中进行数据更新后的DOM操作
}
});
//Vue的生命周期：
//1.创建Vue空对象
//2.初始化Vue的数据·方法·计算属性等，在之前调用beforeCreate钩子函数，之后调用created钩子函数
//3.判断是否设置el属性
// 如果没有设置过则判断Vue实例是否调用了$mount方法
// 如果设置过el属性或调用$mount方法则判断是否设置template属性
// 如果有则将template指定视图作为模板，如果没有则就将el所在的元素作为模板
//4.编译模板，即根据所获取到的模板生成虚拟DOM，并且解析模板内的插值及指令
//5.将虚拟DOM挂载在真实DOM中，在挂载前调用beforeMount钩子函数，在挂载后调用mounted钩子函数
//6.如果数据有更新，则重新触发虚拟DOM更新，同时触发真实DOM也更新，更新前调用beforeUpdate钩子函数，更新后调用updated钩子函数
//7.调用vm.$destroy()销毁Vue实例
vm.$mount("#app")//可以替代el属性
//设置数据监听(beforeCreate和created) -> 编译模板-> 挂载实例到DOM(beforeMount和mounted)-> 数据变化是更新DOM(beforeUpdate和updated)-> 销毁(beforeDestory和destroyed)
</script>
</body>
</html>
