生命周期?
生命周期:vue实例从创建到销毁的一系列过程
在每个周期中被自动调用的函数叫做生命周期函数,也叫
钩子函数
作用:在实例被创建到被回收的整个过程中,会在不同
的时期有不同的钩子函数,我们可以使用不同时期的
钩子函数做完成不同的操作
vue中的生命周期分3个阶段:初始阶段,更新阶段,销毁阶段
生命周期中的this指向的都是实例本身
<body>
<div id ="example">{{message}}</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el:'#example',
data :{
message:'match'
},
beforCreate(){
//实例初始化之前,初始自己的生命周期
console.log('beforCreate');
},
created() {
// 挂载data中的数据,响应式的数据变化,观察数据(getter,setter)
console.log('created');
},
beforeMount() {
// dom元素挂载之前
console.log('beforeMount');
},
mounted() {
// dom元素渲染之后
console.log('mounted');
},
beforeUpdate() {
// 数据更新之前执行,前提是更新的数据被使用了.
console.log('beforeUpdate');
},
updated() {
// 数据一更新就会触发
console.log('updated');
} ,
beforeDestroy() {
// 销毁前触发
console.log('beforeDestroy');
},
destroyed() {
// 销毁后执行
// 此时销毁,响应式的数据没有了,实例还在
console.log('destroyed');
}
})
</script>
</body>
<body>
<div id="app">
<button @click="msg ='哈哈哈哈'">修改msg的值</button>
<input type="text" v-model="msg">
<p>{{ msg }}</p>
<select v-model="fruit">
<option value="apple">苹果</option>
<option value="orange">橘子</option>
<option value="banana">香蕉</option>
</select>
<input type="checkbox" v-model="chk">
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el:'#app',
data: { msg: '',
fruit:'',
chk:true
}
})
</script>
</body>