vue中Object.freeze() 优化数据

最新推荐文章于 2024-05-14 23:10:28 发布

不忘初心1995

最新推荐文章于 2024-05-14 23:10:28 发布

阅读量692

点赞数

文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/qq_42451776/article/details/120094781

版权

文章目录

- 基本概念
- 案例

基本概念

阻止修改现有的属性，也意味着响应系统无法再追踪变化。
Object.freeze() 方法可以冻结一个对象，不能向这个对象添加新的属性，不能修改其已有属性的值，不能删除已有属性，以及不能修改该对象已有属性的可枚举性、可配置性、可写性。该方法返回被冻结的对象。
freeze冻结了的对象，vue不会做getter和setter的转换。

案例

<body>
    <div id="app">
        <ul>
            <li v-for="(item, index) in list" :key="item.name">
                {{item.name}}
            </li>
        </ul>
        <button @click="add">add</button>
    </div>
</body>
<script>
    const App = {
        data() {
            return {
                list: Object.freeze([{
                        name: "wxj0"
                    },
                    {
                        name: "wxj1"
                    }
                ])
            }
        },
        methods: {
            dataChange() { // 事件能触发单data中的数据不会被修改
                console.log(this.list.name);
            },
            add() {
                // 不能修改，会报错
                this.list.push({
                    name: "new456" + Date.now()
                })
            },
        }
    }
    const app = Vue.createApp(App)
    app.mount('#app')
</script>

不忘初心1995

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中Object.freeze() 优化数据

文章目录基本概念案例基本概念阻止修改现有的属性，也意味着响应系统无法再追踪变化。Object.freeze() 方法可以冻结一个对象，不能向这个对象添加新的属性，不能修改其已有属性的值，不能删除已有属性，以及不能修改该对象已有属性的可枚举性、可配置性、可写性。该方法返回被冻结的对象。freeze冻结了的对象，vue不会做getter和setter的转换。案例<body> <div id="app"> <ul>
复制链接

扫一扫