简单理解+原理理解+举例分析

Vue3中this的指向？

简单的把setup 理解为 created 进行使用”，setup里访问不了this

Vue的生命周期到底是什么？

每个Vue都是自己的一个vm的实例对象，经过初始化。从创建编译template，将实例对象挂载到DOM，最后在数据更改的期间更新DOM,这个过程被称为Vue实例的生命周期。在默认情况下，当我们经历创建和更新DOM的过程中，会在其中运行一些函数，在这些函数内部创建并且生命Vue组件，这些函数称为生命周期钩子

Vue生命周期的执行顺序？

1.首先是beforeCreate创建前是没有数据的

2.crete这个时候还没有虚拟DOM挂载到真实DOM上，有data准备好了，但是还没有查找虚拟DOM

3.beforeMount挂载DOM前调用，此刻去找到虚拟DOM，data数据已经准备好了，还是挂载真实DOM在下一步

4.Mount挂载真实DOM，此刻我们可以获取到DOM节点，$ref可以访问

5.beforeUpdata 响应式数据更新的时候会被调用，beforeupdate的阶段虚拟Dom还没更新，所以在此时依旧可以访问现有的Dom。

6.Updata更新后，此时补丁已经打完了，Dom已经更新完毕，可以执行一些依赖新Dom的操作。

7.beforeDestroy销毁前

8.destroyed销毁后都是离开组件才会被调用生命周期

我们在请求中放在哪个生命周期会更合适？

create和mounted都可以：

在请求性能更快的话选择mounted更好， 因为created这个时候还没有虚拟DOM挂载到真实DOM上，有data准备好了，但是还没有查找虚拟DOM Mount挂载真实DOM，此刻我们可以获取到DOM节点，$ref可以访问

总结：mounted在生命周期钩子来说比create要快先一步的

Vue的父组件和子组件生命周期钩子函数执行顺序？

例子：

父组件绑定一个click方法，在methond方法里面绑定click这个方法，并且给这个绑定的方法绑定在页面中，当我点击这个方法时候修改绑定在页面的值，绑定的下面还有一个销毁的click事件，就会销毁绑定页面的值 并且父组件继承了子组件，子组件和父组件的功能一样。

1.加载渲染过程

先执行父beforeCreate()->父create()->父beforeMount()->子beforeCreate()->子create()->子beforeMount()->子mount()->父mount()

2.父组件更新的过程

父beforeUpdate()->父Update()

3.子组件更新过程

子beforeUpdate()->子beforeUpdate()->子Updated()->父Update()

4.父组件销毁的过程

父beforeDestroy()->子beforeDestroy->子destroyed()->父destroyed()

5.子组件销毁过程

子beforeDestroy() -> 子destroy()

总结：

子的生命周期都会被先结束，父的才结束。先由父到子，再从子到父。 总的来说，从创建到挂载，是从外到内，再从内到外