vue2computed函数使用
时间: 2023-11-16 14:52:41 浏览: 104
Vue computed计算属性的使用方法
5星 · 资源好评率100%
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就不会被触发重新计算,计算属性的值也不会更新。
阅读全文