vue3computed函数

引用中提到的是Vue3中使用computed的例子。在Vue3中，我们使用`computed`函数来定义计算属性。计算属性允许我们基于其他属性的值进行计算，并且会根据这些依赖的属性的变化自动更新。

在上述代码中，我们可以看到如何在Vue3中使用`computed`函数。首先，我们使用`reactive`函数创建一个响应式对象`info`，然后定义了一个计算属性`oneName`。`oneName`的值是根据`xing`和`ming`两个属性的值计算得到的。我们可以使用简写的方式定义计算属性，也可以使用对象的方式定义计算属性，在对象中指定`get`和`set`函数。这样，当`oneName`的值发生变化时，`xing`和`ming`的值也会相应地进行更新。

需要注意的是，在Vue3中，我们需要将计算属性的定义放在`setup()`函数中，并且返回`info`对象，以便在模板中使用计算属性。

相关问题

vue3computed函数传参

Vue3中的计算属性可以通过传参来实现动态的数据显示。下面是一个示例：

import { computed } from 'vue';

const selfAge = computed(() => {
  return function(a, b) {
    return a + '年我' + age.value + '希望月薪' + b;
  };
});

// 在模板中使用计算属性传参
<div>{{ selfAge(2025, '20k') }}</div>
<div>{{ selfAge(2027, '25k') }}</div>
<div>{{ selfAge(2030, '35k') }}</div>

这个示例中，`selfAge`是一个计算属性，它返回一个函数。这个函数接受两个参数`a`和`b`，并根据这些参数和`age`的值来计算并返回一个字符串。在模板中，我们可以通过调用`selfAge`并传入不同的参数来动态地显示不同的数据。

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就不会被触发重新计算，计算属性的值也不会更新。