资讯专栏INFORMATION COLUMN

使用Proxy实现双向绑定

Yang_River / 3336人阅读

摘要:取出所有属性遍历不允许绑定在非对象上进行数组操作时,会进行两次一次数据改变,一次改变,两次改变的值是不变,因此不应该多分发一次消息通知订阅者

前言:vue3.0要用Proxy来实现双向绑定,因此先来尝试一下实现方法。

1 Object.defineProperty 实现
原来vue2的实现使用Object.defineProperty,监听set,但对于数组直接下标给数组设置值监听不了。

</>复制代码

  1. function observe(data) {
  2. if (!data || typeof data !== "object") {
  3. return;
  4. }
  5. // 取出所有属性遍历
  6. Object.keys(data).forEach(function(key) {
  7. defineReactive(data, key, data[key]);
  8. });
  9. };
  10. function defineReactive(data, key, val) {
  11. observe(val); // 监听子属性
  12. Object.defineProperty(data, key, {
  13. enumerable: true, // 可枚举
  14. configurable: false, // 不能再重写defineProperty
  15. get: function() {
  16. return val;
  17. },
  18. set: function(newVal) {
  19. console.log("-------通知订阅者--------")
  20. val = newVal;
  21. }
  22. });
  23. }

2 使用Proxy实现

使用Proxy实现原理主要是new一个Proxy对象,代理你的data值,需要注意的一点是,对于数组的方法操作来说,会产生两次赋值操作,一次是添加值,一次是改变他的length值,而对于Object.defineProperty监听不到的数组下标给数组设置值,Proxy是可以监听到的。

</>复制代码

  1. function observe(data) {
  2. if (!data || typeof data !== "object") {
  3. return;
  4. }
  5. // 取出所有属性遍历
  6. Object.keys(data).forEach(function(_k) {
  7. // Proxy不允许绑定在非对象上
  8. if (data[_k] && typeof data[_k] === "object") {
  9. data[_k] = defineReactive(data[_k]);
  10. }
  11. });
  12. }
  13. function defineReactive(data) {
  14. return new Proxy(data, {
  15. set(target, key, value, proxy) {
  16. // 进行数组操作时,会进行两次set 一次数据改变,一次length改变,两次改变data的值是不变,因此不应该多分发一次消息
  17. if (
  18. Object.prototype.toString.call(data) === "[object Array]" &&
  19. key === "length"
  20. ) {
  21. Reflect.set(target, key, value, proxy);
  22. return true;
  23. }
  24. observe(data);
  25. Reflect.set(target, key, value, proxy);
  26. console.log("-------通知订阅者--------")
  27. return true;
  28. }
  29. });

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/102694.html

相关文章

  • 使用 Proxy 实现简单的 MVVM 模型

    摘要:绑定实现的历史绑定的基础是事件。但脏检查机制随之带来的就是性能问题。是谷歌对于简化双向绑定机制的尝试,在中引入。挣扎了一段时间后谷歌团队宣布收回的提议,并在中完全删除了实现。自然全军覆没其他各大浏览器实现的时间也较晚。 绑定实现的历史 绑定的基础是 propertyChange 事件。如何得知 viewModel 成员值的改变一直是开发 MVVM 框架的首要问题。主流框架的处理有一下三...

    BetaRabbit 评论0 收藏0
  • 使用 Proxy 实现简单的 MVVM 模型

    摘要:绑定实现的历史绑定的基础是事件。但脏检查机制随之带来的就是性能问题。是谷歌对于简化双向绑定机制的尝试,在中引入。挣扎了一段时间后谷歌团队宣布收回的提议,并在中完全删除了实现。自然全军覆没其他各大浏览器实现的时间也较晚。 绑定实现的历史 绑定的基础是 propertyChange 事件。如何得知 viewModel 成员值的改变一直是开发 MVVM 框架的首要问题。主流框架的处理有一下三...

    MarvinZhang 评论0 收藏0
  • Vue3.0数据双向绑定Proxy探究

    摘要:只能劫持对象的属性因此我们需要对每个对象的每个属性进行遍历。属性对于怎么拼接到和上面说到了怎么使用做数据劫持,怎么结合订阅发布,请结合数据双向绑定探究对照着数据劫持的部分去替换看一下。 前言 2018年11月16日,关注vue的人都知道这个时间点发生了什么事儿吧。vue3.0更新内容 研究数据双向绑定的大佬们都在开始猜测这个新机制了,用原生Proxy替换Object.definePro...

    stormzhang 评论0 收藏0

发表评论

0条评论

Yang_River

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<