美文网首页vue3
ref,shallowRef,reactive,shallowR

ref,shallowRef,reactive,shallowR

作者: _hider | 来源:发表于2022-08-24 23:08 被阅读0次
    一、reactive和shallowReactive

    reactive用来创建响应式对象,它接收一个对象/数组参数。代码示例如下,通过点击事件可以修改响应式对象触发视图更新。

    // 通过reactive创建数组
    const arr = reactive([1, 2, 3]);
    const onClickArr = () => arr.push(4);
    
    // 通过reactive创建对象
    const obj = reactive({ a: 1 });
    const onClickObj = () => obj.a = 2;
    

    shallowReactive创建的响应式对象/数组参数不支持深度监听,也就是只支持第一层数据,比如下面示例想要修改深层数据,数据不会发生改变。

    // 通过shallowReactive创建对象
    const obj = shallowReactive({ a: 1, b: { c: 2 } });
    const onClickObj = () => obj.b.c = 3;
    
    // 通过shallowReactive创建数组
    const arr = ref([1,2,3,[4]]);
    const onClickArr = () => arr[3].push(5);
    
    二、ref和shallowRef

    ref底层的本质还是reactive,系统会自动根据我们给ref传入的值将它转换成reactive,比如ref(123) -> reactive({value:123}),这两者等价的。在js中获取ref的值需要通过value来获取,而在template则不用,因为vue3做过处理,如果通过ref声明的变量,在template中使用可以不用加value

    refreactive一样,也是用来实现响应式数据的方法,它接收原始类型数据,原始类型数据共7个,分别是StringNumberBooleanSymbolNullUndefinedBigInt

    // 通过ref创建基本类型的数据
    const num = ref(1);
    const onClickNum = () => num.value = 2;
    

    如果是用ref创建基本数据类型的数据的话使用refshallowRef并无区别。

    const num1 = ref(1);
    const num2 = shallowRef(1);
    const onClickNum1 = () => num1.value = 2; //会更改数据
    const onClickNum2 = () => num2.value = 2; //会更改数据
    

    如果想要用ref创建对象的话,就不能用shallowRef了,因为会失效。

    // 通过shallowRef创建对象
    const origin = shallowRef({ a: 1 });
    const onClickOrigin1 = () => origin.value.a = 2; //不会更改数据
    const onClickOrigin2 = () => origin.value = 2; //会更改数据
    

    相关文章

      网友评论

        本文标题:ref,shallowRef,reactive,shallowR

        本文链接:https://www.haomeiwen.com/subject/snxsqltx.html