计算属性（Computed Properties）：
计算属性是基于响应式数据计算而来的属性，它们会缓存计算结果，只有在依赖的响应式数据发生变化时才重新计算。在 Vue.js 3.0 中，使用 computed 函数来定义计算属性。
<template>
<div>
<p>{{ fullName }}</p>
</div>
</template>
<script>
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe'
};
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
}
};
</script>
侦听器（Watchers）：
侦听器允许你在响应式数据变化时执行自定义的异步操作。在 Vue.js 3.0 中，使用 watch 函数来设置侦听器。
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
userInput: ''
};
},
watch: {
userInput(newValue, oldValue) {
console.log('Input changed:', newValue);
this.message = 'Input changed: ' + newValue;
}
}
};
</script>
侦听多个属性：
你可以使用数组或对象形式来侦听多个属性。
<template>
<div>
<p>{{ fullName }}</p>
</div>
</template>
<script>
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe'
};
},
watch: {
firstName: {
handler(newValue, oldValue) {
console.log('First name changed:', newValue);
// Do something...
},
immediate: true // 立即执行一次
},
lastName(newValue, oldValue) {
console.log('Last name changed:', newValue);
// Do something...
}
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
}
};
</script>
在上述示例中，watch 侦听了 firstName 和 lastName 两个属性的变化，并执行了相应的操作。immediate: true 选项表示在组件初始化时立即执行一次侦听器。
使用计算属性和侦听器能够使你更灵活地处理响应式数据的变化，并执行相应的逻辑。在编写组件时，选择使用计算属性还是侦听器，取决于你的具体需求。
转载请注明出处：http://www.zyzy.cn/article/detail/484/Vue 3.0