这篇文章主要介绍“Vue中的computed和watch怎么使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vue中的computed和watch怎么使用”文章能帮助大家解决问题。
vue computed 是如何实现的
Vue 的
computed属性实现了一个响应式的计算属性。当计算属性所依赖的响应式变量发生改变时，计算属性会自动重新计算其值。
Vue 在内部通过使用
Object.defineProperty()方法来实现
computed属性。具体地说，Vue 创建一个新的计算属性描述符对象，该对象包含
get和
set方法，然后调用
Object.defineProperty()方法将计算属性绑定到 Vue 实例上。
在
get方法中，Vue 会收集计算属性所依赖的响应式变量，并建立依赖关系图。这样，当响应式变量发生变化时，Vue 就能够知道哪些计算属性需要重新计算。
在
set方法中，Vue 可以执行一些额外的逻辑，例如检查计算属性是否可以被设置。但通常情况下，
set方法是不需要的，因为计算属性是只读的。
总之，Vue 的
computed属性利用了 JavaScript 中的属性描述符和响应式原理，来实现一个方便、高效、易用的计算属性系统。
computed demo
下面是一个简单的 Vue Computed 的实现示例：
// 创建一个 Vue 实例
const vm = new Vue({
data: {
firstName: 'John',
lastName: 'Doe',
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName;
},
},
});
// 访问计算属性
console.log(vm.fullName); // "John Doe"在上述示例中，Vue 实例
vm中定义了一个
data对象和一个
computed对象。在
computed对象中，我们定义了一个名为
fullName的函数，它返回
firstName和
lastName属性的组合。
当我们访问
vm.fullName时，Vue 会自动调用
fullName函数，并将其结果缓存起来。如果后续访问
vm.fullName，而且
firstName或
lastName没有发生变化，Vue 将直接返回之前缓存的结果，而不会重新计算。
这就是 Vue Computed 的基本工作原理。通过定义一个计算属性，你可以轻松地实现数据的计算和缓存。这样做不仅可以提高性能，还可以使代码更加简洁易读。
vue的watch是如何实现的
Vue.js 的
watch是通过使用
Object.defineProperty()函数实现的。当你在 Vue 实例上定义一个
watch时，Vue 会将其作为一个属性添加到实例对象中，并使用
Object.defineProperty()将该属性转换为 getter/setter 形式。这样，当被监控的属性发生变化时，Vue 就会调用对应的回调函数以执行相应的操作。同时，Vue 还提供了深度监听和立即触发回调等
watch demo
以下是一个简单的 Vue 示例，演示如何使用
watch来观察数据的变化：
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
};
},
methods: {
increment() {
this.count++;
},
},
watch: {
count(newVal, oldVal) {
console.log(`count changed from ${oldVal} to ${newVal}`);
},
},
};
</script>该示例定义了一个名为
count的响应式数据，并在模板中显示它。还定义了一个
increment方法，在点击按钮时将计数器递增。此外，还定义了一个
watch选项，以便在数据变化时打印一条消息。
当你在浏览器中运行该示例时，每次点击“Increment”按钮时，Vue 都会检测到
count的值已更改，并且将调用
watch选项中定义的函数。该函数输出将类似于以下内容：
count changed from 0 to 1
count changed from 1 to 2
count changed from 2 to 3
...