Object.freeze( ) 阻止Vue无法实现响应式系统

做了一个vue项目，总是边百度边写，知识体系不能系统起来，准备在浏览下vue.js官网基础知识。

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。但是如果使用 Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。

具体使用办法举例：

<template><div><p>freeze后会改变吗{{obj.foo}}</p><!-- 两个都不能修改？？为什么？第二个理论上应该是可以修改的--><button @click="obj.foo='会变'">点我确认</button></div>
</template><script>
var obj = {foo: '不会变'
}
Object.freeze(obj)
export default {name: 'index',data () {return {obj: obj}}
}
</script>

运行后：

从报错可以看出只读属性foo不能进行修改，Object.freeze()冻结的是值，你仍然可以将变量的引用替换掉,将上述代码更改为：

<button @click="change">点我确认</button>change () {this.obj = {foo: '会改变'}}

Object.freeze()是ES5新增的特性，可以冻结一个对象，冻结指的是不能向这个对象添加新的属性，不能修改其已有属性的值，不能删除已有属性，以及不能修改该对象已有属性的可枚举性、可配置性、可写性。防止对象被修改。如果你有一个巨大的数组或Object，并且确信数据不会修改，使用Object.freeze()可以让性能大幅提升。

Object.freeze( ) 阻止Vue无法实现响应式系统相关推荐

【Vue 3.0 新特性（四）】Vue 3.0 响应式系统原理
文章前言笔记来源:拉勾教育大前端高薪训练营阅读建议:内容较多,建议通过左侧导航栏进行阅读 Vue 3.0 响应式系统原理基础回顾 Vue.js 响应式回顾 Proxy 对象实现属性监听多层属 ...
深入剖析Vue源码 - 响应式系统构建(上)
从这一小节开始,正式进入Vue源码的核心,也是难点之一,响应式系统的构建.这一节将作为分析响应式构建过程源码的入门,主要分为两大块,第一块是针对响应式数据props,methods,data,comp ...
data的值如何初始化vue_理解Vue响应式系统
深入理解 Vue 响应式系统理解 Vue 响应式原理,到 computed.vuex 原理前言众所周知,一说到 vue 的响应式系统,就能马上想到 Object.defineProperty.数 ...
详细介绍Vue的数据响应式
Vue.js的核心包括一套"响应式系统"."响应式",是指当数据改变后,Vue会通知到使用该数据的代码.例如,视图渲染中使用了数据,数据改变后,视图也会自动更新 ...
Vue.js 深入响应式原理
深入响应式原理现在是时候深入一下了!Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新.这使得状态管理非常简单直接 ...
Vue数据绑定和响应式原理
Vue数据绑定和响应式原理当实例化一个Vue构造函数,会执行 Vue 的 init 方法,在 init 方法中主要执行三部分内容,一是初始化环境变量,而是处理 Vue 组件数据,三是解析挂载组件.以 ...
vue源码分析-响应式系统(二)
为了深入介绍响应式系统的内部实现原理,我们花了一整节的篇幅介绍了数据(包括data, computed,props)如何初始化成为响应式对象的过程.有了响应式数据对象的知识,上一节的后半部分我们还在保 ...
vue 2.0响应式源码实践，麻麻，我再也不怕被面试官提问啦
vue2.0/vue3.0响应式源码实践,麻麻,我再也不怕被面试官提问啦写在前面 vue2.0响应式源码实现 1. 先创建一个对象 2.实现observer方法 3.接下来我们对observer函数 ...
一张图理清 Vue 3.0 的响应式系统
点击上方 "程序员小乐"关注, 星标或置顶一起成长每天凌晨00点00分, 第一时间与你相约每日英文 Success is actually simple – when you ...
vue响应式系统--observe、watcher、dep
Vue的响应式系统 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的JavaScript 对象,而当你修改它们时,视图会进行更新,这使得状态管理非常简单直接,我们可以只关注数据 ...

Object.freeze( ) 阻止Vue无法实现响应式系统

Object.freeze( ) 阻止Vue无法实现响应式系统相关推荐

最新文章

热门文章

Object.freeze( ) 阻止Vue无法实现 响应式系统

Object.freeze( ) 阻止Vue无法实现 响应式系统相关推荐

最新文章

热门文章

Object.freeze( ) 阻止Vue无法实现响应式系统

Object.freeze( ) 阻止Vue无法实现响应式系统相关推荐