Vue的生命周期和钩子函数
2019-03-12 本文已影响0人
雪映月圆
Vue的生命周期
Vue示例被创建到销毁的过程
Vue的钩子函数详解
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue的声明周期和钩子函数</title>
</head>
<body>
<div id="app">
<button @click="win">control</button>
{{msg}}
</div>
<script src="js/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: 'hello'
},
// template: "<h1>{{msg}}-------ok</h1>",
methods: {
win() {
alert('ok');
}
},
// 生命周期(钩子函数 hook)函数就是vue实例在某一个时间点会自动执行的函数
// 此时vue实例已经进行了基础的初始化，但data数据还没有绑定到vue的实例，此时，访问不到data数据
beforeCreate() {
console.log('beforeCreate', this.msg);
},
// 此时，data数据已经注入vue的实例，我们可以通过this访问到data数据
created() {
console.log('created', this.msg);
},
// 此时，模板和数据已经结合，编译，但还没有挂载到指定的挂载点上 （或者没有挂载到指定的页面元素上）
beforeMount() {
console.log('beforeMount', this.$el);
},
// 此时，编译后的模板已经挂载到挂载点上，我们会看到加载了数据的视图的更新
mounted() {
console.log('mounted', this.$el);
},
// 当有数据发生改变时，模板重新渲染之前，会触发该事件。
beforeUpdate() {
console.log('beforeUpdate', this.$el.innerHTML);
},
// 当模板重新渲染之后，触发该事件
updated() {
console.log('updated', this.$el.innerHTML);
},
// 当执行vm.$destroy()，vue实例销毁之前发生
beforeDestroy() {
console.log('beforeDestroy');
},
//vue实例销毁之后发生，此时再改变数据，不会触发视图更新（或者视图重新渲染）
destroyed() {
console.log('destroyed');
}
});
//也可以通过vm.$mount注册挂载点
// vm.$mount('#app');
</script>
</body>
</html>
