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变量࿰