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

雾林小妖

已于 2023-12-11 14:15:28 修改

阅读量1.9k

点赞数 6

分类专栏： VUE实战文章标签： VUE语法 vue中readonly用法 vue设置数据只读 reactive响应式

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

本文链接：https://blog.csdn.net/tangshiyilang/article/details/134731439

版权

VUE实战专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、功能概述

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

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

https://blog.csdn.net/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>