js对象数据劫持，js 对象冻结

Proxy(vue响应式原理:数据侦测--数据劫持和数据代理)

1、当一个vue实例加载时，会进行初始化，将他的配置项options和mixins的内容合并，以options为主，而在初始化data时，会对data对象进行数据劫持，并做代理，通过Object。

2、Vue3 使用了 Proxy 替换了原来的 Object.defineProperty 来实现数据响应。

3、Vue 是一个 MVVM 框架，核心是双向数据绑定，VM（视图模型）是作为 V（视图） 和 M（模型）的桥梁。下面是对 Vue 响应式（双向数据绑定）的理解，如果错误尽请指出，一起交流，共同进步。

4、vue的响应式数据原理是vue的核心特性之一。当我们在vue中修改数据时，页面会自动响应并更新相应的部分，这是由vue的响应式数据原理实现的。

5、Vue通过设定对象属性的 setter/getter 方法来监听数据的变化，通过getter进行依赖收集，而每个setter方法就是一个 观察者(Watcher) ，在数据变更的时候通知 订阅者(Dep) 更新视图。

相关问答

Q1: 怎样在实战项目中进行mvvm-simple双向绑定

另外双向绑定流中的 Model 到 View 其实各个 MVVM 框架实现的都是大同小异的，都用到的核心方法是 Object.defineProperty()，通过这个方法可以进行数据劫持，当数据发生变化时可以捕捉到相应变化，从而进行后续的处理。

})；self.vm[exp] = newValue；这个语句会触发mvvm中SelfValue的setter，以及触发Observer对该对象name属性的监听，即Observer中的Object.defineProperty()中的setter。

MVVM 的核心是数据绑定。它建立了 View 和 ViewModel 之间的双向绑定关系，使得当 ViewModel 中的数据发生变化时，View 可以自动更新；同时，当用户在 View 中进行操作时，ViewModel 也可以接收到相应的变化并更新模型。

第一种方法显然不合适，第二种方法虽然解了耦合，但是明显增加了router的工作，本身VC就要做router，现在VM也要做router就……容易乱，而且这样的方法也不利于双向绑定。

Q2: vue数据双向绑定原理

于是vue中就是每当有这样的可能用到双向绑定的指令，就在一个Dep中增加一个订阅者，其订阅者只是更新自己的指令对应的数据，也就是v-model=name和{{name}}有两个对应的订阅者，各自管理自己的地方。

响应式原理： 每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

因为 view 更新 data 其实可以通过事件监听即可，比如 input 标签监听 input 事件就可以实现了。而数据更新视图的重点是如何知道数据变了，只要知道数据变了，那么接下去的事都好处理。

基本用法：Proxy 一共 支持13 种的拦截，相对Object.defineProperty更加丰富。简单Demo Vue0的一个主要点就是数据劫持的实现变更，其他的与Vue0大致相同，可参照 Vue双向绑定原理 详细了解一下。

Q3: reactive与ref对比

1、toRef后的ref数据如果是复杂类型数据时，不是原始数据的拷贝，而是引用，改变结果数据的值也会同时改变原始数据。

2、reactive API 很好地解决了 Vue2 通过 defineProperty 实现数据响应式时的缺陷。使用也非常简单：当将 ref 分配给 reactive property 时，ref 将被自动解包，无需再用 .value 访问。

3、在功能方面，ref 和 reactive，都是可以实现响应式数据！在语法层面，两个有差异。ref定义的响应式数据需要用[data].value的方式进行更改数据；reactive定义的数据需要[data].[prpoerty]的方式更改数据。

js对象数据劫持的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于js 对象冻结、js对象数据劫持的信息别忘了在本站进行查找喔。