vuejs computed 是如何知道依赖的属性的

Question

众所周知，vuejs当firstName 或者lastName 更新的时候，fullName 视图会更新，问题来了，他怎么知道我方法内依赖了哪些变量

<template>
   <div class="header">
         {{fullName}}
   </div>
</template>
<script>
  export default {
    name: "test",
    data(){
      return{
        firstName:'',
        lastName:''
      }
    },
    computed:{
      //当firstName和lastName
      fullName(){
        return this.firstName+this.lastName
      }
    }
  }
</script>

Answer 1

结合GPT给出回答如下请题主参考
Vue.js 中的计算属性 computed 是根据它依赖的属性值自动更新的。当依赖的属性值发生变化时，computed 所依赖的属性就会重新计算，并更新视图。

在计算属性中，Vue.js 内部使用 Object.defineProperty()方法来实现响应式，通过 getter 和 setter 监听属性值的变化。

例如，我们有如下的 Vue 实例：

new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

当我们访问 fullName 属性时，computed 的 getter 函数会被调用，此时 this.firstName 和 this.lastName 被记录为 fullName 的依赖属性，这样当 firstName 或者 lastName 发生变化时，Vue.js 会自动触发 computed 的 setter 函数来重新计算 fullName 的值。

如果我们在 fullName 的计算函数中引用了其他属性，则这些属性也会被自动监测，从而形成计算属性之间的依赖关系。

例如，我们将上面的例子再加入一个计算属性：

new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    },
    helloMsg: function () {
      return 'Hello, ' + this.fullName
    }
  }
})

此时，如果 firstName 或者 lastName 发生变化，会重新计算 fullName 的值并更新视图；如果 fullName 变化，则会重新计算 helloMsg 的值并更新视图。这样就形成了计算属性之间的依赖关系。

总之，computed 依赖的属性会被自动监测，在计算属性中引用的属性会自动形成依赖关系，并且当依赖的属性值发生变化时，computed 会自动更新。