{ { text }}</h1> <button @click="change">count is: { { state.count }}</button> <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p> </template> <script> import { ref, reactive, computed } from 'vue' export default { name: 'HelloWorld', props: { msg: String setup(props){ let state = reactive({count: 0}) let text = computed(() => { return props.msg.split('').reverse().join('') const change = () => state.count++ return { state, change, text } </script>

计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 msg 还没有发生改变，多次访问 text 计算属性会立即返回之前的计算结果，而不必再次执行函数。

通过 computed 传入一个 getter 函数，返回一个默认不可手动修改的 ref 对象。或者传入一个拥有 get 和 set 函数的对象，创建一个可手动修改的计算状态。

比如下面代码实现全选的逻辑：

<template>
  <input type="checkbox" id="all" v-model="checkedAll">
  <label for="all">全部选择</label>
  <div></div>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <span>Checked names: {{ checkedNames }}</span>
</template>
<script>
import { ref, reactive, computed } from 'vue'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  setup(props){
    let checkedNames = ref([])
    let checkedAll = computed({
      get () {
        return checkedNames.value.length === 3
      set (value) {
        if (value) {
          checkedNames.value = ['Jack', 'John', 'Mike']
        } else {
          checkedNames.value = []
    return { checkedNames, checkedAll }
</script>
 
计算属性的 getter 函数是没有副作用的。如果要执行副作用请使用 watch 来代替。关于 watch 的使用我会在下篇文章中介绍。
 
 
vue3往期内容：《学习vue3系列ref》《学习vue3系列reactive》
 
                    响应式API中 computed 和之前的 computed 选项用法类似。对于任何复杂逻辑，我们都可能使用计算属性。比如翻转字符串：&lt;template&gt;  &lt;h1&...
				
计算属性和生命周期onMounted一样，初始化就会执行一次（computed先执行），并且只用在依赖改变的时候触发，可以提升性能。注意（计算属性的依赖是指vue里面双向绑定的变量）
1、computed计算属性的get方法
这两种computed写法都可以，num改变的时候都是返回num.value的值。
2.computed计算属性的set方法
我们有时候希望计算属性改变之后，再去对原来的值或者某些值进行处理的时候，可以使用它内置的set方法，那我们如何触发set方法呢？
当我们点击改变num的时候
				
Vue.js 官方文档，vue3 计算属性官方文档教程，vue3.0computed计算属性，前端之vue3计算属性computed，vue computed项目实战，vue3快速入门-computed计算属性，vue3学习之计算属性computed，Vue3.x computed函数---计算属性，vue3的计算属性computed，Vue3使用计算属性 computed，在vue3 中, computed 计算属性性能问题，Vue3 计算属性 | 菜鸟教程，Vue3 - computed 计算属性（详细
{SetupContext} context
在setup选项里使用computed需要手动引入computed方法，computed接受一个 getter 函数，并根据 getter 的返回值返回一个不可变的响应式 ref 对象。或者，接受一个具有 get 和 set 函数的对象，用来创建可写的 ref 对象。下面来看示例。
父组件index.vue：
				
Vue3中，`setup()`函数是定义组件的入口函数，负责初始化数据、方法等相关配置。`computed`是Vue中的计算属性，它可以根据现有的数据计算出新的属性值。在 `setup()` 函数中，可以定义`computed`属性，对组件的计算属性进行配置。 
在Vue3中， `computed`的使用方法与Vue2中基本一致，不同的是在`setup()`中的定义方式上有所区别。 在Vue3中，如果要定义组件的计算属性，需要使用 `computed` 函数来声明计算属性，然后将它们返回给`setup()`函数进行处理。
下面是一个示例：
import {computed, ref} from 'vue'
export default {
  setup() {
    const count = ref(0)
    // 定义一个计算属性
    const doubleCount = computed(() => {
      return count.value * 2
    return {
      count,
      doubleCount
在上面的代码中，我们先用`ref`定义了一个响应式变量`count`，然后用 `computed` 定义了一个计算属性`doubleCount`，并将它们都返回给了`setup()`函数。计算属性 `doubleCount` 在这里的作用是，在 `count` 变量更新时，自动更新并返回 `count` 的两倍的值。这样我们就可以在模板中直接使用 `doubleCount` 这个计算属性了。
总的来说，Vue3的 `setup()` 函数和 `computed` 属性都为我们提供了更简洁、更优雅的组件编写方式，让我们可以更轻松地管理和更新组件的状态和计算属性。