复制以下代码试验下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一个例子搞懂Vue实例的生命周期</title>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<input type="text" v-model="message" >
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// Vue 实例可以通过 $el 属性访问挂载的节点对象
// 在 Vue 一般情况下我们都是通过指令来操作 DOM
// 有时候我们也需要在实例的生命周期中操作 DOM
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {},
// create mount update destroy
// cmud
// crud 增删改查 Create、Read、Update、Delete
// 所有钩子都没有参数
// 所有钩子中的 this 都是实例本身
// 所有情况下我们在生命周期钩子函数中需要使用 Vue 实例 this,所以千万不要把钩子函数写成箭头函数!!!
// 一上来就调用(只调用一次):
// beforeCreate
// 在这个阶段无法获取 data、methods、computed 等数据成员
// created
// 最早能放到到 data、methods 等数据成员的钩子函数
// 所以我们建议把http请求都写到这个钩子函数中
// 做一些和数据相关的操作
// beforeMount
// 在这里是第一次可以获取到DOM模板的生命周期
// 这里拿到的模板还没有被 Vue 解析替换
// mounted
// 实例已完成挂载(第一次的解析替换),模板中的数据已完成渲染
// beforeUpdate
// 然后当数据每次改变的时候(循环往复调用):
// 数据改变之后,模板解析替换之前,这里的模板还没有完成视图更新
// updated
// 然后当数据每次改变的时候(循环往复调用):
// 数据改变之后,模板解析替换已完成,已经是数据更新之后的最新模板视图了
// 然后当实例销毁的时候:
// beforeDestroy
// destroyed
// 实例销毁之后做一些收尾工作,例如清除在实例运行期间开启的定时器
beforeCreate () {
console.log('============ beforeCreate =============')
console.log('message --- ', this.message) // message --- undefined
console.log('el --- ', this.$el) // el --- undefined
console.log('')
},
created () {
console.log('============ created =============')
console.log('message --- ', this.message) // message --- Hello Vue.js!
console.log('el --- ', this.$el) // el --- undefined
console.log('')
},
beforeMount () {
console.log('============ beforeMount =============')
console.log('message --- ', this.message) // message --- Hello Vue.js!
console.log('el --- ', this.$el.innerHTML) // el --- <h1>{{ message }}</h1> <input type="text" v-model="message">
console.log('')
},
mounted () {
console.log('============ mounted =============')
console.log('message --- ', this.message) // message --- Hello Vue.js!
console.log('el --- ', this.$el.innerHTML) // el --- <h1>Hello Vue.js!</h1> <input type="text">
console.log('')
},
beforeUpdate () {
console.log('============ beforeUpdate =============')
console.log('message --- ', this.message)
console.log('el --- ', this.$el.innerHTML)
console.log('')
},
updated () {
console.log('============ updated =============')
console.log('message --- ', this.message)
console.log('el --- ', this.$el.innerHTML)
console.log('')
},
// activated () {
// console.log('============ activated =============')
// },
// deactivated () {
// console.log('============ deactivated =============')
// },
beforeDestroy () {
console.log('============ beforeDestroy =============')
console.log('message --- ', this.message)
console.log('')
},
destroyed () {
console.log('============ destroyed =============')
console.log('message --- ', this.message)
console.log('')
},
errorCaptured () {
console.log('============ errorCaptured =============')
}
})
</script>
</body>
</html>
注意,在此刻还应当知晓vue 父子组件的生命周期顺序