Home Vue Vue3

# 1.readonly 一般用于给子组件传递数据怕被随意修改时

接受一个对象 (响应式或纯对象) 或 ref 并返回原始对象的只读代理。只读代理是深层的：任何被访问的嵌套 property 也是只读的。— 官方原话

App 为根组件 下面 Home 例子都被此组件引用

vue
// App.vue 
<template>
  <div>
    <home></home>
  </div>
</template>
<script>
import Home from "./Home.vue";
export default {
  components: {
    Home,
  },
};
</script>
<style scoped>
</style>
# 2.readonly 普通对象


vue
// Home.vue 
<template>
  <div>
    <button @click="updateState">修改name为Nico</button>
  </div>
</template>
<script>
import { readonly } from "vue";
export default {
  setup() {
    const info1 = { name: "Neko" }; // 普通对象
    console.log("原值:", info1);
    const readonlyInfo1 = readonly(info1);
    const updateState = () => {
      readonlyInfo1.name = "Nico"; // 修改值看是否会发生变化
      console.log("info1", info1); //info1 没有成功改变
      console.log("readonlyInfo1", readonlyInfo1); //readonlyInfo1 也没有成功改变
    };
    return {
      updateState,
    };
  },
};
</script>
<style scoped></style>
参考结果：


step_readonly


# 3.readonly 对 reactive 是否有用


vue
// Home.vue
<template>
  <div>
    <button @click="updateState">修改name为Nico</button>
  </div>
</template>
<script>
import { reactive, readonly } from "vue";
export default {
  setup() {
    // 响应式的对象 readonly 对 reactive 是否起作用
    const info2 = reactive({
      name: "Neko",
    });
    console.log("原值：", info2);
    const readonlyInfo2 = readonly(info2);
    const updateState = () => {
      readonlyInfo2.name = "Nico";
      console.log("info2", info2); //info2 的 nane 值没有被修改
      console.log("readonlyInfo2", readonlyInfo2); //readonlyInfo2 的 name 值也没有被修改
    };
    return {
      updateState,
    };
  },
};
</script>
<style scoped>
</style>
参考结果：


step_readonly


# 4.readonly 对 ref 是否有用


vue
// Home.vue
<template>
  <div>
    <button @click="updateState">修改name为Nico</button>
  </div>
</template>
<script>
import { ref, readonly } from "vue";
export default {
  setup() {
    // 响应式的对象 readonly 对 reactive 是否起作用
    const info3 = ref("Neko");
    console.log("原值：", info3);
    const readonlyInfo3 = readonly(info3);
    const updateState = () => {
      readonlyInfo3.value = "Nico"; //ref 是通过 value 来修改的
      console.log("info2", info3); //info3 的 nane 值没有被修改
      console.log("readonlyInfo3", readonlyInfo3); //readonlyInfo3 的 name 值也没有被修改
    };
    return {
      updateState,
    };
  },
};
</script>
<style scoped>
</style>
参考结果：


step_readonly