羽毛球赛事奖金_昆明百度seo排名优化_广东seo网站设计_泰安seo

前言

本系列将从零开始，系统性地介绍 Vue 3 的常用 API，逐步深入每个核心概念与功能模块。通过详尽的讲解与实战演示，帮助大家掌握 Vue 3 的基础与进阶知识，最终具备独立搭建完整 Vue 3 项目的能力。

computed ：

在 Vue 3 中，computed 计算属性的使用与 Vue 2 相比有一些变化，主要体现在 API 风格和内部机制的改进。以下是它们之间的区别以及如何在 Vue 3 中使用 computed。

Vue 2 中 computed 的使用

在 Vue 2 中，computed 是直接在组件选项对象（Options API）中定义的。

export default {data() {return {number: 0};},computed: {doubleNumber() {return this.number * 2;}},methods: {increment() {this.number++;}}
};

Vue 3 中 computed 的使用

Vue 3 引入了组合式 API（Composition API），并且通过 setup 函数和 computed 函数实现计算属性。虽然 Vue 3 中仍然支持 Vue 2 的 Options API，但 Composition API 提供了更灵活和模块化的方式来组织代码。

import { ref, computed } from 'vue';export default {setup() {const number = ref(0);// 定义计算属性const doubleNumber = computed(() => number.value * 2);const increment = () => {number.value++;};return {number,doubleNumber,increment};}
};

区别：

PI 风格：

• Vue 2：在 Options API 中使用 computed，直接通过选项对象定义。
  Vue 3：通过 setup 函数与组合式 API 来定义，使用 computed 函数显得更加灵活，且与 ref 和 reactive 等组合式 API 更好地结合。
• computed 函数返回的是一个响应式对象：
  在 Vue 3 中，computed 返回的是一个具有 .value 属性的响应式对象，而不是直接的值。这是因为 Vue 3 引入了对 ref 和响应式对象的广泛支持。
• 支持 Getter 和 Setter：
  Vue 2：如果你需要计算属性既有 getter 又有 setter，需要通过 set 手动定义。
  Vue 3：在 computed 函数中可以更方便地定义带有 getter 和 setter 的计算属性。

Vue 3 中的 computed 使用示例

只读：

import { ref, computed } from 'vue';export default {setup() {const number = ref(0);const doubleNumber = computed(() => number.value * 2);return { number, doubleNumber };}
};

可写：

import { ref, computed } from 'vue';export default {setup() {const number = ref(0);// 带 getter 和 setter 的计算属性const doubleNumber = computed({get: () => number.value * 2,set: (value) => {number.value = value / 2;}});return { number, doubleNumber };}
};

watch :

在 Vue 3 中，watch 函数用于观察并响应某个状态（如 ref、reactive 对象或计算属性）的变化。每当被观察的状态发生变化时，watch 会执行回调函数，从而允许你在数据变化时执行特定的逻辑。

基本用法

1 .监听一个ref

<script>
import { ref, watch } from 'vue';export default {setup() {const count = ref(0);// 监视 count 变化//newValue新值，oldValue老值watch(count, (newValue, oldValue) => {console.log(`Count changed from ${oldValue} to ${newValue}`);});const increment = () => {count.value++;};return { count, increment };}
};
</script>

2. 监视多个数据源

<script>
import { ref, watch } from 'vue';export default {setup() {const firstName = ref('John');const lastName = ref('Doe');// 监视 firstName 和 lastName 变化watch([firstName, lastName], ([newFirstName, newLastName], [oldFirstName, oldLastName]) => {console.log(`First name changed from ${oldFirstName} to ${newFirstName}`);console.log(`Last name changed from ${oldLastName} to ${newLastName}`);});return { firstName, lastName };}
};
</script>

3. 监视 reactive 对象的属性

<script>
import { reactive, watch } from 'vue';export default {setup() {const user = reactive({firstName: 'John',lastName: 'Doe'});// 监视 reactive 对象的某个属性watch(() => user.firstName, (newValue, oldValue) => {console.log(`First name changed from ${oldValue} to ${newValue}`);});return { user };}
};
</script>

4.深度监视（deep 选项）

<script>
import { reactive, watch } from 'vue';export default {setup() {const user = reactive({name: {first: 'John',last: 'Doe'},age: 30});// 深度监视整个对象watch(user, (newValue, oldValue) => {console.log('User object changed', newValue);}, { deep: true });return { user };}
};
</script>

立即执行（immediate 选项）
可以使用 immediate: true 选项，使得 watch 在初始化时立即执行一次。

<script>
import { ref, watch } from 'vue';export default {setup() {const count = ref(0);// 立即执行 watch 回调watch(count, (newValue, oldValue) => {console.log(`Count changed from ${oldValue} to ${newValue}`);}, { immediate: true });return { count };}
};
</script>

总结

Vue 3 中的 computed 和 watch 提供了强大而灵活的工具来处理复杂的状态管理需求，适用于从简单到复杂的各种应用场景。通过掌握它们，你可以在 Vue 3 项目中更有效地管理和响应数据变化。

ps:以上内容仅为本人对 vue3生命周期的个人理解，如有不足之处，欢迎大家指正与交流，共同进步。