我有这个Vue.js代码:

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

如您所见,计算(computed)属性将被缓存,并且它仅依赖于data.myValue.我的问题是如何Vue.js缓存系统知道只有在myValue发生变化时才能再次运行计算函数吗?

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

我想了好几种可能的方法.但Vuej是怎么做到的?

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

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']
       }
  }
})

Bonus:如果我能链接到VueJS代码中的相关函数,我将不胜感激:https://github.com/vuejs/vue

推荐答案

这是Vue的react 系统.js,不是缓存系统.

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

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

Vue.js相关问答推荐

为什么在 Vue2 中调用 this.$emit() 后 props 没有立即更新?

从组件中检索 Shopware CMS 编辑器中的自定义实体数据

Vue 2 如何在全局函数中返回观察者

Nuxt3: 安装vue3-spinner (error: require is not defined in ES module scope)

如何使用 vuejs 在浏览器 url 中获取当前 product.id 的详细信息

Vue3 动态渲染

在 dom 内移动 Vue 组件?

VueJS:如何在组件数据属性中引用 this.$store

在按键 vuejs 中只允许数字和一个小数点后 2 位限制

全局方法和实例方法有什么区别?

如何在 vue 3 脚本设置中的组件上使用 v-model

Vuetify 单选按钮未显示为选中状态

Vuetify 输入自动完成错误

将 Vuetify 从 1.5 升级到 2 时,Sass-loader 错误 'options has an unknown property 'indentedSyntax''

Laravel 中的 VueJS 组件实现中的鼠标悬停

Modal 内部的 Vue.js AJAX 调用

当 v-for 与对象的属性一起使用时,将 v-model 与复选框一起使用

我在 Nuxt 2.14.0 中运行的是什么版本的 Vue?

使用 VueJS 使用 3rd 方库打印元素

mount() 仅在组件 Vue.js 上运行一次