vue3 readOnly、shallowReadOnly、toRaw和markRaw

readOnly：让一个响应式数据变成只读的（深只读）

shallowReadOnly：让一个响应式数据变成只读的（浅只读）

应用场景：不希望数据被修改时

语法：

let person = reactive({
      name:'章三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
  })
//所有数据都不能修改
person=readOnly(person)
//name和age不能修改，salary不受影响
person=shallowReadOnly(person)

toRaw：将一个由reactive声明的响应式对象转换成普通对象（不是响应式对象）

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

markRaw：标记一个对象，使其永远不成为响应式对象

使用场景：

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

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

语法：

function test(){
      const p = toRaw(person)
      console.log(p)
      let children = {name:'李四',age:18}
      person.children = markRaw(children)
}