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
...
到此这篇关于Vue中的computed和watch用法及区别的文章就介绍到这了,更多相关Vue computed和watch内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!