04 vue3之to系列全家桶

toRef toRefs toRaw

toRef

如果原始对象是非响应式的就不会更新视图 数据是会变的

如果原始对象是响应式的是会更新视图并且改变数据的

针对响应式的有效 修改某个对象的key值 非响应式视图不会改变，源码没做依赖收集和更应依赖，做了会导致BUG 会触发两次

<template><div class="">{{ j }}</div><button class="" @click="toRef1">toRef</button>
</template><script setup lang="ts">
import { ref, reactive, toRef, toRefs, toRaw } from "vue";
let j = reactive({ name: "cookie", age: 18 });let age1 = toRef(j, "age");
let toRef1 = () => {age1.value = 33;
};
</script>

toRefs

可以帮我们批量创建ref对象主要是方便我们解构使用

import { reactive, toRefs } from 'vue'
const obj = reactive({foo: 1,bar: 1
})let { foo, bar } = toRefs(obj)foo.value++
console.log(foo, bar);

 手动实现个toRefs

const toRefs = <T extends object>(object: T) => {const map: any = {};for (let key in object) {map[key] = toRef(object, key);}return map;
};

toRaw

将响应式对象转化为普通对象，不想让视图发生变化可以使用这个

import { reactive, toRaw } from 'vue'const obj = reactive({foo: 1,bar: 1
})const state = toRaw(obj)
// 响应式对象转化为普通对象const change = () => {console.log(obj, state);}