Vue 生命周期
2020-10-07 本文已影响0人
云凡的云凡
1.生命周期就是vue实例在某一个时间点会自动执行的函数
2.钩子函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>5.Vue实例生命周期函数</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">{{message}}</div>
<script>
// 通过new加Vue这个修饰符创建出来的
var vm = new Vue({
el: '#app',
data: {
message: 'hello'
},
beforeCreate() {
console.log('beforeCreate el', this.$el); //undefined
console.log('beforeCreate data', this.$data); //undefined
},
created() {
console.log('created el', this.$el); //undefined
console.log('created data', this.$data); //{__ob__: Observer}
},
beforeMount() {
// 页面还没有被完全渲染
console.log('beforeMount el', this.$el);//{{message}}
console.log('beforeMount data', this.$data); //{__ob__: Observer}
},
mounted() {
// 页面被渲染完毕
console.log('mounted el', this.$el); //hello
console.log('mounted data', this.$data); //{__ob__: Observer}
},
beforeDestroy() {
//vm.$destroy()
//beforeDestroy
//destroyed
// 组件即将被销毁时执行
console.log('beforeDestroy');
},
destroyed() {
// 当组件被完全销毁之后执行
console.log('destroyed');
},
beforeUpdate() {
// vm.$data.message='2'
// beforeUpdate
// updated
// "2"
// 数据发生改变，还没有重新渲染之前执行
console.log('beforeUpdate');
},
updated() {
// 重新渲染之后
console.log('updated');
},
})
</script>
</body>
</html>
