vue3.0知识点总结（五）

一.shallowRef

shallowRef只处理基本数据类型的响应式，不对对象类型处理响应式

使用场景：如果对象数据，后续功能不会修改对象中的属性而是生新的对象来替换

用法：

如下代码：对象类型数据进行+1操作如果使用shallowRef将不会进行操作

 <p>{{ x.y }}</p>
 <button @click="x++">shallowRef应用</button>

 setup() {
   
    let x = ref({
      y: 1,
    });
    return {
     
      x,
    };
  },

二.shallowReative

只处理对象最外层数据的响应式

使用场景：如果有一个对象数据，结构比较深，但变化的只是最外层数据时使用

使用：如下代码，想要操作内层type进行加一操作，是行不通的

  <p>工作：{{ person.job.type }}</p>
  <button @click="person.job.type++">shallowReactive应用</button>
     setup() {
    let person = shallowReactive({
      name: "指尖舞者",
      age: 12,
      job: {
        type: 1,
      },
    });
  
    return {
      person,
    
    };
  },

三.readonly

readonly是一个函数接受一个响应式数据，把响应式数据变成只读。

大家是不是会有这样疑惑，那我直接不用ref或reative变为响应式就行，这不是多此一举？

确实如此，但是大家可以想象一个场景，别人封装好的响应式数据，你拿来自己用，但是你的需求是数据是只读的，这时候readonly就派上用场了。

 用法：

还是上面的代码例子，把person传入readonly中，数据就不是响应式了

person= readonly(person);

控制台进行响应式拦截

四.shallowreadonly

把对象类型数据变成只读属性，但是最外面一层是响应式——浅只读

用法：同上

五.toRaw

将响应式数据还原成普通数据，也就是作用域ref  reative相反

注意：只能处理reative修饰的响应式，ref不起作用

使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。

<template>
  <div>
    <!--  -->
    <button @click="fun">把响应式对象还原</button>
  </div>
</template>

<script>
import { ref, reactive, toRaw } from "vue";

export default {
  setup() {
    let person = reactive({
      name: "指尖舞者",
      age: 12,
      job: {
        type: 1,
      },
    });
    function fun() {
      console.log(person);   //输入响应式对象

      let p = toRaw(person);   //还原成基本数据
      console.log(p);             //输出转变后的数据
    }
    return {
      person,
      fun,
    };
  },
};
</script>

 

六.markRaw 

标记一个对象使其永远不会变成响应式

• 应用场景:

  1. 有些值不应被设置为响应式的，例如复杂的第三方类库等。

  2. 当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。

 我们在代码中声明了一个响应式对象 我们现在对象上添加一属性而这个属性的值被修改之后不需要页面的更新

   我们知道直接在一个响应式的对象上添加属性也会被处理为响应式的，所以我们通过了        markRaw()方法先将对象处理为一个永远不会再成为响应式对象 在添加在p对象上

七.provide和inject

实现祖孙组件间的数据通信

用法：父组件有一个provide选项提供数据，子组件有一个inject选项进行使用这些数据

1. 祖组件中发送：

setup(){
let car=reative({name:"宝马"})
provide('car',car)
}

 2.后代组件接收

并且接收到的数据也是响应式数据

setup(){
const car=inject('car')
return{car}
}

 八.响应式数据的判断

isRef:检查一个值是否是ref对象

isReactive:检查一个对象是否由reactive创建响应式代理

isReadonly:检查一个对象是否由readonly创建只读代理

isProxy:检查一个对象是否由reactive或者reaonly方法创建代理