VUE3语法-(readonly的用法)将数据设置成只读模式

原创已于 2023-12-11 14:15:28 修改 · 2.5k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#VUE语法 #vue中readonly用法 #vue设置数据只读 #reactive响应式

于 2023-12-01 12:01:28 首次发布

VUE实战专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何在Vue3中使用`reactive`和`readonly`创建一个不可修改的响应式变量，并展示了尝试修改只读数据时的错误。通过实例演示了如何在setup方法中设置定时器改变只读数据引发的错误。

1、功能概述

在Vue中定义一个变量，这个变量的值不允许被修改，核心是通过readonly设置成只读。

如果不会使用ref和reactive响应式数据参考如下博客：

https://blog.youkuaiyun.com/tangshiyilang/article/details/134701103

2、具体实现

如下案例：

1、通过reactive定义一个响应式数据testData，并将testData通过readonly设置成只读模式。

2、在setup中设置了一个定时器，2s后修改readonlyData中的参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="app">{{readonlyData.name}}</div>
  <script type="module">
    const app=Vue.createApp({

       //创建setup
       setup(props,context){
        const {reactive,readonly}=Vue;//从vue中引入ref
        //创建reactive设置响应式数据
        let testData=reactive({name:'小春'+new Date()});
        //将值设置只读状态
        let readonlyData=readonly(testData);
         setTimeout(()=>{
          readonlyData.name='大春'
         },2000)
         return {readonlyData}
        }
    });
    //vue实例只作用于app这个DOM节点中
    const vm=app.mount('#app');//viewModel是组件帮助我们完成的
  </script>
</body>

</html>