vue使用Proxy实现双向绑定的方法示例
2019-04-11 09:17
686 查看
前言: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; } });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 使用es6的proxy实现vue的双向绑定
- vue.js使用v-model指令实现的数据双向绑定功能示例
- Vue 实现双向绑定的四种方法
- Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
- vue 双向数据绑定的实现学习之监听器的实现方法
- 用vue的双向绑定简单实现一个todo-list的示例代码
- Vue实现双向绑定的原理以及响应式数据的方法
- Vue数据双向绑定原理及简单实现方法
- Vue父子组件双向绑定传值的实现方法
- Vue 实现双向绑定的几种方法
- VUE JS 使用组件实现双向绑定的示例代码
- Vue实现双向绑定的方法
- VUE-Table上绑定Input通过render实现双向绑定数据的示例
- Vue实现双向绑定的原理以及响应式数据
- 如何解决FormView中实现DropDownList连动选择时出现 "Eval()、XPath() 和 Bind() 这类数据绑定方法只能在数据绑定控件的上下文中使用" 的错误
- 关于vue双向绑定的简单实现
- Vue原理剖析 实现双向绑定MVVM
- Vue中使用Froala Editor时,外部方法调用html.insert()插入内容到光标最后停留位置功能实现
- C#使用晚绑定来实现压缩Access数据库的方法
- springMVC使用HandlerMethodArgumentResolver 自定义解析器实现请求参数绑定方法参数