计算属性深入

计算属性缓存与方法对比

特别注意，以下内容是继上一节

你可能注意到我们在表达式中像这样调用一个函数也会获得和计算属性相同的结果

<!-- template模板中 -->
<!-- 显示结果一样是`Yes` -->
<p>{{ calculateFunction() }}</p>

// script标签中
const brand = reactive({ 
    name: 'phone',
    phone_brand: [
        'Xiaomi',
        'Redmi',
        'apple'
    ]
})
const calculateFunction = () => { 
    return brand.phone_brand.length
           > 0 ? 'Yes' : 'No'
}

如果使用的是函数而不是计算属性显示的结果都是一样的，不同之处在于计算属性会基于其响应式依赖(brand.phone_brand)被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算，这意味着brand.phone_brand不改变，无论多少次访问 Info 都会立即返回先前的计算结果，而不用重复执行 getter 函数。

这也解释了为什么一下计算属性永远不会更新，因为Date.now()不是一个响应式依赖:

const now = computed(() => Date.now())

相比之下，方法调用(calculateFunction())总是会在重渲染发生时再次执行函数。

为什么需要缓存呢？想象一下我们有一个非常耗性能的计算属性 list，需要循环一个巨大的数组并做许多计算逻辑，没有缓存的话，我们会重复执行很多次list的getter函数，这实际上没有必要。

可写计算属性

计算属性默认是只读的。当你尝试修改一个计算属性时，你会收到一个运行时警告 如下代码:

// 尝试修改计算属性
Info.value = 'hello'
console.log(Info.value)

如果需要可写计算属性，你可以通过同时提供 getter 和 setter 来创建：

const brand = reactive({ 
    name: 'phone',
    phone_brand: [
        'Xiaomi',
        'Redmi',
        'apple'
    ]
})

const Info = computed({ 
    // getter
    get() { 
        return brand.name
    },
    // setter
    set(newVlue) { 
        brand.name = newVlue
    }
})

onMounted(() => { 
    // 更改计算属性
    Info.value = 'iPhone14'
    console.log(Info.value)
})

可更改计算属性: