初识:

实际上是通过Object.defineProperty()方法来实现的
talk is cheap, show your code

let obj = {};
Object.defineProperty(obj, 'name', {get(){return document.querySelector('#name').innerHTML;},set(newVal){document.querySelector('#name').innerHTML = val;}
})// 注1: 以上代码,将dom中id为name的值与obj.name属性绑定.
// 注2: 当在js文件中调用obj.name时,会触发obj的get函数(返回html内容)
// 注3: 当调用obj.name = xxx 时,会调用 obj 的set方法

封装:

知道了基本原理后,下一步是要将其封装起来!

// 首先创建一个Lz类.
class Lz{constructor(options){// 将传入的数据保存this.$options = options;// 数据响应化this.$data = options.data;this.observe(this.$data);}// 说明:// 将数据保存到this.$data中// observe函数用于给每一个数据添加set和get方法observe(value){if(!value || typeof value !== 'object'){return;}// 遍历该对象Object.keys(value).forEach(key =>{this.defineReactive(value, key, value[key])})}// 给数据添加响应式defineReactive(obj, key, val){Object.defineProperty(obj, key,{get(){return val},set(newVal){if(val === newVal) return;// 处理更新事件,此处使用console.log实现console.log(`数据更新辣: ${val} --- > ${newVal}`);val = newVal;}})}
}

引用Lz类

在html中通过script标签导入Lz类

<body><div id="app"></div><script src="./lz.js"></script><script>const app = new Lz({el:'#app',data:{foo:'bar',hello:{world:'您好,世界'}}})</script>
</body>

打开浏览器,在控制台输入app.$data.foo
尝试改变app.$data.foo的值
尝试改变app.$data.hello.world的值

浅拷贝

以上,对第一个属性foo的操作成功的触发了set函数.
由于浅拷贝复制的是引用,我们对对象的修改无法触发set.
简单的理解就是set只负责监听自己这一层的变化,下一层的变化.不予监听
解决办法,使用递归.给每一层添加一个setter方法.代码如下
只需在defineReactive里面对world对象设置set和get
重写defineReactive方法

defineReactive(obj, key, val){// 解决浅拷贝问题this.observe(val);Object.defineProperty(obj, key, {get(){return val;},set(newVal){if(newVal === val){return;}console.log(`${key}属性更新: ${val} --- > ${newVal}`);val = newVal;}})
}

vue --- 2.0数据的响应式的一种实现相关推荐

vue 数组指定位置添加数据_VUE 响应式原理源码：带你一步精通 VUE | 原力计划...
作者 | 爱编程的小和尚责编 | 王晓曼出品 | CSDN博客学过 VUE 如果不了解响应式的原理,怎么能说自己熟练使用 VUE,要是没有写过一个简易版的 VUE 怎么能说自己精通 VUE,这篇 ...
016_Vue数组数据的响应式处理
1. 数组数据的响应式处理 1.1. 第一个参数表示要处理的数组名称; 第二个参数表示要处理的数组索引; 第三个参数表示要处理的数组的值. Vue.set(vm.list, index, newVal ...
细说 Vue.js 3.2 关于响应式部分的优化
大家好,我是若川.上一篇写的是:初学者也能看懂的 Vue3 源码中那些实用的基础工具函数.今天再分享一篇 Vue 3.2 的文章. 学习源码整体架构系列.年度总结.JS基础系列背景 Vue 3 正式 ...
Vue.js 框架源码与进阶 - Vue.js 源码剖析 - 响应式原理
文章目录一.准备工作 1.1 Vue 源码的获取 1.2 源目录结构 1.3 了解 Flow 1.4 调试设置 1.5 Vue 的不同构建版本 1.6 寻找入口文件 1.7 从入口开始二.Vue ...
Vue.set()实现数据动态响应
2019独角兽企业重金招聘Python工程师标准>>> this.$set()和Vue.set()本质方法一样,前者可以用在methods中使用. 在vue里面,我们操作最多的就是各 ...
vue 数组转集合_思想实验：如何在Vue中使localStorage具有响应式？
响应式是Vue的最大特色之一.如果你不知道幕后情况,它也是最神秘的地方之一.例如,为什么它不能用于对象和数组,而不能用于诸如 localStorage 之类的其他东西? 让我们回答这个问题,在解决这个 ...
vue新增属性是否会响应式更新?
原文地址在开发过程中,我们时常会遇到这样一种情况:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的. 根据官 ...
浅谈vue 之双向绑定和响应式（vue的响应式）
初识vue小伙伴通常都会被他的双向绑定所感叹,神奇?方便?而且在不少的面试中也会被面试官问到,上来就是:请问vue双向绑定的原来是什么?我们就来研究研究这是个什么东西: v-model 官方其实已经说 ...
vue总结系列--数据驱动和响应式
在公司里帮项目组里开发后台系统的前端项目也有一段时间了. vue这种数据驱动,组件化的框架和react很像, 从一开始的快速上手基本的开发,到后来开始自定义组件,对element UI的组件二次封装以 ...

vue --- 2.0数据的响应式的一种实现

初识:

封装:

引用Lz类

浅拷贝

vue --- 2.0数据的响应式的一种实现相关推荐

最新文章

热门文章