vue2 computed 如何使用
时间: 2024-01-14 12:20:43 浏览: 25
Vue2中的computed属性用于定义一个计算属性,它会根据依赖的数据进行计算,并返回计算结果。computed属性具有缓存性,只有当依赖的数据发生改变时,才会重新计算。
下面是一个使用computed属性的示例代码:
```html
<div id="demo">
{{ color }}
<button @click="onClick">点击我改变数据</button>
</div>
```
```javascript
new Vue({
el: '#demo',
data: {
foo: 1,
foo1: 3
},
methods: {
onClick() {
this.foo = 5;
}
},
computed: {
color() {
return this.foo + this.foo1;
}
}
});
```
在上面的示例中,我们定义了一个计算属性color,它依赖于data中的foo和foo1。当点击按钮时,调用onClick方法改变foo的值,此时color会重新计算并更新页面上的显示。
相关问题
vue2 computed 使用方法
Vue2中的computed属性可以根据其他属性的值计算出一个新的属性值,并且在依赖的属性值发生变化时自动更新。使用computed属性可以避免在模板中写过多的逻辑代码,使得代码更加简洁易懂。
computed属性的使用方法如下:
1. 在Vue实例中定义computed属性,属性值为一个函数,函数返回计算后的值。
2. 在模板中使用computed属性,直接使用属性名即可。
下面是一个使用computed属性的例子:
```html
<template>
<div>
<p>商品价格:{{ price }}</p>
<p>商品折扣:{{ discount }}</p>
<p>商品实际价格:{{ realPrice }}</p>
</div>
</template>
<script>
export default {
data() {
return {
price: 100,
discountRate: 0.8
}
},
computed: {
discount() {
return this.price * (1 - this.discountRate)
},
realPrice() {
return this.price - this.discount
}
}
}
</script>
```
在上面的例子中,我们定义了一个computed属性discount和realPrice,分别计算商品的折扣和实际价格。在模板中直接使用这两个属性即可。
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就不会被触发重新计算,计算属性的值也不会更新。