Vue3.0导读

1、ref 和toRef

ref -----> 复制，修改响应式数据不会影响以前的数据 , 数据发生改变，视图会自动更新

toRef -----> 引用，修改响应式数据会影响以前的数据 ， 数据发生改变，视图不会自动更新

2、 customRef

返回一个ref对象，可以显式地控制依赖追踪和触发响应

function myRef(value) {
 return customRef((track,trriger)=> {
     return {
       get(value) {
          track() //告诉vue这个数据是需要追踪变化的
          return value
        },
       set(newValue) 
          value=newValue
          trriger() //告诉vue触发界面更新
        }
     }
 })
}

3、ref 获取元素

<template>
    <div ref="box"></div>
</template>

<script>
        import {ref} from 'vue'
        export default{
setup() {
    let box = ref(null)
    onMounted(()=> {
        console.log(box.value) // <div></div>
    })
    console.log(box.value) // null
    return {box}
}
}
</script  >

4、const 和 ReadOnly的区别

const : 赋值保护， 不能给变量重新赋值；

ReadOnly: 属性保护 ， 不能给属性重新赋值（不管是值类型还是引用类型）

shallowReadOnly: 用于创建一个只读的数据，但是不是递归只读

5、 vue3.0 响应式原理Proxy

let obj = {
    name:'李斯',
    age:'30'
}
let state = new Proxy(obj, handler:{
    get(obj,key) {
        console.log(obj,key); //{name:'李斯'，age:'30'} name
        return obj[key];
    }，
    set(obj,key,value) {
        console.log(obj,key,value); //{name:'李斯'，age:'30'} name 韩非
        obj[key] = value;
        return true; //注意！！！
    }
})

console.log(state.name) //李斯  （获取值调用Proxy代理对象里面的get方法）
state.name = '韩非' ；// (赋值调用set方法)
console.log(state); // {name: '韩非'，age: '30'}

6、实现shallowReactive、shallowRef(非递归监听)

shallowReactive只监听第一层；shalloRef只监听value(value就是第一层)

1)shallowReactive
function shallowReactive(obj) {
    return new Proxy(obj, handler:{
        get(obj,key) {
            return obj[key];
         },
        set(obj, key, value)  {
            obj[key] = value;
            console.log('更新UI界面')
            return true;
        }
     })
};
let obj = {
    a:'a',
    gf:{
        b:'b',
        c:{
            d:'d'
        }
    }
};
let state = shallowReactive(obj)；
state.a = '1'
state.gf.b = '2'
state.gf.c.d = '3' 
//最终结果： 只打印一次  ‘更新UI界面’

2)shallowRef
function shallowRef(val) {
    return shallowReactive(obj:{value:val});
}

7、ref 和 reactive (递归监听)

1）reactive
function reactive(obj) {
 if(typeof obj ==='object') {
     // 如果这个对象的类型 是一个数组，就遍历这个数组
     // 判断数组的成员是不是对象，如果是，则也需包装成一个Proxy对象
     if(obj instanceof Array) {
         obj.forEach((item,index)=> {
             if(typeof item === 'object') {
                obj[index] = reactive(item);
             }
         })
     } else {
         // 如果是一个对象， 那么取出对象属性的值
         //判断对象属性的取值是不是一个对象， 如果是，则也需要包装成一个Proxy对象
         for(let key in obj) {
             let item = obj[key];
             if(typeof item === 'object') {
                obj[key] = reactive(item);
             }
     }
      return new Proxy(obj, handler:{
        get(obj,key) {
            return obj[key];
         },
        set(obj, key, value)  {
            obj[key] = value;
            console.log('更新UI界面')
            return true;
        }
     })
 }else{
     console.warn(obj+' is not a object')
 }
};

let obj = {
    a:'a',
    gf:{
        b:'b',
        c:{
            d:'d'
        }
    }
};
let state = reactive(obj)；
state.a = '1'
state.gf.b = '2'
state.gf.c.d = '3' 
//最终结果： 只打印4次  ‘更新UI界面’-------递归监听

2) ref
function ref(val) {
    return reactive(obj:{value:val})
}

8、shallowReadOnly

function shallowReactive(obj) {
    return new Proxy(obj, handler:{
        get(obj,key) {
            return obj[key];
         },
        set(obj, key, value)  {
            // obj[key] = value;
            //console.log('更新UI界面')
           // return true;
            console.log(key+'是只读属性，不能赋值')
        }
     })
};