【Vue.js 3.0】Day-12 Composition API readonly & shallowReadonly

凉生阿新

已于 2024-05-23 09:32:49 修改

阅读量93

点赞数

分类专栏： # Vue 3.0 文章标签： vue.js javascript 前端框架

于 2022-12-29 21:47:57 首次发布

本文链接：https://blog.csdn.net/liuxin_hello/article/details/128488085

版权

Vue 3.0 专栏收录该内容

25 篇文章 2 订阅

订阅专栏

本文介绍Vue中readonly与shallowReadonly的功能及使用方法。这两种工具用于将响应式数据设置为只读状态，以防止数据被意外修改。通过实例展示了如何使用这两种特性来保护数据，并解释了深只读与浅只读的区别。

摘要由CSDN通过智能技术生成

readonly & shallowReadonly

readonly: 让一个响应式数据变为只读的（深只读）。
shallowReadonly：让一个响应式数据变为只读的（浅只读）。
应用场景: 不希望数据被修改时。

eg

<template>
  <h4>当前求和为:{{ sum }}</h4>
  <button @click="sum++">点我 ++</button>
  <hr />
  <h2>姓名: {{ name }}</h2>
  <h2>年龄: {{ age }}</h2>
  <h2>薪资: {{ job.j1.salary }} k</h2>

  <button @click="name += '~'">修改姓名</button>
  <button @click="age++">修改年龄</button>
  <button @click="job.j1.salary++">修改薪资</button>
</template>

<script>
import { reactive, toRefs, ref, readonly, shallowReadonly } from "vue";
export default {
  name: "Demo",
  setup() {
    let sum = ref(0);
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          salary: 20,
        },
      },
    });
    // readonly : 让一个响应式数据变为只读的（深只读）。
    // readonly, 接收响应式数据; 返回一个新的数据,返回的数据有一个特点就整个对象是只读的, 不允许更改！
    person = readonly(person)
    
    // shallowReadonly: 让一个响应式数据变为只读的（浅只读）
    person = shallowReadonly(person);

    
    // 限制 ref 生成响应式数据进行限制
    sum = readonly(sum)
    sum = shallowReadonly(sum)

    return {
      sum,
      ...toRefs(person),
    };
  },
};
</script>