Vue3响应式

1. 什么样的数据类型需要变成响应式的

只有当需要跟踪数据的变化并在数据变化时更新视图时，才需要将数据声明为响应式（使用reactive或ref）。如果数据在其生命周期内不会改变，或者不需要根据数据的变化来更新视图，那么就没有必要将其声明为响应式。

数据会在生命周期内改变的情况：

• 手动更改数据，例如count++，更新到视图当中。
• 异步请求的时候，无法保证在数据在模板渲染之前已经可用，所以也要变为响应式。

2.成为响应式的两种方法

1. ref和reactive。

reactive会把对象变成响应式对象，ref用于跟踪基本数据类型或单个值的变化。

const state = reactive({
  interfaceCategory: [],
  anotherState: '',
  moreData: {}
});

return {
 ...toRefs(state)
};

或者：

const interfaceCategory = ref([]),
return {
    interfaceCategory
}

访问数据时候，修改reactive中的值：

state.interfaceCategory.push('')

修改ref中的值：

interfaceCategory.value.push('')

此外，如果如果想在模板中直接使用 reactive 对象的属性，而不是整个对象，你可以使用 toRefs 来将 reactive 对象的每个属性转换为一个 ref，这样它们就可以在模板中直接使用，同时保持响应性。

import { reactive, toRefs } from 'vue';

const state = reactive({
  interfaceCategory: [],
  anotherState: '',
  moreData: {}
});

return {
  ...toRefs(state)
};

这样，在模板中你就可以直接使用 interfaceCategory 而不是 state.interfaceCategory，同时每个属性都保持了响应性。这是 Vue 3 提供的一种模式，可以让你更灵活地组织你的响应式状态。

2. computed和watch

如果一个响应式对象的值根据另一个响应式属性而改变，可以采用computed返回值。 或者用watch执行当响应式属性改变时候的副作用函数。

• computed 用于创建基于响应式数据变化的计算属性。它是缓存的，只有当依赖的响应式数据发生变化时，计算属性的值才会重新计算。
• watch 用于执行副作用，例如当响应式数据变化时执行异步操作或记录日志。它不是缓存的，每次依赖的数据变化时都会执行

const interfaceType = computed(() => {            
    if (state.formData.selectValue) {
        return state.interfaceData[state.formData.selectValue].list;
    }
    return [];
});