-
app是应用实例，vm是根组件实例
image.png
<div id="app">
<fieldset>
<legend>组件实例</legend>
{{ message }}
<button @click="change">Click</button>
</fieldset>
</div>
<script>
const App = {
data() {
return {
message: 'Hello Vue!!'
}
},
methods: {
change() {
console.log(this)
this.message += '!'
}
},
}
const app = Vue.createApp(App)
console.log(app)
const vm = app.mount('#app')
console.log(vm)
</script>
image.png
生命周期
- mounted: 这时实例已被挂载，数据会出现在页面中，Vue.createApp({}).mount() 被新创建的 vm.$el 替换了；也就是说你可以通过vm.$el获取到根DOM元素；
- beforeUpdate: 数据更新时调用，虽然这时内存中的数据被更新了，但是视图中的数据还没有更新；
问题
1、钩子函数
- beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、
beforeUnmount、unmounted - 与Vue2不同的是beforeDestroy、destroyed变成了beforeUnmount、unmounted
2、如果需要发送Ajax请求，最好放在哪个钩子函数?
发送请求当然越早越好，而最早只能放在created钩子里；因为在created时已经完成以下配置：数据检测、属性和方法的运算，watch和event回调；
3、⽗⼦组件嵌套时，⽗组件视图和⼦组件视图渲染完成谁先谁后？
（注意问的是渲染完成的先后，即在视图中出现的顺序，不是父子组件声明周期执行的顺序啊喂！！！）
- 答：不确定。因为虽然根据父子生命周期执行顺序来看，父组件mounted之前子组件就以mounted完成，但是子组件是在父组件里面的，父组件不出现，子组件也不可能出现，所以它俩谁先谁后并不确定；
4、父子组件的生命周期执行顺序
-
加载渲染过程
父beforeCreate —> 父created —> 父beforeMount —> 子beforeCreate —> 子created —> 子beforeMount —> 子mounted —> 父mounted -
子组件更新过程
父beforeUpdate —> 子beforeUpdate —> 子updated —> 父updated -
父组件更新过程
父beforeUpdate —> 父updated -
销毁过程
父beforeUnmount—> 子beforeUnmount—> 子unmounted—> 父unmounted
可以发现，子组件的生命周期都在父组件beforeXxx和xxxed之间去执行的
5、⽗⼦组件嵌套时，如果希望在所有组件视图都渲染完成后再执⾏操作，该如何做？
mounted() {
this.$nextTick(function () {
// 仅在渲染整个视图之后运⾏的代码
})
}
网友评论