初识Vue3.0（4）——reactive的使用

Reactive 函数

Reactive 函数

import { ref, computed, reactive, toRefs } from 'vue'

interface DataProps {
  count: number;
  double: number;
  increase: () => void;
}

setup() {
  const data: DataProps  = reactive({
    count: 0,
    increase: () => { data.count++},
    double: computed(() => data.count * 2)
  })
  const refData = toRefs(data)
  return {
    ...refData
  }
}

使用 ref 还是 reactive 可以选择这样的准则

• 第一，就像原生 javascript 的代码一样，像平常写普通的 js 代码选择原始类型和对象类型一样来选择是使用 ref 还是 reactive。
• 第二，所有场景都使用 reactive，但是要记得使用 toRefs 保证 reactive 对象属性保持响应性。