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

 更新时间:2019年03月20日 10:41:18   作者:fuqihan  
这篇文章主要介绍了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) {
 observe(val); // 监听子属性
 Object.defineProperty(data, key, {
   enumerable: true, // 可枚举
   configurable: false, // 不能再重写defineProperty
   get: function() {
     return val;
   },
   set: function(newVal) {
     console.log('-------通知订阅者--------')
     val = newVal;
   }
 });
}

2 使用Proxy实现

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

function observe(data) {
  if (!data || typeof data !== 'object') {
    return;
  }
  // 取出所有属性遍历
  Object.keys(data).forEach(function(_k) {
    // Proxy不允许绑定在非对象上
    if (data[_k] && typeof data[_k] === 'object') {
      data[_k] = defineReactive(data[_k]);
    }
  });
}

function defineReactive(data) {
 return new Proxy(data, {
  set(target, key, value, proxy) {
    // 进行数组操作时,会进行两次set 一次数据改变,一次length改变,两次改变data的值是不变,因此不应该多分发一次消息
   if (
    Object.prototype.toString.call(data) === "[object Array]" &&
    key === "length"
   ) {
    Reflect.set(target, key, value, proxy);
    return true;
   }
   observe(data);
   Reflect.set(target, key, value, proxy);
   console.log('-------通知订阅者--------')
   return true;
  }
 });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • vue 导航锚点_点击平滑滚动,导航栏对应变化详解

    vue 导航锚点_点击平滑滚动,导航栏对应变化详解

    这篇文章主要介绍了vue 导航锚点_点击平滑滚动,导航栏对应变化详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vite2.0 踩坑实录

    vite2.0 踩坑实录

    本文主要介绍了vite2.0 踩坑,记录了一些在配置项目中遇到的问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-07-07
  • Vue自定义属性实例分析

    Vue自定义属性实例分析

    这篇文章主要介绍了Vue自定义属性,结合实例形式分析了vue.js自定义属性相关原理、实现方法及操作注意事项,需要的朋友可以参考下
    2019-02-02
  • Vue利用canvas实现移动端手写板的方法

    Vue利用canvas实现移动端手写板的方法

    本篇文章主要介绍了Vue利用canvas实现移动端手写板的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • Vue实现商品飞入购物车效果(电商项目)

    Vue实现商品飞入购物车效果(电商项目)

    这篇文章主要介绍了Vue实现商品飞入购物车效果(电商项目),这种效果在一些电商平台经常会用到,今天小编通过代码详解,需要的朋友可以参考下
    2019-11-11
  • 解决element DateTimePicker+vue弹出框只显示小时

    解决element DateTimePicker+vue弹出框只显示小时

    这篇文章主要介绍了解决element DateTimePicker+vue弹出框只显示小时,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • Vue2.0 ES6语法降级ES5的操作

    Vue2.0 ES6语法降级ES5的操作

    这篇文章主要介绍了Vue2.0 ES6语法降级ES5的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • vue移动UI框架滑动加载数据的方法

    vue移动UI框架滑动加载数据的方法

    这篇文章主要介绍了vue移动UI框架滑动加载的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • vue.js轮播图组件使用方法详解

    vue.js轮播图组件使用方法详解

    这篇文章主要为大家详细介绍了vue.js轮播图组件使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • 使用Vue自定义指令实现Select组件

    使用Vue自定义指令实现Select组件

    这篇文章主要介绍了使用Vue自定义指令实现Select组件,如果哪位朋友对vue自定义指令不是多了解的话,此篇文章会对你有所帮助的,需要的朋友可以参考下
    2018-05-05

最新评论