computed函数
时间: 2023-11-04 10:01:18 浏览: 46
computed函数是一种在MobX中用于创建可观察的、自动缓存的计算值的机制。它允许你根据依赖的可观察数据来动态计算一个新的值,并且只有在这些依赖发生变化时才重新计算。与普通的方法不同,computed函数的返回值会被缓存起来,只有当依赖的数据发生变化时,才会重新计算该函数的值。
computed函数可以选择定义为只读属性,或者定义为可读写属性(使用get/set方法)。通过使用computed函数,你可以轻松地将复杂的计算逻辑封装在一个函数中,并且当依赖的数据发生变化时自动更新计算结果。然而,需要注意的是,computed函数不支持异步操作,当computed函数内部存在异步操作时,它将失去响应式,并且无法监听数据的变化。
相关问题
computed函数用法
computed函数是Vue.js框架中的一个特性,用于计算和监听响应式数据的变化,并返回计算结果。它可以在Vue实例中定义一个计算属性,这个计算属性会根据依赖的数据动态地计算出一个新的值。
computed函数的用法如下:
1. 在Vue实例的computed选项中定义计算属性,可以是一个函数或者一个对象。
2. 如果是函数形式,函数内部可以通过this关键字访问Vue实例的数据,然后根据需要进行计算并返回结果。
3. 如果是对象形式,对象的每个属性都是一个计算属性,属性名是计算属性的名称,属性值是一个函数,函数内部同样可以通过this关键字访问Vue实例的数据,并返回计算结果。
4. 计算属性会根据依赖的数据进行缓存,只有当依赖的数据发生变化时,才会重新计算计算属性的值。
5. 在模板中可以直接使用计算属性的名称来获取计算结果,而不需要在模板中写复杂的逻辑。
下面是一个示例代码:
```
<template>
<div>
<p>原始数据:{{ num }}</p>
<p>计算属性:{{ doubleNum }}</p>
</div>
</template>
<script>
export default {
data() {
return {
num: 10
};
},
computed: {
doubleNum() {
return this.num * 2;
}
}
};
</script>
```
在上面的示例中,num是一个响应式数据,doubleNum是一个计算属性,它的值是num的两倍。当num发生变化时,doubleNum会自动重新计算并更新。
vue2computed函数使用
computed函数是Vue.js中的一个特殊属性,用于定义计算属性。计算属性是基于其他数据属性计算得出的属性,它的值是根据一定的逻辑计算得出的,而不是直接从数据属性中取得的。computed函数可以接收一个对象作为参数,对象中的每个属性都是对应的计算属性的定义。
在Vue.js中,当计算属性第一次被访问时,Vue会调用计算属性的getter函数来计算属性的值,并将计算属性的依赖关系与当前的Watcher进行绑定。当计算属性依赖的数据发生变化时,Vue会调用相关的Watcher来更新计算属性的值。
在计算属性的定义中,我们可以使用this关键字来访问组件的数据属性和其他计算属性。当计算属性依赖的数据属性发生改变时,计算属性会重新计算得到新的值。
回到你的问题,当调用computed函数时,会执行Watcher.evaluate()方法,该方法会去调用相关computed定义的方法,并将该方法与computed的Watcher绑定。在调用computed方法时,如果该方法内部依赖了data中的属性,会通过调用get()方法的depend()函数将data的Dep和computed的Watcher绑定。这样就确保了当data的属性发生变化时,computed的Watcher会重新计算。
至于你提到的watcher.depend(),它的作用是在computed属性第一次计算时,主动去绑定computed的Watcher依赖的其他Watcher。这样,当其他Watcher发生变化时,computed的Watcher也会被触发重新计算。
如果我们删去watcher.depend()这段代码,当其他Watcher发生变化时,computed的Watcher就不会被触发重新计算,计算属性的值也不会更新。