12、Vue3 响应式计算和侦听

计算属性（computed） getter 函数并为 getter 返回的值返回一个不可变的响应式 ref 对象

案例

<template>
  <div>
      {{value1}} == {{value2}}
  </div>
</template>

<script>
// 计算属性 getter 函数并为 getter 返回的值返回一个不可变的响应式 ref 对象。
import { computed, ref } from 'vue'
export default {
    setup(){
        let value1 = ref('demo value');
        let value2 = computed(() => value1.value= 'new value')
        setTimeout(() => {
            value1.value = 'value1 new'
            // 计算属性返回的响应式对象不能被更改（computed value is readonly）
            value2.value = 'value2 new'
        }, 1000);
        //
        return {
            value1,
            value2
        }
    }
}

</script>