vue生命周期的传统写法和setup语法糖写法

🙂博主：小猫娃来啦
🙂文章核心：vue生命周期的传统写法和setup语法糖写法

setup语法糖设计目的

<script setup> 语法糖的设计目标是简化组件编写，将逻辑和生命周期函数整合到一个地方。它使用了基于编译时静态分析的方式，通过识别函数调用来确定逻辑的执行时机。

Vue2 与Vue3的生命周期对比

Vue2	Vue3
beforeCreate(组件创建之前)	setup(组件创建之前)
created(组件创建完成)	setup(组件创建完成)
beforeMount(组件挂载之前)	onBeforeMount(组件挂载之前)
mounted(组件挂载完成)	onMounted(组件挂载完成)
beforeUpdate(数据更新，虚拟DOM打补丁之前)	onBeforeUpdate(数据更新，虚拟DOM打补丁之前)
updated(数据更新，虚拟DOM渲染完成)	onUpdated(数据更新，虚拟DOM渲染完成)
beforeDestroy(组件销毁之前)	onBeforeUnmount(组件销毁之前)
destroyed(组件销毁之后)	onUnmounted(组件销毁之后)

vue3钩子函数

常见的就8个：

beforeCreate: 组件实例被创建之前调用，此时组件的 data 和 methods 等属性都还未初始化。
created: 组件实例已经创建完成后调用，可以访问组件的 data 和 methods 属性。
beforeMount: 组件挂载前调用，此时模板编译已完成，但尚未将其挂载到页面上。
mounted: 组件挂载后调用，此时组件已在页面上渲染出来。
beforeUpdate: 数据更新前调用，可用于在数据更新之前获取更新前的状态。
updated: 数据更新后调用，可用于操作 DOM 或执行其他的更新操作。
beforeUnmount: 组件销毁前调用，可以在这里进行一些清理操作，比如清除定时器等。
unmounted: 组件销毁后调用，此时组件已完全被销毁，所有的事件监听和子组件都已被移除。
.
在 Vue 3 中，由于引入了 Composition API，一些生命周期钩子函数的名称发生了改变，并且在使用 <script setup> 语法糖时，不再直接使用这些钩子函数，而是使用Composition API 提供的函数来实现类似的功能。

以下是 Vue 3 中常用的生命周期钩子函数及其对应的 Composition API 函数：

beforeCreate: 在 Vue 3 中，可以使用 setup 函数中的代码来替代 beforeCreate 钩子函数。

created: 在 Vue 3 中，可以使用 setup 函数中的代码来替代 created 钩子函数。

beforeMount: 在 Vue 3 中，可以使用 onBeforeMount 函数来替代 beforeMount 钩子函数。

mounted: 在 Vue 3 中，可以使用 onMounted 函数来替代 mounted 钩子函数。

beforeUpdate: 在 Vue 3 中，可以使用 onBeforeUpdate 函数来替代 beforeUpdate 钩子函数。

updated: 在 Vue 3 中，可以使用 onUpdated 函数来替代 updated 钩子函数。

beforeUnmount: 在 Vue 3 中，可以使用 onBeforeUnmount 函数来替代 beforeUnmount
钩子函数。

unmounted: 在 Vue 3 中，可以使用 onUnmounted 函数来替代 unmounted 钩子函数。

---

beforeCreated和created被封装

beforeCreate 和 created 这两个钩子函数在 Vue 3 中被封装进了 <script setup> 语法糖中。原因是为了简化代码和提高可读性。

在 Vue 2 中，我们需要显式地编写 beforeCreate 和 created 钩子函数来处理相关的逻辑。这两个钩子函数分别在组件实例被创建之前和创建之后执行。

而在 Vue 3 中，通过使用 <script setup> 语法糖，不再需要显式地定义这两个钩子函数。相反，我们可以在 setup 函数中设置数据、方法和其他逻辑，这些逻辑会在组件创建之前和创建之后自动执行。

使用

---

传统写法和语法糖写法的对比

• beforeCreate 和 created
  传统写法：

<script>
export default {
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  }
};
</script>

<script setup> 语法糖合并了这两个hook

<script setup>


</script>

---

• beforeMount 和 mounted
  传统写法：

<script>
export default {
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  }
};
</script>

使用 <script setup> 和 Composition API 函数：

<script setup>
import { onBeforeMount, onMounted } from 'vue';

onBeforeMount(() => {
  console.log('beforeMount');
});

onMounted(() => {
  console.log('mounted');
});
</script>

---

• beforeUpdate 和 updated
  传统写法：

<script>
export default {
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  }
};
</script>

使用 <script setup> 和 Composition API 函数：

<script setup>
import { onBeforeUpdate, onUpdated } from 'vue';

onBeforeUpdate(() => {
  console.log('beforeUpdate');
});

onUpdated(() => {
  console.log('updated');
});
</script>

---

• beforeUnmount 和 unmounted
  传统写法：

<script>
export default {
  beforeUnmount() {
    console.log('beforeUnmount');
  },
  unmounted() {
    console.log('unmounted');
  }
};
</script>

使用 <script setup> 和 Composition API 函数：

<script setup>
import { onBeforeUnmount, onUnmounted } from 'vue';

onBeforeUnmount(() => {
  console.log('beforeUnmount');
});

onUnmounted(() => {
  console.log('unmounted');
});
</script>

---