Vue3中子组件的计算属性

什么是计算属性：

在Vue.js应用程序中，计算属性是一种用于根据现有数据计算导出新数据的属性。它们是非常有用的，因为在复杂的应用程序中，可能需要从多个源派生数据。相比于Methods，计算属性是基于响应式依赖缓存。只有当它们所依赖的值发生变化时，它们才会重新计算。这个过程使得编写的代码更加高效，原因是避免了每次重新计算导致的开销。

如何使用计算属性：

计算属性是在Vue.js组件中创建的。Vue.js组件是自定义元素，它是Vue.js核心库的基本构筑块。计算属性是在组件实例中声明，在模板中使用方法与绑定普通属性一样，它用于计算基于其他属性的值。举例来说，一个由firstName和lastName组成的计算属性fullName，在模板中使用<amp;div> {{fullName}}</div>来使用该属性。

计算属性的实际应用：

在Vue3中，子组件的计算属性设定类似于Vue2，使用computed属性进行声明。但不同之处在于，Vue3使用了 composition API 进行重构。这使得我们在组件内部可以自定义一个 setup 函数，并在其中定义自己的计算属性。

例如，我们可以创建一个接收 props，并根据 props 计算导出新数据的子组件：

这里我们在组件内使用了 setup 函数，并且给它传递了一个 props 参数。我们也创建了一个计算属性 fullName，该属性使用了传递给 setup 函数的 props 对象，并返回 firstName 和 lastName 的合并。最后，在 return 语句中，我们将 fullName 暴露给父组件使用。

总结：

Vue3中使用composition API 实现了渲染出的组件，可以使用新的调用方式进行处理。另外，在子组件内使用computed进行计算属性设定，能够更加灵活地应用于复杂的场景中，大大提高了应用程序的开发效率。