vue3.0-第六章之shallowReactive / shallowRef / readonly / shallowReadonly

1.shallowReactive

shallowReactive监听了第一层属性的值，一旦发生改变，则更新视图;其他层，虽然值发生了改变，但是视图不会进行更新

import {shallowReactive} from 'vue'
export default {
    setup() {
        const obj = {
            a: 1,
            first: {
                b: 2,
                second: {
                    c: 3
                }
            }
        }
        const state = shallowReactive(obj)//对这个obj做双向绑定
        function change1() {  //改变第一层的时候是会双向绑定的
            state.a = 7
        }
        function change2() {//改变非第一层的时候，数据会变，但是dom不会变
            state.first.b = 8
            state.first.second.c = 9
            console.log(state);
        }
        return {state}
    }
}

2.shallowRef

shallowRef创建一个 ref ，将会追踪它的 .value 更改操作，但是并不会对变更后的 .value 做响应式代理转换

const foo = shallowRef({})
// 改变 ref 的值是响应式的
foo.value = {}
// 但是这个值不会被转换。
isReactive(foo.value) // false

原理：

function shallowRef(target) {
  return {
    _value: target,
    get value() {
      console.log('读取数据');
      return this._value;
    },
    set value(val) {
      console.log('修改数据');
      this._value = val;
    }
  }
}

3.readonly

readonly:用于创建一个只读的数据, 并且是递归只读

let state = readonly({name:'lnj', attr:{age:18, height: 1.88}});
function myFn() {
  state.name = '知播渔';
  state.attr.age = 666;
  state.attr.height = 1.66;
  console.log(state); //数据并没有变化

}
return {state, myFn};

4.shallowReadonly

使用 shallowReadonly 函数包装过的对象，只有最外层属性是只读的，内层仍然可以改写

let data2 = shallowReadonly({
      name: 'a',
      deep: {
        name: 'b'
      }
    })

    let change = ()=>{
      data1.name = 'aa' // 出错
      data1.deep.name = 'bb' // 出错
      data2.name = 'aa' // 出错
      data2.deep.name = 'bb' // 正常
    }