vue数据监听解析Object.defineProperty与Proxy区别

目录
  • 前言
  • Object.defineProperty 与 Proxy 的区别
  • 在使用上的差异
  • 总结与思考

前言

总能深深感觉到自己能力有限，写这篇文章的目的纯粹是因为发现在实际工作中，和一些小伙伴交流时发现，虽然有些小伙伴大概知道 vue2 与 vue3 的区别，但并没有去进一步思考一些深一点的东西。尽管能力有限，但想着自己在起步时候的艰难，就想着分享一下自己的一些看法，虽然不一定有多深入，但能引起大家的一些思考也是好的。

Object.defineProperty 与 Proxy 的区别

其实在 api 的命名上就能看出端倪，Object.defineProperty 顾名思义，是与对象和属性有关的。 vue2 就是利用 defineProperty 的 set 和 get 方法去监听对象属性变化的。 而 Proxy 是直接去监听一个对象的。

注意：他们在这里的区别就是 Object.defineProperty 监听的是对象的属性，而 Proxy 监听的是这个对象本身

在使用上的差异

如上所述，Object.defineProperty 监听的是对象的属性， 但是监听属性只能遍历监听对象已有的属性，对于可能新增的属性，vue2 是没有办法监听的，页面自然也就不会更新。 所以为了解决这个问题 vue2 提供了 set 方法，当新增属性时，可以通过 set 方法为新增的属性添加监听器。
而 Proxy 带来的问题就是由于监听的是一个对象，自然能监听对象的所有属性变化，那么也就不再需要 set 这个方法了。

但是由于监听的是对象，所以没法处理基础类型。当我们使用 ref(false) 去创建一个基本类型的响应式变量时，本质相当于 reactive({value: false})。于是 Vue3 有了一个很奇怪的现象, 明明想用 ref 方法监听一个基础类型，却需要通过 .value 才能获取到具体值。

总结与思考

总的来说，Proxy 虽然解决了 set 的坑，但是又埋下了 ref 的坑，那么 Proxy 值得使用吗？

我的理解是值得的。原因就是同样监听一个对象，之前要为每个属性设置监听器，现在不需要了，性能和属性管理成本都能直线下降。

以上就是 vue数据监听解析Object.defineProperty与Proxy区别的详细内容，更多关于 vue数据监听的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Vue3使用Proxy实现数据监听的原因分析

    vue 数据双向绑定原理,而这个方法有缺点,并且不能实现数组和对象的部分监听情况;具体也可以看我之前写的一篇博客: 关于 Vue 不能 watch 数组 和 对象变化的解决方案,最新的 Proxy,相比 vue2 的 Object.defineProperty,能达到速度加倍.内存减半的成效.具体是怎么实现.以及对比旧的实现方法为啥能有速度加倍.内存减半的特性,下面我们来聊聊: Vue 初始化过程 Vue 的初始化过程,分别有Observer.Compiler和Watcher,当我们 new V

  • vue3响应式Proxy与Reflect的理解及基本使用实例详解

    目录 正文 理解Proxy与Reflect Proxy Reflect 实践示例 正文 在第四章中,作者讲述了Vue.js中响应式系统的设计与实现,这一块其实是整个框架的基石,也是MVVM中,ViewModel(VM)的重要组成部分. 其实在上一章中我已经感觉很难了,有一些操作作者也只是几笔带过,却很值得我们思考.这一张中,我们将目光着重于响应式数据本身,来完善上一章中我们的demo. 理解Proxy与Reflect vue3的响应式离不开Proxy,说到Proxy则离不开Reflect.这两个

  • vue3中的对象时为proxy对象如何获取值(两种方式)

    目录 第一种获取target值的方式: 第二种获取target值 PS:vue3中获取proxy包裹的数据 前言 一.具体问题 二.解决办法 使用vue3.0时,因为底层是使用proxy进行代理的所以当我们打印一些值得时候是proxy代理之后的是Proxy对象,Proxy对象里边的[[Target]]才是真实的对象. 第一种获取target值的方式: 通过vue中的响应式对象可使用 toRaw() 方法获取原始对象 //第一种获取target值的方式,通过vue中的响应式对象可使用toRaw()

  • vue项目中常用解决跨域的方法总结(CORS和Proxy)

    目录 一.什么是跨域? 二.如何解决跨域? 总结 一.什么是跨域? 跨域问题的出现是因为浏览器的同源策略问题.所谓同源就是必须有以下三个相同点:协议相同.主机相同.端口相同.如果其中有一项不同,即出现非同源请求,就会产生跨域.当我们请求一个接口的时候,出现如:Access-Control-Allow-Origin 字眼的时候说明请求跨域了 二.如何解决跨域? 跨域的解决方案: jsonpcorsNode中间件代理(两次跨域) 即 Proxynginx反向代理 CORS支持所有类型的HTTP请求,

  • Vue代理报错404问题及解决(vue配置proxy)

    目录 Vue代理报错404问题 第一种路径拼接 /api 情况 第二种路径不变情况 注意点 新增说明:配置多个代理怎么搞? 总结 Vue代理报错404问题 问题描述: 代理后出现404: 第一种路径拼接 /api 情况 const path = require('path'); function resolve(dir) { return path.resolve(__dirname, dir) } module.exports = { publicPath: process.env.NODE_

  • 为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)

    导 读 vue3.0中,响应式数据部分弃用了 Object.defineProperty ,使用 Proxy 来代替它.本文将主要通过以下方面来分析为什么vue选择弃用 Object.defineProperty . Object.defineProperty 真的无法监测数组下标的变化吗? 分析vue2.x中对数组 Observe 部分源码 对比 Object.defineProperty 和 Proxy 一.无法监控到数组下标的变化? 在一些技术博客上看到过这样一种说法,认为 Object.

  • vue数据监听解析Object.defineProperty与Proxy区别

    目录 前言 Object.defineProperty 与 Proxy 的区别 在使用上的差异 总结与思考 前言 总能深深感觉到自己能力有限,写这篇文章的目的纯粹是因为发现在实际工作中,和一些小伙伴交流时发现,虽然有些小伙伴大概知道 vue2 与 vue3 的区别,但并没有去进一步思考一些深一点的东西.尽管能力有限,但想着自己在起步时候的艰难,就想着分享一下自己的一些看法,虽然不一定有多深入,但能引起大家的一些思考也是好的. Object.defineProperty 与 Proxy 的区别 其

  • Vue数据监听方法watch的使用

    Vue数据监听方法watch的使用

    watch本身很容易理解, watch负责将视图中的数据与某个函数关联起来 当Vue视图中的数据变化时, 关联的函数会被执行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>监听方法watch的使用</title> <script src="https://cdn.bootcss.com/

  • 浅谈vue实现数据监听的函数 Object.defineProperty

    浅谈vue实现数据监听的函数 Object.defineProperty

    在 ES5中新增了不少新的API, 例如  新增了 Object.xxx相关的方法,其中有一个定义属性相关的 Object.defineProperty 这个方法(还有Object.defineProperties)这个方法是 vue框架实现数据监听的核心方法,它的定义如下: Object.defineProperty([Object] obj, [String] propname, [Object] desp ) @param  obj  要配置属性的某个对象 @param propname

  • Vue中的数据监听和数据交互案例解析

    现在我们来看一下vue中的数据监听事件$watch, js代码: new Vue({ el:"#div", data:{ arr:[1,2,3] } }).$watch("arr",function () { alert("数据改变了") }) html代码: <div id="div"> <input type="button" value="改变" @click=&

  • vue源码学习之Object.defineProperty对象属性监听

    本文介绍了vue源码学习之Object.defineProperty对象属性监听,分享给大家,具体如下: 参考版本 vue源码版本:0.11 相关 vue实现双向数据绑定的关键是 Object.defineProperty ,让我们先来看下这个函数. 在MDN上查看有关Object.defineProperty的解释. 我们先从最简单的开始: let a = {'b': 1}; Object.defineProperty(a, 'b', { enumerable: false, configur

  • 浅析Proxy可以优化vue的数据监听机制问题及实现思路

    我们首先来看vue2.x中的实现,为简单起见,我们这里不考虑多级嵌套,也不考虑数组 vue2.x中的实现 其本质是new Watcher(data, key, callback)的方式,而在调用之前是先将data中的所有属性转化成可监听的对象, 其主要就是利用Object.defineProperty,. class Watcher{ constructor(data, key, cb){ } } //转换成可监听对象 function observe(data){ new Observer(d

  • React和Vue中监听变量变化的方法

    React 中 本地调试React代码的方法 yarn build 场景 假设有这样一个场景,父组件传递子组件一个A参数,子组件需要监听A参数的变化转换为state. 16之前 在React以前我们可以使用 componentWillReveiveProps 来监听 props 的变换 16之后 在最新版本的React中可以使用新出的 getDerivedStateFromProps 进行props的监听, getDerivedStateFromProps 可以返回 null 或者一个对象,如果

  • 如何用JS实现简单的数据监听

    概述 主要是用Object.defineProperty实现类似vue的数据绑定. 第一步 const data = { name: "tom", age: 14 } Object.defineProperty(data, "name", { get(){ return "name被读取了" }, set(val){ console.log('我被赋值了',val) } }) //将此代码放到浏览器控制台查看效果 console.log(data

随机推荐