Vue3 文档总结 - 高阶指南 - 响应性

高阶指南

响应式状态

• reactive： 深层转化-用于转化对象，data 选项中返回的对象
• ref 创建一个独立的响应式对象，通过 value 属性访问其内部值
• ref 在模板中使用时，将会自动展开为原始值
• 当 ref 存在于 reactive 参数对象中时，自动展开为原始值。reactive 的参数一定得是一个原始对象。不能是数组，或者 map 这种集合类型

 setup() {
   
    const myRef = ref(0)
    const myReactive = reactive({
   myRef})
    console.log(myReactive.myRef) // 0
    myReactive.myRef = 1
    console.log(myRef.value) // 1
  }

• reactive 创建的响应式对象发生解构时，会丢失其响应式特性。解决方法是先通过 toRefs 转化为 一系列 Ref,再进行解构（toRef 是解构一个，需要两个参数，toRefs 处理一组。）
• 使用 readonly 防止响应式对象的修改

响应式状态侦听、计算

computed

• 计算属性 computed,接受一个函数（此时是 getter），也可以接受一个 包含 get 和 set 的对象参数。按照 Ref 的方式访问其值

watchEffect

• watchEffect 在依赖变更时重新执行副作用。特点是立即执行，并且无需代入依赖参数。返回一个停止监听的函数

  setup() {
   
    const myRef = ref(0);
    onMounted(() => {
   
      setInterval(() => {
   
        myRef.value = myRef.value + 1;
      }, 1000);
    });
    const stopWatch = watchEffect(() => {
   
      console.log(myRef.value);
      if (myRef.value > 3) {
   
        stopWatch();
      }
    });

• 但是 watchEffect 中如果是一个异步的副作用的话，就算我们通过返回函数去停止了监听，但是异步动作仍然是触发了的。所以需要一个函数，这个函数在 watchEffect 清除的同时，又能清除异步副作用。watchEffect 采用 onInvalidate 参数解决这个问题
• ***onInvalidate 参数是为了在停止监听的时候，去除其未完成的副作用
• ***类似于一个监听，监听到了停止事件，那么就会就会执行这个之前收集到的函数
• ***通常在副作用执行之前，设置这个值

当没有设置 onInvalidate 监听函数的时候，到 4 停止。因为停止监听的时候，effect 已经执行

setup() {
   
   let timer = null;
   const data = ref(0);

   // 写一个异步的副作用
   const effect = () => {
   
     timer = setTimeout(() => {
   
       data.value = data.value + 1;
     }, 1000);