vue中defineProperty和Proxy的区别详解


Posted in Vue.js onNovember 30, 2020

Proxy的出现,给vue响应式带来了极大的便利,比如可以直接劫持数组、对象的改变,可以直接添加对象属性,但是兼容性可能会有些问题

Proxy可以劫持的数组的改变,defineProperty 需要变异

defineProperty 中劫持数组变化的变异的方法

可以理解为在数组实例和原型之间,插入了一个新的原型的对象,这个原型方法实现了变异的方法,也就真正地拦截了数组原型上的方法

我们来看下vue2.x的源码

// vue 2.5.0
var arrayProto = Array.prototype;
var arrayMethods = Object.create(arrayProto); // Array {}
function def(obj, key, val, enumerable) {
  Object.defineProperty(obj, key, {
   value: val,
   enumerable: !!enumerable,
   writable: true,
   configurable: true
  });
}
var methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
  ];

  /**
  * Intercept mutating methods and emit events
  */
  methodsToPatch.forEach(function(method) {
  // cache original method
  var original = arrayProto[method]; 
    // 比如 method是push,则结果为
    // ƒ push() { [native code] }
  def(arrayMethods, method, function mutator() {
   var args = [],
   len = arguments.length;
   while (len--) args[len] = arguments[len];

   var result = original.apply(this, args);
   var ob = this.__ob__;
   var inserted;
   switch (method) {
   case 'push':
   case 'unshift':
    inserted = args;
    break
   case 'splice':
    inserted = args.slice(2);
    break
   }
   if (inserted) {
   ob.observeArray(inserted);
   }
   // notify change
   ob.dep.notify();
   return result
  });
  });
  
  /**
  * Observe a list of Array items.
  */
  Observer.prototype.observeArray = function observeArray(items) {
  for (var i = 0, l = items.length; i < l; i++) {
   observe(items[i]); // 后续的逻辑
  }
  };

Proxy可以直接劫持数组的改变

let proxy = new Proxy(fruit, {
    get: function (obj, prop) {
      return prop in obj ? obj[prop] : undefined

    },
    set: function (obj, prop, newVal) {
      obj[prop] = newVal
      console.log("newVal", newVal) // 输出{ name: "lemon", num: 999 }
      return true;
    }
  })
  proxy.push({ name: "lemon", num: 999 })
  console.log(fruit)

vue中defineProperty和Proxy的区别详解

Proxy代理可以劫持对象的改变,defineProperty需要遍历

defineProperty

let fruit = {
     "apple": 2,
     "pear": 22,
     "peach": 222
  }
  Object.keys(fruit).forEach(function (key) {
      Object.defineProperty(fruit[i], key, {
        enumerable: true,
        configurable: true,
        get: function () {
          return val;

        },
        set: function (newVal) {
          val = newVal; // 输出 newVal 888
          console.log("newVal", newVal)
        }
      })
    })
   fruit.apple = 888

Proxy

let fruit = {
     "apple": 2,
     "pear": 22,
     "peach": 222
  }
  let proxy = new Proxy(fruit, {
    get: function (obj, prop) {
      return prop in obj ? obj[prop] : undefined

    },
    set: function (obj, prop, newVal) {
      obj[prop] = newVal
      console.log("newVal", newVal) // 输出 newVal 888
      return true;
    }
  })
  proxy.apple = 888

Proxy代理可以劫持对象属性的添加,defineProperty用this.$set来实现
defineProperty,如果属性不存在,则需要借助this.$set

<div id="app">
  <span v-for="(value,name) in fruit">{{name}}:{{value}}个 </span> 
  <button @click="add()">添加柠檬</button>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        fruit: {
          apple: 1, 
          banana: 4, 
          orange: 5 
        }
      }
    },

    methods: {
      add() {
          this.fruit.lemon = 5;  // 不会让视图发生变化
        // this.$set(this.fruit,"lemon",5)  // this.$set可以
      }
    }
  })
</script>
Object.keys(fruit).forEach(function (key) {
    Object.defineProperty(fruit, key, {
      enumerable: true,
      configurable: true,
      get: function () {
        return val;

      },
      set: function (newVal) {
        val = newVal;
        console.log("newVal", newVal) // 根本没有进去这里
      }
    })
  })

Proxy 直接可以添加属性

// vue 3
<div id="app">
  <span v-for="(value,name) in fruit">{{name}}:{{value}}个 </span>
  <button @click="add()">添加柠檬</button>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
  Vue.createApp({
    data() {
      return {
        fruit: {
          apple: 1,
          banana: 4,
          orange: 5
        }
      }
    },

    methods: {
      add() {
        this.fruit.lemon = 5; // 这样子是可以的
      }
    }
  }).mount('#app') // vue 3 不再是使用el属性,而是使用mount
</script>
let proxy = new Proxy(fruit, {
    get: function (obj, prop) {
      return prop in obj ? obj[prop] : undefined

    },
    set: function (obj, prop, newVal) {
      obj[prop] = newVal
      console.log("newVal", newVal) // lemon, 888
      return true;
    }
  })
  proxy.lemon = 888

Proxy

其他属性

vue中defineProperty和Proxy的区别详解

应用场景 promisify化

用Proxy写一个场景,请求都是通过回调,如果我们需要用promise包一层的话,则可以

// server.js
// 假设这里都是回调
export const searchResultList = function (data, callback, errorCallback) {
 axios.post(url, data, callback, errorCallback)
}
// promisify.js
import * as server from './server.js'
const promisify = (name,obj) => (option) => {
 return new Promise((resolve, reject) => {
  return obj[name](
   option,
   resolve,
   reject,
  )
 })
}
const serverPromisify = new Proxy(server, {
 get (target,prop) {
  return promisify(prop, server)
 }
})
export default serverPromisify

使用

// index.js
import serverPromisify from './serverPromisify'
serverPromisify.searchResultList(data).then(res=>{

})

如有不正确,望请指出

vue中defineProperty和Proxy的区别详解

留下一个疑问,既然兼容性不是很好,那么尤大是怎么处理polyfill呢

 到此这篇关于vue中defineProperty和Proxy的区别详解的文章就介绍到这了,更多相关vue defineProperty和Proxy内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
如何实现vue的tree组件
Dec 03 Vue.js
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
vue穿梭框实现上下移动
Jan 29 Vue.js
vue使用echarts画组织结构图
Feb 06 Vue.js
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
vue-cropper组件实现图片切割上传
May 27 Vue.js
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
vue3中provide && inject的使用
Jul 01 Vue.js
详解Vue 的异常处理机制
Nov 30 #Vue.js
ESLint 是如何检查 .vue 文件的
Nov 30 #Vue.js
Vue用mixin合并重复代码的实现
Nov 27 #Vue.js
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 #Vue.js
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 #Vue.js
vuex的数据渲染与修改浅析
Nov 26 #Vue.js
vue动态合并单元格并添加小计合计功能示例
Nov 26 #Vue.js
You might like
SONY ICF-SW55的电路分析
2021/03/02 无线电
详谈PHP编码转换问题
2015/07/28 PHP
深入浅析php json 格式控制
2015/12/24 PHP
PHP hex2bin()函数用法讲解
2019/02/25 PHP
让mayfish支持mysqli数据库驱动的实现方法
2010/05/22 Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
2012/08/14 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
jquery垂直公告滚动实现代码
2013/12/08 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
JavaScript中实现最高效的数组乱序方法
2014/10/11 Javascript
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
详解jquery选择器的原理
2017/08/01 jQuery
详解jquery插件jquery.viewport.js学习使用方法
2017/09/08 jQuery
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
2018/01/22 jQuery
在Vant的基础上实现添加表单验证框架的方法示例
2018/12/05 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
2019/10/09 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
详解Typescript 内置的模块导入兼容方式
2020/05/31 Javascript
js实现筛选功能
2020/11/24 Javascript
python实现倒计时的示例
2014/02/14 Python
python flask框架实现重定向功能示例
2019/07/02 Python
利用Python实现Shp格式向GeoJSON的转换方法
2019/07/09 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
Python如何转换字符串大小写
2020/06/04 Python
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
科技工作者先进事迹
2014/08/16 职场文书
青春励志演讲稿范文
2014/08/25 职场文书
装配车间主任岗位职责
2015/04/08 职场文书
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python
微信小程序APP页面的之间的相互传递参数以及自定义组件
2022/04/19 Javascript
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技