vue3响应式api

lowMan
244 阅读3分钟

vue api文档：cn.vuejs.org/api/
reactive：把对象变成响应式（深度监听）

shallowReactive：把对象变成响应式（浅层监听），只改变深层的属性，值会变，但是不会触发页面更新，如果伴随着第一层属性有变化，深层的值也会更新到页面上

const o = shallowReactive({
      name: 'tom',
      age: 18,
      obj: {
        a: 'jerry',
        b: 1 // 更新深层的值，页面不会刷新，如果外层属性更新，深层的新值也会更新到页面
      }
    })

readonly： 把响应式对象或纯对象变成 只读（深层），如果改变这个对象的值，就会警告，值不会发生变化；（最典型的是props传来的值是readonly，只能通过emit传到组件外部改变，保证了单向数据流）

shallowReadonly：把响应式对象或纯对象变成 只读（浅层），第一层属性不能修改，但是深层的属性可以修改；

const o = shallowReadonly({
      name: 'tom', // 浅层的属性不能修改
      age: 18,
      obj: {
        a: 'jerry',
        b: 1 // 深层的属性可以修改
      }
    })

 ref：把基本类型和引用类型的值变成响应式，ref的初衷是将基本值转换成响应式，因为变成响应式需要是一个引用类型，但是比如number、string这中基本类型就没法直接使用proxy做响应式，于是ref是将基本类型转换成带有.value属性的引用类型，这样就可以转换成响应式了，当然，传入ref的值是引用类型时同样可以变成响应式，内部直接调用reactive变成响应式；

isRef： 判断是不是ref对象

const a = ref(0);
console.log(isRef(a)); // true

unref：展开ref对象，开发时不用再用.value去访问ref的值，template模板中统一将ref用unref展开了；

const a = ref(0);
const b = unref(a);
console.log(b); // 0

shallowRef： 浅层ref，也就是只对.value这一层做了响应式，再深层的就不是响应式了，所以当ref作用的值是基本类型时，用ref和shallowRef效果是一样的

triggerRef：个人理解是对shallowRef做的一个api，shallowRef只监听对value的改变，如果对深层的属性改变是不会触发页面渲染的，当改变深层属性后，用triggerRef再去触发页面更新

复制代码

const o = shallowRef({
  name: 'tom',
  age: 18,
  obj: {
    a: 'jerry',
    b: 1
  }
})
o.value.obj.b += 1;
// 手动执行与 shallowRef 关联的任何副作用，这样子就能触发了。
triggerRef(o);

复制代码

customRef： 自定义的 ref 。这个 API 就更显式的让我们了解 track 与 trigger，看个例子：

复制代码

<template>
  <div>name：{{name}}</div>
  <input v-model="name" />
</template>

// ...
setup() {
  let value = 'front-refined';
  // 参数是一个工厂函数
  const name = customRef((track, trigger) => {
    return {
      get() {
        // 收集依赖它的 effect
        track();
        return value;
      },
      set(newValue) {
        value = newValue;
        // 触发更新依赖它的所有 effect
        trigger();
      }
    };
  });
  return {
    name
  };
}

复制代码

toRef：可以用来为响应式对象上的 property 新创建一个 ref ，从而保持对其源 property 的响应式连接

复制代码

const object = reactive({
  name: 'tom',
  info: {
    age: 19
  }
})
const name = toRef(object, 'name');
name.value = 1; // object.name也会变成1

复制代码

toRefs：把响应式对象的所有propety都创建成ref对象（内部是toRef实现）

compouted：计算属性（依赖响应式数据），如果计算公式里没有响应式数据，那么compouted就不是响应式数据

watch：监听响应式数据

watch(
  [() => state.id, () => state.name],
  ([id, name], [oldId, oldName]) => {
    /* ... */
  }
);

watchEffect：和watch作用一样都是监听，但是watchEffect不用显示传入监听的值，会自动加载，第一个参数是一个函数，会立即执行，在这个函数里的变量都会被监听，这个函数有个

onInvalidate参数，也是个函数，会再再次出发effect时触发或者在异步函数结束时触发，可以在这里处理异步函数导致的因为异步导致的数值混乱问题；

具体的参考www.jianshu.com/p/a8fdf52d0…

复制代码

const num1 = ref(1);
const num2 = ref(2);
const sum = ref(0);
function addA() {
  num1.value ++;
}
function addB() {
  num2.value ++;
}
const stop = watchEffect((clearUp) => {
  // num1 和 num2 变化时都会被监听
  sum.value = num1.value + num2.value;
  console.log(sum.value, 'sum.value===');
  clearUp(() => {
    // 在每次副作用更新之前调用
    // 首次副作用之前不调用
    // 监听销毁时触发
    console.log('clearUp');
  })
}, {
  flush: 'post', // 如果想在侦听器回调中能访问被 Vue 更新之后的DOM，你需要指明 flush: 'post' 选项：
  onTrack(e) {
    // 收集依赖时的回调
    console.log('收集依赖');
  },
  onTrigger(e) {
    // 触发辅助作用的回调
    console.log('触发副作用');
  }
})
// 停止监听
// stop()

复制代码

isReadonly：判断是否是只读属性

isReactive：检查对象是不是reactive创建的响应式proxy

isProxy：检查对象是否是由 reactive 或 readonly 创建的 proxy。

 toRaw： 把响应式对象转化为非响应式对象（去除响应式），当转化ref生成的响应式对象时，要传入refObject.value,才能正确转化，否则还会返回ref的格式

markRaw： 标记一个对象，使其永远不会转换为 proxy。返回对象本身。

avatar
文章
阅读
粉丝