vue3自我学习日志2

一.reactive、 shallowReactive 函数

1.1 reactive()

reactive() 函数接收一个普通对象，返回一个响应式的数据对象, 相当于 Vue 2.x 中的 Vue.observable() API，响应式转换是“深层”的——它影响所有嵌套属性。基于proxy来实现，想要使用创建的响应式数据也很简单，创建出来之后，在setup中return出去，直接在template中调用即可

<template>
  {{state.name}} // test
<template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue';
export default defineComponent({
  setup(props, context) {
  
    let state = reactive({
      name: 'test'
    });

    return state
  }
});
</script>

1.2 shallowReactive()

创建一个响应式代理，它跟踪其自身属性的响应性shallowReactive生成非递归响应数据，只监听第一层数据的变化，但不执行嵌套对象的深层响应式转换 (暴露原始值)。

<script lang="ts">
import { shallowReactive } from "vue";
export default defineComponent({
  setup() {
    
    const test = shallowReactive({ num: 1, creator: { name: "撒点了儿" } });
    console.log(test);

    
    test.creator.name = "掘金";

    return {
      test
    };
  },
});
</script>

二.isRef() 函数

isRef() 用来判断某个值是否为 ref() 创建出来的对象

<script lang="ts">
import { defineComponent, isRef, ref } from 'vue';
export default defineComponent({
  setup(props, context) {
    const name: string = 'vue'
    const age = ref<number>(18)
    console.log(isRef(age)); // true
    console.log(isRef(name)); // false

    return {
      age,
      name
    }
  }
});
</script>

三.readonly()、isReadonly()、shallowReadonly()

3.1 readonly() 和 isReadonly()

• readonly: 传入ref或 reactive对象,并返回一个原始对象的只读代理,对象内部任何嵌套的属性也都是只读的、 并且是递归只读。
• isReadonly: 检查对象是否是由 readonly 创建的只读对象

<script lang="ts">
import { readonly, reactive } from "vue";
export default defineComponent({
  setup() {
    const test = reactive({ num: 1 });

    const testOnly = readonly(test);

    console.log(test);
    console.log(testOnly);
    
    test.num = 110;
    
    // 此时运行会提示 Set operation on key "num" failed: target is readonly.
    // 而num 依然是原来的值，将无法修改成功
    testOnly.num = 120;
    
    // 使用isReadonly() 检查对象是否是只读对象
    console.log(isReadonly(testOnly)); // true
    console.log(isReadonly(test)); // false
    
    // 需要注意的是： testOnly 值会随着 test 值变化

    return {
      test,
      testOnly,
    };
  },
});
</script>

readonly和const的区别

• const是赋值保护，使用const定义的变量，该变量不能重新赋值。但如果const赋值的是对象，那么对象里面的东西是可以改的。原因是const定义的变量不能改说的是，对象对应的那个地址不能改变

• 而readonly是属性保护，不能给属性重新赋值

3.2 shallowReadonly()

shallowReadonly 作用只处理对象最外层属性的响应式（浅响应式）的只读，但不执行嵌套对象的深度只读转换 (暴露原始值)

<script lang="ts">
import { readonly, reactive } from "vue";
export default defineComponent({
 setup() {
   
   const test = shallowReadonly({ num: 1, creator: { name: "撒点了儿" } });
   console.log(test);

   // 依然会提示： Set operation on key "num" failed: target is readonly.
   // 而num 依然是原来的值，将无法修改成功
   test.num = 3;
   // 但是对于深层次的属性，依然可以修改
   test.creator.name = "掘金";

   return {
     test
   };
 },
});
</script>

该文章为自我学习总结,文章参考掘金撒点料