vue3 Reactivity总结

费曼学习法：用输出倒逼输入

vue3的响应式

1. reactive
2. ref
3. computed
4. readonly

API	传入	返回	备注
reactive	plain-object	对象代理	深度监听对象中的所有属性
readonly	plain-object or proxy	对象代理	只能读取对象属性不可修改
ref	any	{value,…}	对value的访问是响应式的，如果给value的值是对象则通过reactive转换响应式，如果本身是响应式对象则使用响应式
computed	function	{value,…}	监听响应式对象的变化，返回一个新的响应式对象

vue3响应式脱离了组件，vue2依赖于组件
应用：

1. 当需要将对象变成响应式则使用reactive
2. 当需要将响应式对象只读则使用readonly
3. 当需要非对象变成响应式对象则使用ref
4. 当需要将已知响应式对象得到一个新的响应式对象，则使用computed

监听数据变化

watch

// 等效于vue2的$watch

// 监听单个数据的变化
const state = reactive({ count: 0 })
watch(() => state.count, (newValue, oldValue) => {
  // ...
}, options)

const countRef = ref(0);
watch(countRef, (newValue, oldValue) => {
  // ...
}, options)

// 监听多个数据的变化
watch([() => state.count, countRef], ([new1, new2], [old1, old2]) => {
  // ...
});

watchEffect

const stop = watchEffect(() => {
  // 该函数会立即执行，然后追中函数中用到的响应式数据，响应式数据变化后会再次执行
})

// 通过调用stop函数，会停止监听
stop(); // 停止监听

无论是watch、watchEffect 当依赖变化回调函数都是异步的（微任务）
应用：

1. 当首次不需要执行，并需要旧值，需要监控回调函数中不行则使用watch
2. 其他情况可用watchEffect

响应式转换

1. toRef：将响应式对象属性转换为ref
2. toRefs：将响应式对象转换为ref
3. unref：isRef§ ? p.value : p

核心工具函数 官方地址

1. isRef
2. isProxy
3. isReactive
4. isReadonly

编码习惯建议

所有的composition function均以ref的结果返回，以保证setup函数的返回结果中不包含reactive或readonly直接产生的数据
内部实现逻辑不管，总之给模板的就是ref

function usePos(){
  const pos = reactive({ x:0, y:0 });
  return toRefs(pos); //  {x: refObj, y: refObj}
}
function useBooks(){
  const books = ref([]);
  return {
    books // books is refObj
  }
}
function useLoginUser(){
  const user = readonly({
    isLogin: false,
    loginId: null
  });
  return toRefs(user); // { isLogin: refObj, loginId: refObj }  all ref is readonly
}

setup(){
  // 在setup函数中，尽量保证解构、展开出来的所有响应式数据均是ref
  return {
    ...usePos(),
    ...useBooks(),
    ...useLoginUser()
  }
}