Vue——实例中的钩子函数

[code]<script>
new Vue({
el:'#app',
data:{
value:true
},
template:`
<div class='app'>
<Switcher v-model="value" />
<Switcher v-model="value" />
{{value}}
<button @click='value=!value'>开关切换</button>
</div>
`,
beforeCreate() {
// 实例或组件 要开始被创建了
// 还没创建好之前 是不能使用实例中的任何成员的
// 针对要去做ajax 请求的组件可以预先在beforeCreate 提前ajax请求
console.log('创建之前',this.value);
},
created() {
// 实例或组件 已经被创建好了
// created 里面是可以访问到当前实例的任何成员的
// 可以初始化一些data数据 （检测数据或者初始化数据）
console.log('创建',this.value);
},
beforeMount() {
// 开始挂载元素（挂载元素之前）
// 没挂载好之前，是拿不到组件里的dom
// 如果想要获取组件挂载之前的一些东西，在beforeMount里可以操作
console.log('挂载之前',this.value)
},
mounted() {
// 主要是在这个过程之后我们在去获取组件的dom元素是最保险的
console.log('挂载',this.value)
},
beforeUpdate() {
// 要让beforeUpdate 和 updated 这两个钩子触发 必须是模板发生了变化才会触发
// 模板更新之前
console.log('更新之前',this.value)
},
updated() {
// 要让beforeUpdate 和 updated 这两个钩子触发 必须是模板发生了变化才会触发
// 模板更新之前
console.log("更新",this.value)
},
})
</script>