前言
本系列将从零开始,系统性地介绍 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>
- 监视多个数据源
<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>
- 监视 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 项目中更有效地管理和响应数据变化。