vue2生命周期
描述Vue2实例的生命周期，解释生命周期图
Vue实例的生命周期指的是从创建、初始化、挂载、更新到销毁的整个过程。每个阶段都有相应的生命周期钩子函数，可以让开发者在不同的阶段执行自定义的逻辑。Vue2的生命周期主要包括以下几个阶段和对应的钩子函数：
- 创建前/后:
beforeCreate: 在实例初始化之后、数据观测(data observer)和事件/侦听器配置之前被调用。created: 在实例创建完成后被立即调用。在这一步，实例已完成数据观测、属性和方法的运算，watch/event事件回调已设置，但是挂载阶段还没开始，$el属性目前尚不可用。
- 挂载前/后:
beforeMount: 在挂载开始之前被调用，相关的render函数首次被调用。mounted: 在实例被挂载后调用。此时，创建的Vue实例的$el已替换成了DOM元素，可以进行DOM操作或依赖DOM的操作。
- 更新前/后:
beforeUpdate: 在数据更新时调用，发生在虚拟DOM打补丁前。updated: 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。当这个钩子被调用时，组件DOM已经更新，因此你现在可以执行依赖于DOM的操作。
- 销毁前/后:
beforeDestroy: 在实例销毁之前调用。在这一步，实例仍然完全可用，可以在这个钩子中进行清理操作，如取消事件监听或定时器。destroyed: 在实例销毁之后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
生命周期图提供了一个视觉化的方式来理解这些阶段和钩子函数。显示了实例从创建到销毁的整个流程，以及在这个过程中可以利用的钩子函数。
生命周期图包括两条路径：一条是从创建到挂载的路径，另一条是从更新到销毁的路径。
Vue实例的生命周期及其钩子函数对编写可靠和高效的Vue应用至关重要。可以利用这些钩子函数在不同阶段管理资源、注册和移除事件监听器、执行异步操作，以及执行其他在特定时机需要进行的操作。
为什么在 created 钩子中没有办法访问DOM，而在 mounted 钩子中可以
在Vue生命周期中，created 钩子是在实例创建完成之后就被调用的，此时的数据观测和事件/侦听器的配置都已经完成，但是DOM挂载还没有开始。因此，此时的Vue实例还没有和DOM建立关联，$el 属性尚未存在，也就无法访问或操作DOM。
created 钩子适合进行如下操作：
- 初始化非响应式的属性。
- 配置事件监听器。
- 在服务端渲染期间，因为没有DOM环境，通常在此阶段进行数据的获取。
在 mounted 钩子被调用时，Vue实例的模板已经被新创建的 vm.$el 替换，并且挂载到实例上去了，也就是说，挂载阶段已经完成，组件对应的DOM已经插入到文档中。因此，在 mounted 钩子中，你可以访问和操作DOM节点。
mounted 钩子适合进行如下操作：
- 直接的DOM操作。
- 依赖于DOM的操作，如使用第三方库来初始化DOM元素（比如jQuery插件）。
总结来说，created 钩子执行时，组件的模板还没有渲染成真实的DOM，因此无法访问DOM。而在 mounted 钩子执行时，组件已经挂载到DOM上，因此可以访问和操作DOM。在实际开发中，根据需要访问DOM的时机，你可以选择在 created 还是 mounted 钩子中执行相应的操作。
在哪个生命周期钩子中进行异步操作最合适，比如Ajax请求。
在Vue 2中，进行异步操作，如Ajax请求，最合适的生命周期钩子通常是 created 和 mounted。选择哪一个取决于你的特定需求和情况。
- 在
created钩子中进行异步操作:created钩子在实例创建完成后立即被调用，此时已经完成了数据观测、属性和方法的计算，以及事件监听器的设置，但是DOM渲染还未开始，因此$el属性不可用。- 如果你不需要等待DOM就可以进行的异步操作，如数据请求，可以在
created中进行。这样可以尽早获取数据，有时可以减少页面加载时间和白屏时间。 - 对于服务端渲染（SSR），
created钩子是唯一能够同步调用的钩子，因为没有DOM环境，所以这是一个进行服务器端数据预取的好地方。
- 在
mounted钩子中进行异步操作:mounted钩子在实例挂载到DOM后被调用，此时可以访问到真实的DOM元素。- 如果你的异步操作需要依赖DOM，或者你想在DOM渲染完毕后立即操作DOM（比如基于DOM的库初始化），那么
mounted是一个合适的地方。 - 需要注意的是，如果有服务器端渲染，
mounted钩子只会在客户端执行。
在某些情况下，如果你想要在视图更新以反映获取的数据之前就进行异步操作，那么在 created 钩子中进行可能更适合，因为它可以更快地获取数据并更新实例的状态。如果异步操作需要与DOM交互或修改DOM，那么 mounted 是更好的选择。
另外，如果需要在组件每次数据更新时都进行异步操作，可以考虑使用 watch 属性来观察数据的变化，或者使用 updated 生命周期钩子，但要注意避免在 updated 钩子中直接修改状态，因为这可能会导致无限循环的更新。
无论在哪个生命周期钩子中进行异步操作，都应当处理好异步操作可能带来的问题，比如内存泄漏。如果组件在异步操作完成之前就被销毁了，应当在 beforeDestroy 钩子中取消任何还在进行中的异步请求，以避免更新已经不存在的组件状态。
当有子组件时，父子组件的生命周期钩子是如何被调用的
当有父子组件时，它们的生命周期钩子调用顺序遵循一定的规则，以确保父组件和子组件能够按照期望的方式初始化和销毁。下面是父子组件生命周期钩子的调用顺序：
挂载阶段（Mounting）：
- 父组件
beforeCreate - 父组件
created - 父组件
beforeMount - 子组件
beforeCreate - 子组件
created - 子组件
beforeMount - 子组件
mounted - 父组件
mounted
在挂载阶段，父组件的 beforeCreate 和 created 钩子首先被调用，因为需要先设置父组件的状态，然后才能确定子组件的初始状态。然后，当父组件开始挂载到DOM时，其 beforeMount 钩子被调用。接下来，Vue会递归地处理所有子组件，重复上述过程：先是子组件的 beforeCreate 和 created 钩子，然后是 beforeMount 和 mounted 钩子。最后，一旦所有子组件都挂载完成，父组件的 mounted 钩子被调用。
更新阶段（Updating）：
- 父组件
beforeUpdate - 子组件
beforeUpdate - 子组件
updated - 父组件
updated
在更新阶段，如果父组件或子组件中的响应式数据发生变化，将触发更新。父组件的 beforeUpdate 钩子首先被调用，然后是子组件的 beforeUpdate。更新发生后，子组件的 updated 钩子首先被调用，最后是父组件的 updated 钩子。
销毁阶段（Destruction）：
- 父组件
beforeDestroy - 子组件
beforeDestroy - 子组件
destroyed - 父组件
destroyed
在销毁阶段，当开始销毁父组件时，其 beforeDestroy 钩子首先被调用。然后，Vue会递归地销毁所有子组件，子组件的 beforeDestroy 和 destroyed 钩子按顺序调用。一旦所有子组件都被销毁，父组件的 destroyed 钩子最后被调用。
理解这些生命周期钩子的调用顺序对于管理组件初始化、渲染和销毁过程中的逻辑非常重要。尤其是在处理全局事件监听器、定时器、外部库的集成以及需要清理的资源时，这些钩子提供了合适的时机进行设置和清理。
vue2生命周期钩子中 this 关键字如何正确引用Vue实例的
在Vue 2中，每个组件实例都有一个与之关联的Vue实例。当你定义组件时，你通常会使用一个对象字面量来定义数据、方法、计算属性等。在这个对象字面量中定义的函数（包括生命周期钩子）被Vue自动处理，以确保在这些函数被调用时，this 关键字绑定到正确的Vue实例。
这种自动绑定的行为是因为Vue内部在调用这些函数时使用了类似Function.prototype.call或Function.prototype.apply的方法，将this明确地指向了组件的实例。
例如，当Vue实例的created生命周期钩子被调用时，Vue内部会确保在调用该函数时将this设置为当前组件实例：
new Vue({
data() {
return {
message: 'Hello, Vue!'
};
},
created() {
// 这里的 `this` 指向了Vue实例
console.log(this.message); // 正确输出 'Hello, Vue!'
}
});
在这个例子中，created函数中的this指向的是Vue实例，因此可以访问data函数返回的对象中的message属性。
但是，如果你使用箭头函数定义生命周期钩子，那么this的值将不会指向Vue实例。这是因为箭头函数不绑定自己的this，它们会捕获定义时所在上下文的this值：
new Vue({
data() {
return {
message: 'Hello, Vue!'
};
},
created: () => {
// 错误！这里的 `this` 并不指向Vue实例，而是指向全局对象或者箭头函数定义时的上下文
console.log(this.message); // 可能输出 undefined 或者报错
}
});
在这个错误的例子中，由于created使用了箭头函数，this将不会指向Vue实例，而是指向了定义时所在的上下文（可能是全局上下文或包含该组件的父级上下文）。这会导致this.message不能正确访问到组件的数据属性message。
因此，为了确保this能够在生命周期钩子中正确引用Vue实例，你应该避免使用箭头函数来定义这些钩子。如果你需要在生命周期钩子中使用一个函数，但希望this指向其他上下文，你可以在外部定义该函数，并在钩子中调用它，或者使用.bind()方法来显式地设置this的值。
watch 和 computed 属性与生命周期钩子的关系和区别
watch 和 computed 属性是 Vue 实例的两个不同的响应式特性，它们与生命周期钩子有着密切但不同的关系。
computed 属性：
computed属性是基于它们的依赖进行缓存的计算属性。只有当它们依赖的响应式数据发生变化时，它们才会重新计算。computed属性在第一次被访问时会进行计算，并在其依赖的数据没有发生变化时返回缓存的值，减少不必要的计算开销。computed属性通常用于声明式地表示派生状态，例如，根据现有数据计算一个值。computed属性在Vue实例的beforeCreate和created生命周期钩子之间被初始化。
watch 属性：
watch属性用于观察 Vue 实例上的数据变动，并在数据变化时执行一些操作。它们通常用于执行异步操作或开销较大的操作，响应数据的变化。watch属性提供了一个回调函数，当被监听的数据变化时，这个函数会被调用。watch属性也是响应式的，但它们不会缓存结果，而是每次在侦听的数据变化时执行回调。watch属性在Vue实例的created钩子之后被设置，因此无法在beforeCreate钩子中访问。
生命周期钩子：
- 生命周期钩子是在Vue组件的不同阶段执行的函数，它们提供了在特定时刻执行代码的能力。
- 生命周期钩子包括
beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy, 和destroyed等。 - 生命周期钩子可以用来执行任何类型的代码，但它们通常用于执行非响应式的操作，如设置事件监听器、发送Ajax请求、直接操作DOM等。
关系和区别：
computed和watch是响应式系统的一部分，它们依赖于Vue的响应式数据。生命周期钩子则是组件的生命周期过程中的特定时刻。computed属性在组件的数据变化时自动更新，而watch属性需要显式地声明要观察的数据和当数据变化时要执行的操作。- 生命周期钩子不是响应式的，它们不会自动响应数据的变化。相反，它们在特定的时刻执行，与Vue实例的创建、更新、销毁等事件相关联。
computed属性适用于计算值，watch属性适用于观察数据变化并执行操作，而生命周期钩子适用于在组件的不同阶段执行代码。
理解这些特性之间的关系和区别对于编写高效且响应式的Vue应用非常重要。它们各自有不同的用例和优势，应根据具体的应用场景选择合适的特性来使用。
原文链接：https://juejin.cn/post/7359084330121297932 作者：biye君
