计算属性
计算属性是一个基于响应式依赖进行缓存的属性。当计算属性依赖的响应式依赖发生变化时，计算属性会重新计算，但只在需要时才重新计算。
<template>
<div>
<p>{{ fullName }}</p>
</div>
</template>
<script>
import { reactive, computed } from 'vue';
export default {
setup() {
const state = reactive({
firstName: 'John',
lastName: 'Doe'
});
const fullName = computed(() => {
return `${state.firstName} ${state.lastName}`;
});
return {
state,
fullName
};
}
};
</script>
在上述例子中，fullName 是一个计算属性，它依赖于 state.firstName 和 state.lastName。当其中任何一个发生变化时，fullName 会重新计算。
侦听器
侦听器允许你在响应式数据发生变化时执行自定义的操作。你可以侦听一个或多个响应式对象的变化，并在变化时执行一些逻辑。
<template>
<div>
<p>{{ fullName }}</p>
</div>
</template>
<script>
import { reactive, watch } from 'vue';
export default {
setup() {
const state = reactive({
firstName: 'John',
lastName: 'Doe'
});
let fullName = '';
watch(
() => state.firstName + ' ' + state.lastName,
(newFullName) => {
fullName = newFullName;
}
);
return {
state,
fullName
};
}
};
</script>
在上述例子中，我们使用 watch 函数侦听 state.firstName 和 state.lastName 的变化，当它们变化时，执行回调函数更新 fullName。
watchEffect
watchEffect 是 Vue 3.0 中新增的函数，它接受一个函数作为参数，该函数内部的响应式数据变化时，自动执行。
<template>
<div>
<p>{{ fullName }}</p>
</div>
</template>
<script>
import { reactive, watchEffect } from 'vue';
export default {
setup() {
const state = reactive({
firstName: 'John',
lastName: 'Doe'
});
let fullName = '';
watchEffect(() => {
fullName = `${state.firstName} ${state.lastName}`;
});
return {
state,
fullName
};
}
};
</script>
watchEffect 的回调函数内部会自动追踪响应式数据的变化，无需手动指定依赖。
计算属性、侦听器和 watchEffect 提供了不同的方式来响应数据的变化，并执行相应的逻辑。选择其中一种方式取决于你的需求，以及代码的组织和可读性。
转载请注明出处：http://www.zyzy.cn/article/detail/516/Vue 3.0