vue3.0学习笔记 (readonly深只读和shallowReadonly浅只读)

1.readonly深只读  (全部深只读    不具备改的能力)

<template>
  <p>姓名:{
  { workObj.nameObj.names }}</p>

  <p>职业:{
  { workObj.work }}</p>

  <p>工资:{
  { workObj.wage }}</p>

  <button @click="changeClick">点击改变数据</button>
</template>

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

export default {

  setup() {
    //相当于vue2.0中的data  ref准备进行响应式
    let workObj = reactive({
      work: "前端工程师",
      wage: "30K",
      nameObj: { names: "张三" },
    });

    //点击改变数据的方法
    function changeClick() {
      workObj.work = "UI设计师";
      workObj.wage = "8K";
      workObj.nameObj.names = "李四";
    }

    //readonly深只读   重新赋值
    workObj = readonly(workObj);

    //最后return出去
    return {
      workObj,
      changeClick,
    };
  },
};
</script>

readonly全部没改变