【Vue3】组件实例和生命周期

• 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 () {
 // 仅在渲染整个视图之后运⾏的代码
 })
}