VueDay12Vue的生命周期
Vue的生命周期和react有些类似：
1.beforeCreate():创造之前,此时数据data和事件方法methods还未绑定到app对象上
2.created():创造,数据data和方法methods绑定到应用对象app上
3.beforeMount():挂载之前,渲染之前，根据数据生成的DOM对象是获取不到的
4.mounted():挂载,渲染之后，可以获取数据生成的DOM对象
5.beforeUpdate():当data被修改时,数据更改，但内容未更改之前
6.updated():data数据更改时，内容更改后
7.beforeDestroy():应用销毁之前
8.destroyed():应用销毁之后
简单的代码来实现一下生命周期：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<h1 :class="className">类名绑定</h1>
</div>
<script type="text/javascript">
let app =new Vue({
el:"#app",
data:{
msg:"helloVue!",
className:"redBg"
},
// 创造之前,数据还没绑定到app对象上（应用上）
beforeCreate() {
console.log('beforCreate')
// 此时数据data和事件方法methods还未绑定到app对象上
console.log(this)
console.log(this.msg)
console.log(this.clickEvent)
},
// 创造
created() {
console.log('created')
// 数据data和方法methods绑定到应用对象app上
console.log(this)
console.log(this.msg)
console.log(this.clickEvent)
},
// 挂载之前
beforeMount() {
// 渲染之前，根据数据生成的DOM对象是获取不到的
console.log('beforeMount')
let dom = document.querySelector(".redBg")
console.log(dom)
},
// 挂载
mounted() {
// 渲染之后，可以获取数据生成的DOM对象
console.log('mounted')
let dom = document.querySelector(".redBg")
console.log(dom)
},
// 当data被修改时
beforeUpdate() {
// 数据更改，但内容未更改之前
console.log('beforeUpdate')
},
updated() {
console.log('updated')
},
beforeDestroy() {
// 应用销毁之前
console.log('beforeDestroy')
},
destroyed() {
// 应用销毁之后
console.log('destroyed')
},
methods:{
clickEvent:function(){
}
}
})
</script>
</body>
</html>
组件的使用，实现更新和挂载生命周期的变化代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript">
</script>
</head>
<body>
<div id="app">
<!-- v-if销毁页面元素，每次isShow=true时都会重新创建和挂起，消耗性能 -->
<hello-com v-if='isShow' ></hello-com>
<!-- v-show不会销毁元素，只是设置display=none，不存在对象的创建和挂起，不消耗性能 -->
<hello-com v-show='isShow' ></hello-com>
</div>
<script type="text/javascript">
// 组件
let helloCom = Vue.component("hello-com",{
template:'<div><h1>{{peifengyang}}</h1><button @click="changeData">修改数据</button></div>',
data:function(){
return {
peifengyang:"hello peifengyang"
}
},
methods:{
changeData:function(){
this.peifengyang = "hello 小明"
}
},
// 创造之前,数据还没绑定到app对象上（应用上）
beforeCreate() {
console.log('beforCreate')
// 此时数据data和事件方法methods还未绑定到app对象上
console.log(this)
console.log(this.msg)
console.log(this.clickEvent)
},
// 创造
created() {
console.log('created')
// 数据data和方法methods绑定到应用对象app上
console.log(this)
console.log(this.msg)
console.log(this.clickEvent)
},
// 挂载之前
beforeMount() {
// 渲染之前，根据数据生成的DOM对象是获取不到的
console.log('beforeMount')
let dom = document.querySelector(".redBg")
console.log(dom)
},
// 挂载
mounted() {
// 渲染之后，可以获取数据生成的DOM对象
console.log('mounted')
let dom = document.querySelector(".redBg")
console.log(dom)
},
// 当data被修改时
beforeUpdate() {
// 数据更改，但内容未更改之前
console.log('beforeUpdate')
},
updated() {
console.log('updated')
},
beforeDestroy() {
// 应用销毁之前
console.log('beforeDestroy')
},
destroyed() {
// 应用销毁之后
console.log('destroyed')
}
})
let app = new Vue({
el:"#app",
data:{
isShow:true
},
components:{
'hello-com':helloCom
}
})
</script>
</body>
</html>
