首页 / VUE / ES6 Proxy实现Vue的变化检测问题

ES6 Proxy实现Vue的变化检测问题

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了ES6 Proxy实现Vue的变化检测问题，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含10840字，纯文字阅读大概需要16分钟。

内容图文

Vue变化检测Object使用DefineProperty、数组使用方法拦截实现。最近，Vue3.0将采用ES6 Proxy的形式重新实现Vue的变化检测，在官方还没给出新方法之前，我们先实现一个基于Proxy的变化检测。

模块划分

参照之前Vue变化检测的代码，将Vue 变化检测的功能分为以下几个部分。

Observer
Dep
Watcher
Utils

首先，我们要确定的问题是，将Dep依赖搜集存在哪里。Vue 2.x里，Object的依赖收集放在defineRactive，Array的依收集存入到Observer中。ES6 Proxy里，考虑到让handler访问dep，我们将依赖放入到Observer中。

Observer

observer.js功能代码如下：

import Dep from './dep';
import { isObject } from './utils';
export default class Observer {
  constructor (value) {
    // 递归处理子元素
    this.obeserve(value);
    // 实现当前元素的代理
    this.value = this.proxyTarget(value);
  }
  proxyTarget (targetBefore, keyBefore) {
    const dep = new Dep();
    targetBefore.__dep__ = dep;
    let self = this;
    const filtersAtrr = val => ['__dep__', '__parent__'].indexOf(val) > -1;
    return new Proxy(targetBefore, {
      get: function(target, key, receiver){
        if (filtersAtrr(key)) return Reflect.get(target, key, receiver);
        if (!Array.isArray(target)) {
          dep.depend(key);
        }
        // sort/reverse等不改变数组长度的，在get里触发
        if (Array.isArray(target)) {
          if ((key === 'sort' || key === 'reverse') && target.__parent__) {
            target.__parent__.__dep__.notify(keyBefore);
          }
        } 
        return Reflect.get(target, key, receiver);
      },
      set: function(target, key, value, receiver){
        if (filtersAtrr(key)) return Reflect.set(target, key, value, receiver);
        // 新增元素，需要proxy
        const { newValue, isChanged } = self.addProxyTarget(value, target, key, self);
        // 设置key为新元素
        Reflect.set(target, key, newValue, receiver);
        // notify
        self.depNotify(target, key, keyBefore, dep, isChanged);
        return true;
      },
    });
  }
  addProxyTarget(value, target, key, self) {
    let newValue = value;
    let isChanged = false;
    if (isObject(value) && !value.__parent__) {
      self.obeserve(newValue);
      newValue = self.proxyTarget(newValue, key);
      newValue.__parent__ = target;
      isChanged = true;
    }
    return {
      newValue,
      isChanged,
    }
  }
  depNotify(target, key, keyBefore, dep, isChanged) {
    if (isChanged && target.__parent__) {
      target.__parent__.__dep__.notify(keyBefore);
      return;
    }
    if (Array.isArray(target)) {
      if (key === 'length' && target.__parent__) {
        target.__parent__.__dep__.notify(keyBefore);
      }
    } else {
      dep.notify(key);
    }
  }
  obeserve(target) {
    // 只处理对象类型，包括数组、对象
    if (!isObject(target)) return;
    for (let key in target) {
      if (isObject(target[key]) && target[key] !== null) {
        this.obeserve(target[key]);
        target[key] = this.proxyTarget(target[key], key);
        // 设置__parent__,方便子元素调用
        target[key].__parent__ = target;
      }
    }
  }
}

在Observer中，针对对象，只需要执行 dep.depend(key) 、 dep.notify(key) 即可。添加 key 是为了能正确的触发收集，不知道怎么说明白为什么要这样做，只能一切尽在不言中了。

Array, 如何实现依赖的收集和触发那。依赖收集与Object类似， dep.depend(key) 完成数组的收集。关于触发，可以分为两个方面，一是改变数组长度、二未改变数组长度的。改变数组长度的，在set里，通过长度属性的设置触发父级元素的notify。为什么要使用父级元素的notify那？我们可以分析以下，在你设置数组的长度时，这时候的target\key\value分别是[]\length*, 这个时候，数组的依赖收集是没有的，你watcher的是数组，并不是数组本身。这个时候只能通过 target.__parent__.__dep__.notify(keyBefore) 触发父级的收集，完成数据变化的检测。二对于未改变数组长度的，这里的做法，虽然是直接 target.__parent__.__dep__.notify(keyBefore) 触发依赖，但是有个严重的问题，实际上更新的数据不是最新的，这个地方暂时还没想到比较好的方法，欢迎大家讨论。

Dep

Dep.js

let uid = 0;
export default class Dep {
  constructor () {
    this.subs = {};
    this.id = uid++;
  }
  addSub(prop, sub) {
    this.subs[prop] = this.subs[prop] || [];
    this.subs[prop].push(sub);
  }
  removeSub(prop, sub) {
    this.remove(this.subs[prop] || [], sub);
  }
  depend(prop) {
    if (Dep.target) {
      // 传入的是当前依赖
      Dep.target.addDep(prop, this)
    }
  }
  notify(prop) {
    const subs = (this.subs[prop] || []).slice();
    for (let i = 0, l = subs.length; i < l; i++) {
      subs[i].update();
    }
  }
  remove(arr, item) {
    if (arr.length) {
      const index = arr.indexOf(item);
      if (index > -1) {
        return arr.splice(index, 1);
      }
    }
  }
}
Dep.target = null
const targetStack = []
export function pushTarget (_target) {
  if (Dep.target) targetStack.push(Dep.target)
  Dep.target = _target
}
export function popTarget () {
  Dep.target = targetStack.pop()
}

dep 添加prop实现类型的绑定，为什么要这么做那？使用proxy代理后，你假如wahcter对象下的几个元素，此时的deps将同时存在这几个元素，你触发依赖的时候，这些依赖都会执行。因此，通过key值绑定观察事件，触发时，能完成对象的正确触发。

watcher、utils

import { parsePath } from './utils';
import { pushTarget, popTarget } from './dep'
export default class Watcher {
  constructor(vm, expOrFn, cb) {
    // dep id集合
    this.depIds = new Set();
    this.vm = vm;
    this.getter = parsePath(expOrFn);
    this.cb = cb;
    this.value = this.get();
  }
  get () {
    pushTarget(this);
    let value = this.getter.call(this.vm, this.vm);
    popTarget();
    return value;
  }
  update() {
    const oldValue = this.value;
    this.value = this.get();
    this.cb.call(this.vm, this.value, oldValue);
  }
  addDep (prop, dep) {
    const id = dep.id;
    if (!this.depIds.has(id)) {
      this.depIds.add(id);
      dep.addSub(prop, this);
    }
  }
}

utils.js

/**
 * 解析简单路径
 */
const bailRE = /[^\w.$]/;
export function parsePath (path) {
  if (bailRE.test(path)) {
    return;
  }
  const segments = path.split('.');
  return function (obj) {
    for (let i = 0; i < segments.length; i++) {
      if (!obj) return;
      obj = obj[segments[i]];
    }
    return obj;
  };
}
/**
 * Define a property.
 */
export function def (obj, key, val, enumerable) {
  Object.defineProperty(obj, key, {
    value: val,
    enumerable: !!enumerable,
    writable: true,
    configurable: true
  })
}
/**
 * Quick object check - this is primarily used to tell
 * Objects from primitive values when we know the value
 * is a JSON-compliant type.
 */
export function isObject (obj) {
  return obj !== null && typeof obj === 'object'
}
/**
 * Check whether an object has the property.
 */
const hasOwnProperty = Object.prototype.hasOwnProperty
export function hasOwn (obj, key) {
 return hasOwnProperty.call(obj, key)
}

Utils.js/Watchers.js与Vue 2.x类似，这里就不多介绍了。

测试一下

test.js

import Observer from './observer';
import Watcher from './watcher';
let data = {
  name: 'lijincai',
  password: '***********',
  address: {
    home: '安徽亳州谯城区',
  },
  list: [{
    name: 'lijincai',
    password: 'you know it Object',
  }], 
};
const newData = new Observer(data);
let index = 0;
const watcherName = new Watcher(newData, 'value.name', (newValue, oldValue) => {
  console.log(`${index++}: name newValue:`, newValue, ', oldValue:', oldValue);
});
const watcherPassword = new Watcher(newData, 'value.password', (newValue, oldValue) => {
  console.log(`${index++}: password newValue:`, newValue, ', oldValue:', oldValue);
});
const watcherAddress = new Watcher(newData, 'value.address', (newValue, oldValue) => {
  console.log(`${index++}: address newValue:`, newValue, ', oldValue:', oldValue);
});
const watcherAddressHome = new Watcher(newData, 'value.address.home', (newValue, oldValue) => {
  console.log(`${index++}: address.home newValue:`, newValue, ', oldValue:', oldValue);
});
const watcherAddProp = new Watcher(newData, 'value.addProp', (newValue, oldValue) => {
  console.log(`${index++}: addProp newValue:`, newValue, ', oldValue:', oldValue);
});
const watcherDataObject = new Watcher(newData, 'value.list', (newValue, oldValue) => {
  console.log(`${index++}: newValue:`, newValue, ', oldValue:', oldValue);
});
newData.value.name = 'resetName';
newData.value.password = 'resetPassword';
newData.value.name = 'hello world name';
newData.value.password = 'hello world password';
newData.value.address.home = 'hello home';
newData.value.address.home = 'hello home2';
newData.value.addProp = 'hello addProp';
newData.value.addProp ={
  name: 'ceshi',
};
newData.value.addProp.name = 'ceshi2';
newData.value.list.push('1');
newData.value.list.splice(0, 1);
newData.value.list.sort();
newData.value.list.reverse();
newData.value.list.push('1');
newData.value.list.unshift({name: 'nihao'});
newData.value.list[0] = {
  name: 'lijincai',
  password: 'you know it Array',
};
newData.value.list[0].name = 'you know it array after';
newData.value.list.pop();
newData.value.list.shift();
newData.value.list.length = 1;

我们使用对象、数组测试一下我们的ES6 Proxy检测。

20:17:44.725 index.js?afc7:20 0: name newValue: resetName , oldValue: lijincai
20:17:44.725 index.js?afc7:24 1: password newValue: resetPassword , oldValue: ***********
20:17:44.725 index.js?afc7:20 2: name newValue: hello world name , oldValue: resetName
20:17:44.725 index.js?afc7:24 3: password newValue: hello world password , oldValue: resetPassword
20:17:44.726 index.js?afc7:32 4: address.home newValue: hello home , oldValue: 安徽亳州谯城区
20:17:44.726 index.js?afc7:32 5: address.home newValue: hello home2 , oldValue: hello home
20:17:44.726 index.js?afc7:36 6: addProp newValue: hello addProp , oldValue: undefined
20:17:44.727 index.js?afc7:36 7: addProp newValue: Proxy {name: "ceshi", __dep__: Dep, __parent__: {…}} , oldValue: hello addProp
20:17:44.727 index.js?afc7:40 0: newValue: Proxy {0: Proxy, 1: "1", __dep__: Dep, __parent__: {…}} , oldValue: Proxy {0: Proxy, 1: "1", __dep__: Dep, __parent__: {…}}
20:17:44.728 index.js?afc7:40 1: newValue: Proxy {0: "1", __dep__: Dep, __parent__: {…}} , oldValue: Proxy {0: "1", __dep__: Dep, __parent__: {…}}
20:17:44.729 index.js?afc7:40 2: newValue: Proxy {0: "1", __dep__: Dep, __parent__: {…}} , oldValue: Proxy {0: "1", __dep__: Dep, __parent__: {…}}
20:17:44.731 index.js?afc7:40 3: newValue: Proxy {0: "1", __dep__: Dep, __parent__: {…}} , oldValue: Proxy {0: "1", __dep__: Dep, __parent__: {…}}
20:17:44.734 index.js?afc7:40 4: newValue: Proxy {0: "1", 1: "1", __dep__: Dep, __parent__: {…}} , oldValue: Proxy {0: "1", 1: "1", __dep__: Dep, __parent__: {…}}
20:17:44.735 index.js?afc7:40 5: newValue: Proxy {0: Proxy, 1: "1", 2: "1", __dep__: Dep, __parent__: {…}} , oldValue: Proxy {0: Proxy, 1: "1", 2: "1", __dep__: Dep, __parent__: {…}}
20:17:44.735 index.js?afc7:40 6: newValue: Proxy {0: Proxy, 1: "1", 2: "1", __dep__: Dep, __parent__: {…}} , oldValue: Proxy {0: Proxy, 1: "1", 2: "1", __dep__: Dep, __parent__: {…}}
20:17:44.736 index.js?afc7:40 7: newValue: Proxy {0: Proxy, 1: "1", 2: "1", __dep__: Dep, __parent__: {…}} , oldValue: Proxy {0: Proxy, 1: "1", 2: "1", __dep__: Dep, __parent__: {…}}
20:17:44.737 index.js?afc7:40 8: newValue: Proxy {0: Proxy, 1: "1", __dep__: Dep, __parent__: {…}} , oldValue: Proxy {0: Proxy, 1: "1", __dep__: Dep, __parent__: {…}}
20:17:44.738 index.js?afc7:40 9: newValue: Proxy {0: "1", __dep__: Dep, __parent__: {…}} , oldValue: Proxy {0: "1", __dep__: Dep, __parent__: {…}}
20:17:44.738 index.js?afc7:40 10: newValue: Proxy {0: "1", __dep__: Dep, __parent__: {…}} , oldValue: Proxy {0: "1", __dep__: Dep, __parent__: {…}}

我们看到了ES6 Proxy后实现了Object/Array的检测，虽然还存在一些问题，但是基本的侦测变化的功能都已经具备了。

总结

以上所述是小编给大家介绍的ES6 Proxy实现Vue的变化检测问题,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

内容总结

以上是互联网集市为您收集整理的ES6 Proxy实现Vue的变化检测问题全部内容，希望文章能够帮你解决ES6 Proxy实现Vue的变化检测问题所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/331237.html

来源：【匿名】

【上一篇】vue.js中导出Excel表格的案例分析【下一篇】php怎么返回数据给vue

更多 ►

【ES6 Proxy实现Vue的变化检测问题】教程文章相关的互联网学习教程文章

如何操作Vue做出proxy代理

这次给大家带来如何操作Vue做出proxy代理，操作Vue做出proxy代理的注意事项有哪些，下面就是实战案例，一起来看一下。Vue 框架开发的时候，会遇到跨域的问题，可在config/index.js 里配置proxyTable内容，使用proxy 代理。// config/index.js 文件 proxyTable: {/api: {target: http://192.168.149.90:8080/, // 设置你调用的接口域名和端口号changeOrigin: true, // 跨域pathRewrite: {^/api: / }}},这里理解成用‘/api代替...

怎样使用Vue实现proxy代理

这次给大家带来怎样使用Vue实现proxy代理，使用Vue实现proxy代理的注意事项有哪些，下面就是实战案例，一起来看一下。// config/index.js 文件 proxyTable: {/api: {target: http://192.168.149.90:8080/, // 设置你调用的接口域名和端口号changeOrigin: true, // 跨域pathRewrite: {^/api: / }}},这里理解成用‘/api代替target里面的地址，后面组件中我们掉接口时直接用api代替比如我要调用http://192.168.149.90:8080/xxx...

Vue实现proxy代理步骤详解

这次给大家带来Vue实现proxy代理步骤详解，Vue实现proxy代理的注意事项有哪些，下面就是实战案例，一起来看一下。Vue 框架开发的时候，会遇到跨域的问题，可在config/index.js 里配置proxyTable内容，使用proxy 代理。// config/index.js 文件 proxyTable: {/api: {target: http://192.168.149.90:8080/, // 设置你调用的接口域名和端口号changeOrigin: true, // 跨域pathRewrite: {^/api: / }}},这里理解成用‘/api代替targ...

解决vue中使用proxy配置不同端口和ip接口问题

问题描述：使用vue-cli创建的项目，开发地址是localhost:8080，由于后台开发不同的模块，导致每个模块请求的ip和端口号不一致例如：http://192.168.10.22:8081 或者 http://192.168.10.30:9999等解决问题：在vue.config.js中配置不同的端口号 module.exports = {publicPath: process.env.NODE_ENV === production ? ./ : /,devServer: {open: true,proxy: {/monitor: {　　　　　　　　　　　　　　　　　　　　　　　　　　// 配...

ES6 Proxy实现Vue的变化检测问题

Vue变化检测Object使用DefineProperty、数组使用方法拦截实现。最近，Vue3.0将采用ES6 Proxy的形式重新实现Vue的变化检测，在官方还没给出新方法之前，我们先实现一个基于Proxy的变化检测。模块划分参照之前Vue变化检测的代码，将Vue 变化检测的功能分为以下几个部分。 ObserverDepWatcherUtils首先，我们要确定的问题是，将Dep依赖搜集存在哪里。Vue 2.x里，Object的依赖收集放在defineRactive，Array的依收集存入到Observer中。...

Vue使用Proxy监听所有接口状态的方法实现【图】

在开发项目过程中几乎所有接口都需要知道它的返回状态，比如失败或者成功，在移动端通常后台会返回结果，而我们只需要一个弹窗来弹出来结果就可以了。但是这个弹窗如果在整个项目里需要手动去每一个都定义，那是非常庞大的代码量，而且维护起来非常的麻烦。通常做法就是绑定在原型上一个公共方法，比如this.message(后台返回接口信息)。这样看似省力了很多其实还是很麻烦。如果使用了proxy做一个全局代理，那么就完全不一样了。不...

vue使用Proxy实现双向绑定的方法示例

前言：vue3.0要用Proxy来实现双向绑定，因此先来尝试一下实现方法。 1 Object.defineProperty 实现原来vue2的实现使用Object.defineProperty，监听set，但对于数组直接下标给数组设置值监听不了。 function observe(data) {if (!data || typeof data !== object) {return;}// 取出所有属性遍历Object.keys(data).forEach(function(key) {defineReactive(data, key, data[key]);}); };function defineReactive(data, key, val) {obs...

初探Vue3.0 中的一大亮点Proxy的使用

前言不久前，也就是11月14日-16日于多伦多举办的 VueConf TO 2018 大会上，尤雨溪发表了名为 Vue3.0 Updates 的主题演讲，对 Vue3.0 的更新计划、方向进行了详细阐述，表示已经放弃使用了 Object.defineProperty，而选择了使用更快的原生 Proxy !! 这将会消除了之前 Vue2.x 中基于 Object.defineProperty 的实现所存在的很多限制：无法监听属性的添加和删除、数组索引和长度的变更，并可以支持 Map、Set、WeakMap 和 WeakSet！做...

浅析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(data) } //修改数据的getter和setter function defineReactive(obj, key...

使用proxy实现一个更优雅的vue【推荐】

如果你有读过Vue的源码，或者有了解过Vue的响应原理，那么你一定知道Object.defineProperty(), 那么你也应该知道，Vue 2.x里，是通过递归 + 遍历 data 对象来实现对数据的监控的，你可能还会知道，我们使用的时候，直接通过数组的下标给数组设置值，不能实时响应，是因为Object.defineProperty() 无法监控到数组下标的变化，而我们平常所用的数组方法 push , pop , shift , unshift , splice , sort , reverse , 其实不是真正的数...

Vue中如何实现proxy代理

Vue 框架开发的时候，会遇到跨域的问题，可在config/index.js 里配置proxyTable内容，使用proxy 代理。 // config/index.js 文件 proxyTable: {/api: {target: http://192.168.149.90:8080/, // 设置你调用的接口域名和端口号changeOrigin: true, // 跨域pathRewrite: {^/api: / }}}, 这里理解成用‘/api代替target里面的地址，后面组件中我们掉接口时直接用api代替比如我要调用http://192.168.149.90:8080/xxx/duty?time=2...

(二)01 -JavaScript 数据劫持——观察数据的变化 & Vue3 升级使用 Proxy【代码】【图】

JavaScript 数据劫持——观察数据的变化 & Vue 3 会升级使用 Proxy数据劫持？ Observer 数据观察数据拦截器如何实现修改一个对象成员就修改了DOM？ const data = {message: 'Hello World' }// 监视 data.message 的改变 // watch('data.message', () => { // dom.xxx = xxx // })data.message = 'hello'// data.message = xxx 不仅仅对数据进行了修改，还操作了 DOM// 答案是：JavaScript 数据劫持，或者说是 JavaScript 对象属...

Vue.js的Object.defineProperty对比Proxy，究竟差在哪里？【代码】【图】

Vue.js 区别于 React 的一大特色是它的数据是响应式的，这个特性从 Vue.js 1.x 版本就一直伴随着，这也是 Vue.js 粉喜欢 Vue.js 的原因之一，DOM 是数据的一种映射，数据发生变化后可以自动更新 DOM，用户只需要专注于数据的修改，没有其余的心智负担。在 Vue.js 内部，想实现这个功能是要付出一定代价的，那就是必须劫持数据的访问和更新。其实这点很好理解，当数据改变后，为了自动更新 DOM，那么就必须劫持数据的更新，也就是说...

webpack配置-devServer详细配置-proxy跨域（vue+react都可以使用的跨域代理方式）【代码】

webpack配置-devServer详细配置-proxy跨域（vue+react都可以使用的跨域代理方式）比较上一篇博客的webpack.config.js文件仅更新了resolve对象；webpack配置-resolve常用配置. const { resolve } = require("path");// 路径处理 const htmlWebpackPligins = require("html-webpack-plugin");// html模板 const { CleanWebpackPlugin } = require("clean-webpack-plugin")// 清空上次打包内容 /* entry: 入口起点1.string --> "./sr...

Vue中Object.defineProperty()缺点和Proxy优势

Vue2.X通过Object.defineProperty()来劫持各个属性的setter，getter，新版本通过Proxy劫持属性Proxy优势支持数组，其实还不止 Object.defineProperty() 的问题主要有三个：不能监听数组的变化必须遍历对象的每个属性必须深层遍历嵌套的对象1、数据规模是否庞大。创建Vue实例的时候，一旦对象是一个深层的引用（老千层饼了），递归进行Observer的创建显然会花很多时间； 2、对所有属性的变化进行监听，也需要消耗不小的内存； 3...

首页 / VUE / ES6 Proxy实现Vue的变化检测问题

ES6 Proxy实现Vue的变化检测问题

内容导读

内容图文

内容总结

内容备注

内容手机端

【ES6 Proxy实现Vue的变化检测问题】教程文章相关的互联网学习教程文章

如何操作Vue做出proxy代理

怎样使用Vue实现proxy代理

Vue实现proxy代理步骤详解

解决vue中使用proxy配置不同端口和ip接口问题

ES6 Proxy实现Vue的变化检测问题

Vue使用Proxy监听所有接口状态的方法实现【图】

vue使用Proxy实现双向绑定的方法示例

初探Vue3.0 中的一大亮点Proxy的使用

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

使用proxy实现一个更优雅的vue【推荐】

Vue中如何实现proxy代理

(二)01 -JavaScript 数据劫持——观察数据的变化 & Vue3 升级使用 Proxy【代码】【图】

Vue.js的Object.defineProperty对比Proxy，究竟差在哪里？【代码】【图】

webpack配置-devServer详细配置-proxy跨域（vue+react都可以使用的跨域代理方式）【代码】

Vue中Object.defineProperty()缺点和Proxy优势

VUE - 相关标签

ES6 - 相关标签

VUE - 技术教程分类

VUE - 最新教程

VUE - 最热教程