ref 和 computed 使用时机和使用方法

使用ref() 函数来声明响应式状态，ref() 接收参数，将其放置在一个带有 .value 属性的ref对象中返回，在 setup 函数中简单使用如下：

import { ref } from 'vue'
export default {
  setup() {
    const count = ref(100);
    function increase() {
      count.value++
    }
    return {
      count,
      increment
    }
  }
}

<button @click="increase">{{ count }}</button>

使用ref定义的变量发生修改时，vue会自动监听变化，触发组件的重新渲染，及时更新相应的DOM。ref可以操作任何类型的值，并且具有深层响应式，因此使用非常方便。

使用时机：当使用异步或其他操作获取数据时，可以使用ref存储，便于之后使用。

但我们不能太过于依赖ref，当使用ref定义变量时，相关数据发生改变都会重新渲染页面，性能消耗很大，并且每使用一个 ref变量，后期就需要维护一次赋值修改等操作，操作比较麻烦。（含泪提醒大家使用之前千万要想清楚）

这个时候不得不提到计算属性computed，计算属性返回的结果仍然是包装后的ref数据，可以进行缓存，依赖项发生变化时，计算属性的数据也会自动变化。简单使用如下：

import { ref, computed } from "vue"
export default{
  setup(){
    const num1 = ref(13)
    const num2 = ref(14)
    const sum = computed(()=>{
      return num1.value + num2.value
    })
    return{
      num1,
      num2,
      sum
    }
  }
}

 <div>
   <p>{{num1}} + {{num2}} = {{sum}}</p>
   <button @click="num1++">num1++</button>
   <button @click="num2++">num2++</button>
 </div>

computed的强大之处是，只要我们看到某一个变量是依赖于其他的变量存在时，就可以直接使用 computed监听，当依赖的数据变化时，其会自动修改，无需手动操作，会非常方便。

使用时机：处理依赖响应式状态的复杂逻辑。

import { ref, computed } from "vue";
export function calculate(){
  const computedRef = computed(() => {})
  // 完整写法
  const computedRef = computed({
    get(){},
    set(value){}
  })
}

但需要注意一点，虽然目前computed支持get和set操作，但是vue3官方建议，避免直接修改计算属性的值，其返回值应该被视为只读的，并且永远不应该被更改——应该更新它所依赖的源状态以触发新的计算。不过没有具体的措施去提示用户不能使用set方法，只是我们使用时应该注意一下。​

这是在实际开发中的真实体会，希望可以给大家一些建议呀。