Vue 3 生命周期完整指南(1)

对于使用 组合API 的 Vue3 生命周期钩子，使用setup()方法替换beforecate和created。这意味着，在这些方法中放入的任何代码现在都只在setup方法中。

// 组合AP

import { ref } from ‘vue’

export default {

setup() {

const val = ref(‘hello’)

console.log('Value of val is: ’ + val.value)

return {

val

}

}

}

beforeMount() and onBeforeMount()

在组件DOM实际渲染安装之前调用。在这一步中，根元素还不存在。在选项API中，可以使用this.$els来访问。在组合API中，为了做到这一点，必须在根元素上使用ref。

// 选项 API

export default {

beforeMount() {

console.log(this.$el)

}

}

组合API中使用 ref:

// 组合 API

Hello World

import { ref, onBeforeMount } from ‘vue’

export default {

setup() {

const root = ref(null)

onBeforeMount(() => {

console.log(root.value)

})

return {

root

}

},

beforeMount() {

console.log(this.$el)

}

}

因为app.$el还没有创建，所以输出将是undefined。

mounted() and onMounted()

在组件的第一次渲染后调用，该元素现在可用，允许直接DOM访问

同样，在 选项API中，我们可以使用this.$el来访问我们的DOM，在组合API中，我们需要使用refs来访问Vue生命周期钩子中的DOM。

import { ref, onMounted } from ‘vue’

export default {

setup() { /* 组合 API */

const root = ref(null)

onMounted(() => {

console.log(root.value)

})

return {

root

}

},

mounted() { /* 选项 API */

console.log(this.$el)

}

}

beforeUpdate() and onBeforeUpdate()

数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

beforeUpdate对于跟踪对组件的编辑次数，甚至跟踪创建“撤消”功能的操作很有用。

updated() and onUpdated()

DOM更新后，updated的方法即会调用。

{{val}} | edited {{ count }} times

<button @click=‘val = Math.random(0, 100)’>Click to Change

选项 API 方式：

export default {

data() {

return {

val: 0

}

},

beforeUpdate() {

console.log("beforeUpdate() val: " + this.val)

},

updated() {

console.log("updated() val: " + this.val

}

}

组合API的方式：

import { ref, onBeforeUpdate, onUpdated } from ‘vue’

export default {

setup () {

const count = ref(0)

const val = ref(0)

onBeforeUpdate(() => {

count.value++;

console.log(“beforeUpdate”);

})

onUpdated(() => {

console.log("updated() val: " + val.value)

})

return {

count, val

}

}

}

这些方法很有用，但是对于更多场景，我们需要使用的watch方法检测这些数据更改。 watch 之所以好用，是因为它给出了更改后的数据的旧值和新值。

另一种选择是使用计算属性来基于元素更改状态。

beforeUnmount() 和 onBeforeUnmounted()

在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的。

在 选项 API中，删除事件侦听器的示例如下所示。

// 选项 API

export default {

mounted() {

console.log(‘mount’)

window.addEventListener(‘resize’, this.someMethod);

},

beforeUnmount() {

console.log(‘unmount’)

window.removeEventListener(‘resize’, this.someMethod);

},

methods: {

someMethod() {

// do smth

}

}

}

// 组合API

import { onMounted, onBeforeUnmount } from ‘vue’

export default {

setup () {

const someMethod = () => {

// do smth

}

onMounted(() => {

console.log(‘mount’)

window.addEventListener(‘resize’, someMethod);

})

onBeforeUnmount(() => {

console.log(‘unmount’)

window.removeEventListener(‘resize’, someMethod);

})

}

}

实际操作的一种方法是在Vite，vue-cli或任何支持热重载的开发环境中，更新代码时，某些组件将自行卸载并安装。

unmounted() 和 onUnmounted()

卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。

import { onUnmounted } from ‘vue’

export default {

setup () { /* 组合 API */

onUnmounted(() => {

console.log(‘unmounted’)

})

},

unmounted() { /* 选项 API */

console.log(‘unmounted’)

}

}

activated() and onActivated()

被keep-alive 缓存的组件激活时调用。

例如，如果我们使用keep-alive组件来管理不同的选项卡视图，每次在选项卡之间切换时，当前选项卡将运行这个 activated 钩子。

假设我们使用keep-alive包装器进行以下动态组件。

<span @click=‘tabName = “Tab1”’>Tab 1

<span @click=‘tabName = “Tab2”’>Tab 2

在Tab1.vue组件内部，我们可以像这样访问activated钩子。

Tab 1

deactivated() 和 onDeactivated()

被 keep-alive 缓存的组件停用时调用。

这个钩子在一些用例中很有用，比如当一个特定视图失去焦点时保存用户数据和触发动画。

import { onActivated, onDeactivated } from ‘vue’

export default {

setup() {

onActivated(() => {

console.log(‘Tab 1 Activated’)

})

onDeactivated(() => {

console.log(‘Tab 1 Deactivated’)

})

}

}

现在，当我们在选项卡之间切换时，每个动态组件的状态都将被缓存和保存。

Vue3 调试钩子

Vue3 为我们提供了两个可用于调试目的的钩子。

1. onRenderTracked

2. onRenderTriggered

这两个事件都带有一个debugger event，此事件告诉你哪个操作跟踪了组件以及该操作的目标对象和键。

onRenderTracked

跟踪虚拟 DOM 重新渲染时调用。钩子接收 debugger event 作为参数。此事件告诉你哪个操作跟踪了组件以及该操作的目标对象和键。

Add to cart

Cart({{ cart }})

const app = Vue.createApp({

data() {

return {

cart: 0

}

},

renderTracked({ key, target, type }) {

console.log({ key, target, type })

/* 当组件第一次渲染时，这将被记录下来:

{

key: “cart”,

target: {

cart: 0

},

type: “get”

}

*/

},

methods: {

addToCart() {

this.cart += 1

}

}

})

app.mount(‘#app’)

renderTracked

当虚拟 DOM 重新渲染为 triggered.Similarly 为renderTracked，接收 debugger event 作为参数。此事件告诉你是什么操作触发了重新渲染，以及该操作的目标对象和键。

用法：

css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解

js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

) {

this.cart += 1

}

}

})

app.mount(‘#app’)

renderTracked

当虚拟 DOM 重新渲染为 triggered.Similarly 为renderTracked，接收 debugger event 作为参数。此事件告诉你是什么操作触发了重新渲染，以及该操作的目标对象和键。

用法：

css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解

[外链图片转存中…(img-jibmNJoo-1714155648463)]

js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

[外链图片转存中…(img-VsuIMr6n-1714155648464)]

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】