Vue(七)

toRef和toRefs

 const state = reactive({
      name: "yoga",
      age: 20,
      wife: {
        name: "yoga11",
        age: 18,
      },
    });
    
    const name = toRef(state,'name')
    
    return {
      name，
      age:toRef(state,'age')
      ...toRefs(state)
    }
    
    模板中直接写name,可以不丢失响应式
    toRefs处理所有属性
复制代码

shallowReactive和shallowRef

shallowReactive

只会包装第一层的数据 默认情况它只能够监听数据的第一层。 如果想更改多层的数据， 你必须先更改第一层的数据。 然后在去更改其他层的数据。 这样视图上的数据才会发生变化

注意：如果你在一个方法里都写了改变这个复杂数据类型的数据，那shallowReactive感觉是无效的，因为你改变了第一层的，那第二层会改变，自己遇到的坑

shallowRef

传入基本数据类型，没有区别

传入对象：改变不了

复制代码

readonly和shallowReadonly

readonly 接受响应式数据

只读的，不可修改，数据根本没修改

shallowReadonly

第一层只读，深度的可以修改

复制代码

toRaw和markRaw

toRaw

响应式数据变成原始数据，只能处理reactive处理的

markRaw

标记一个响应式对象里的添加一个属性让其丢失响应式（响应式对象添加的属性是有响应式的），数据是在变，没有响应式,得到的数据不需要改变，可以利用这个做性能优化


复制代码

customRef

可以实现防抖效果

 <input type="text" v-model="keyword" />
  <p>{{ keyword }}</p>
  
  
  setup(){
  //自己定义的ref:myRef
    const myRef = (v) => {
      let timer;
      return customRef((track, trigger) => {
        return {
          get() {
            track(); //通知vue追踪数据
            return v;
          },
          set(newValue) {
            // console.log(newValue);
            if (timer) clearTimeout(timer);
            v = newValue;
            timer = setTimeout(() => {
              trigger();
            }, 1000); //重新解析模板
          },
        };
      });
    };
    //const keyword = ref("hello"); //vue提供的ref 精装
    const keyword = myRef("hello"); //自己定义的ref  customRef 毛坯
    
    return {
      keyword,
      myRef,

    }
  }
复制代码

provide和inject

provide('car',car)


let car = inject('car')

孙子得到的数据是响应式的哦
复制代码

判断数据

isRef

isReactive

isReadonly

isPxory 是不是reactive或者readonly构建
复制代码