vuejs如何知道缓存的计算属性的依赖性？

Question

我有这个Vue.js代码:

new Vue({
  data:{
         myValue:'x',
         myOtherValue:'y'
  },
  computed: {
       myComputed: myFunction(){
          return this['my' + 'Value']
       }
  }
})

正如您所看到的,计算属性将被缓存,并且仅依赖于它data.myValue.我的问题是Vue.js缓存系统如何知道只有在myValue更改后再次运行计算函数？

如果我更改myOtherValue变量,该myComputed函数将使用缓存,并且不会再次运行我将调用它.

我想到了几种可行的方法.但Vuejs如何做到这一点？我读过这篇文章:https://vuejs.org/v2/guide/computed.html但没有找到答案.

在这段代码中会发生什么,它将依赖于什么？

const flag=2
new Vue({
  data:{
         myValue:'x',
         myOtherValue:'y'
  },
  computed: {
       myComputed: myFunction(){
          if (flag==1){
              return this['my' + 'Value']
          }
          else
              return this['my' + 'Other' + 'Value']
       }
  }
})

额外奖励:我将很感激我链接到VueJS代码中的相关功能:https://github.com/vuejs/vue

Answer 1

它是Vue.js的反应系统,而不是缓存系统.

组件中的数据将转换为getter和setter.当您通过getter访问值时,getter会将其添加到依赖项中,当您通过setter修改该值时,setter将通知依赖于该值的每个人.

这是源代码,所有神奇的功能都发生在这个函数中:https://github.com/vuejs/vue/blob/dev/src/core/observer/index.js#L131

Answer 2

我将只解决具体问题vue.js如何知道哪些依赖关系影响哪个计算属性？

简单的答案是每次vue计算一个计算属性时,它会创建一个在该调用范围内访问的所有被动属性的映射.下次任何这些反应性属性发生变化时,它们将触发重新评估计算属性.

如果在计算属性的最新评估期间,从未达到其反应依赖性之一(可能因为它在if/else构造的非行进路径内),则对该反应属性的后续更改将不会触发重新评估计算属性.

通过修改此小提琴中的两个反应属性(通过简单地键入其相应的输入框)来观察此行为.有几点需要注意:

• 在called计算出的属性是基于文档加载一次(它引发的,因为它在模板渲染).
• 因为它path被设置为1将被映射为依赖关系的被动属性val1.因此,它将是唯一一个能够called在其变化时触发重新评估的人.即使它明显存在于函数中,它的值val2也可以改变但不会产生相同的效果called.
• 当您单击"更改路径"按钮时,path将切换1为2.
• 在路径切换之后,请注意,更改val1将called仅影响一次.因为path已经设置为2在最后一次重新评估之前,val1将无法访问并且不会再映射为依赖项called.对其值的后续更改不会触发called从该点开始的重新评估.但是val2现在已被映射为依赖关系,called并且它的变化会触发重新评估,就像它们之前所做的val1那样.直到下一条路径切换2回到1.

这是代码.

let path=1
let count=0
const vm=new Vue({
  el:"#app",
  data:{
         val1:null,
         val2:null,
  },
  computed: {
       called: function(){

            if (path==1){
              this.val1
            }
            if (path==2){
                this.val2
            }
            return "I was just called "+ ++count +" times"
       }
  },
  methods: {
    changePath(){
        path = path==2 ? 1 : 2
    }
  }
})

和相应的模板

<div id="app">
  <input v-model="val1"/> {{val1}}
  <br>
  <input v-model="val2"/> {{val2}}
  <br>
  <button @click="changePath">change path</button>
  <br>
  {{ called }}
</div>