从0开始探究vue-双向绑定原理
理解
vue是一个非常优秀的框架，其优秀的双向绑定原理，mvvm模型，组件，路由解析器等，非常的灵活方便，也使开发者能够着重于数据处理，让开发者更清晰的设计自己的业务。
双向绑定，就是数据变化的时候，自动触发视图的变化。
实践
我们都理解，vue2.0中，双向绑定的核心为Object.defineProperty(obj, prop, descriptor),方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象
参数obj为要在其上定义属性的对象。
参数prop为要定义或修改的属性的名称。
参数descriptor为将被定义或修改的属性描述符。
返回被传递给函数的对象。
尝试Object.defineProperty拦截用户对变量的设置
我们可以新建一个项目，用来模拟及学习vue双向绑定的相关内容
+ vue相关
+ |- 双向绑定原理
+ |- js
+ |- myVue.js
+ |- index.html
修改index.html中的内容，引入自己创建的myVue.js。
+ <!DOCTYPE html>
+ <html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Document</title>
+ </head>
+ <body>
+
+ <script src="./js/myVue.js"></script>
+ </body>
+ </html>
编辑myVue.js的内容，来尝试一下Object.defineProperty(obj, prop, descriptor)这个API
+ var data = {
+ a: 1
+ }
+ Object.defineProperty(data, 'a', {// 为data中的a进行拦截，读取a的时候返回自己新建的_a的值，设置a的值的时候，设置到_a上。这样，开发者对a的操作，都会映射到我们新建的虚拟的_a变量上
+ configurable: true, // 是否允许删除属性，默认true
+ enumerable: true, // 是否允许遍历，默认true
+ get: function () {
+ console.log('我被读取了，返回了_a的值', this._a)
+ return this._a
+ },
+ set(value) {
+ // this.a = value;
+ this._a = value;
+ console.log('我被设置了，被设置的值为', this._a, '并放进了a的对象中')
+ }
+ })
在浏览器中，打开页面，并查看控制台，对data.a进行操作
data.a myVue.js:8
我被读取了，返回了_a的值 undefined
undefined
——————————————————————————————————————————————————————————————————————————————
data.a = 10 myVue.js:14
我被设置了，被设置的值为 10 并放进了a的对象中
10
——————————————————————————————————————————————————————————————————————————————
data.a myVue.js:8
我被读取了，返回了_a的值 10
10
可以看到，我们对data.a进行的操作，实际改变的变量是我们已经拦截的_a变量。
目前出现的问题是，第一次读取的时候，这个值没有被设置上，在下面来模拟解决方案
私有变量
声明概念_开头的变量一版为私有变量，外部无法访问，但是我们现在在控制台中输入并修改私有变量data._a
data._a
10
——————————————————————————————————————————————————————————————————————————————
data._a = 20
20
——————————————————————————————————————————————————————————————————————————————
data._a
20
——————————————————————————————————————————————————————————————————————————————
data.a myVue.js:8
我被读取了，返回了_a的值 20
20
却可以拿到私有变量中的_a的值，也可以进行无拦截的修改，这显然是我们所不希望的
所以我们可以为Object.defineProperty(obj, prop, descriptor)来进行封装一次，把我们理解的_a变成一个私有变量
修改myVue.js的内容为如下内容，
var data = {
a: 1
}
myDefineProperty(data, 'a')
function myDefineProperty(obj,key){//对Object.defineProperty进行一次拦截，使外界无法访问私有变量value
var value = obj[key];
Object.defineProperty(obj,key,{// 为data增加
configurable: true, // 是否允许删除属性，默认true
enumerable: true, // 是否允许遍历，默认true
get: function () {
console.log('我被读取了，返回了value的值', value)
return value
},
set(newValue) {
value = newValue;
console.log('我被设置了，被设置的值为', newValue, '并放进了value的对象中')
}
})
}
然后再查看控制台
data._a
undefined
——————————————————————————————————————————————————————————————————————————————
data.value
undefined
——————————————————————————————————————————————————————————————————————————————
data.a myVue.js:12
我被读取了，返回了value的值 1
1
——————————————————————————————————————————————————————————————————————————————
开发者就无法自行操作我们设计的私有变量value的内容了
自此，我们解决了，对一个对象属性的拦截，并且阻止了用户对我们设计的私有变量进行操作
双向绑定实践
我们知道了拦截属性之后，那么就进一步来实现，一个简单的双向绑定
我们修改一下index.html中的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
+ <input type="text" @change='changeIpt'>
+ <p id='changeValue'></p>
</head>
<body>
<script src="./js/myVue.js"></script>
</body>
</html>
并在myVue.js中，在set中添加双向绑定的操作
var data = {
a: 1
}
myDefineProperty(data, 'a')
+ var ipt = document.getElementById('ipt');
+ ipt.oninput = function(e){
+ data.a = e.target.value
+ }
function myDefineProperty(obj,key){
var value = obj[key];
Object.defineProperty(obj,key,{// 为data增加
configurable: true, // 是否允许删除属性，默认true
enumerable: true, // 是否允许遍历，默认true
get: function () {
console.log('我被读取了，返回了value的值', value)
return value
},
set(newValue) {
value = newValue;
+ document.getElementById('iptValue').innerText = newValue;
+ ipt.value = newValue;
console.log('我被设置了，被设置的值为', newValue, '并放进了value的对象中')
}
})
}
然后我们在input框里输入内容，便表现出了双向绑定的能力。
记得打开控制台哦！~下方为录制的屏幕，可能无法正常显示，可以点击上方demo来查看
觉得好的话，可以给我的 github点个star哦
从0开始探究vue-双向绑定原理的更多相关文章
- vue双向绑定原理分析
当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/jiangzhenf ...
- vue双向绑定原理及实现
vue双向绑定原理及实现 一.总结 一句话总结:vue中的双向绑定主要是通过发布者-订阅者模式来实现的 发布 订阅 1.单向绑定和双向绑定的区别是什么? model view 更新 单向绑定:mode ...
- Vue双向绑定原理（源码解析）---getter setter
Vue双向绑定原理 大部分都知道Vue是采用的是对象的get 和set方法来实现数据的双向绑定的过程,本章将讨论他是怎么利用他实现的. vue双向绑定其实是采用的观察者模式,get和s ...
- [Vue源码]一起来学Vue双向绑定原理-数据劫持和发布订阅
有一段时间没有更新技术博文了,因为这段时间埋下头来看Vue源码了.本文我们一起通过学习双向绑定原理来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫 ...
- Vue双向绑定原理，教你一步一步实现双向绑定
当今前端天下以 Angular.React.vue 三足鼎立的局面,你不选择一个阵营基本上无法立足于前端,甚至是两个或者三个阵营都要选择,大势所趋. 所以我们要时刻保持好奇心,拥抱变化,只有在不断的变 ...
- vue 学习二 深入vue双向绑定原理
vue双向绑定原理 请示总体来讲 就是为data的中的每个属性字段添加一个getter/seter属性 以此来追踪数据的变化,而执行这部操作,依赖的就是js的Object.defineProperty ...
- vue双向绑定原理
要了解vue的双向绑定原理,首先得了解Object.defineProperty()方法,因为访问器属性是对象中的一种特殊属性,它不能直接在对象中设置,而必须通过 Object.definePrope ...
- Vue双向绑定原理及其实现
在之前面试的时候被面试官问到是否了解Vue双向绑定的原理,其实自己之前看过双向绑定的原理,但也就是粗略的了解,但是没有深入.面试官当时让我手写一个原理,但是就蒙了
- 通俗易懂了解Vue双向绑定原理及实现
看到一篇文章,觉得写得挺好的,拿过来给大家分享一下,刚好解答了一些困扰我的一些疑惑!!! 1. 前言 每当被问到Vue数据双向绑定原理的时候,大家可能都会脱口而出:Vue内部通过Object.defi ...
随机推荐
- Scrapy - Request 中的回调函数callback不执行
回调函数callback不执行 大概率是被过滤了 两种方法: 在 allowed_domains 中加入目标url 在 scrapy.Request() 函数中将参数 dont_filter=True ...
- XSS检测总结
XSS漏洞介绍 跨站脚本XSS是一种针对网站应用程序的安全漏洞攻击技术.恶意攻击者往web页面插入恶意的Script代码,当用于浏览该页时,嵌入web中的恶意代码就会被执行,从而达到恶意攻击用 ...
- 【杂谈】Disruptor——RingBuffer问题整理（一）
纯CAS为啥比加锁要快? 同样是修改数据,一个采用加锁的方式保证原子性,一个采用CAS的方式保证原子性. 都是能够达到目的的,但是常用的锁(例如显式的Lock和隐式的synchonized),都会把获 ...
- C# 中 枚举Enum 一些转换的方法整理
工作中 经常遇到枚举 的一些转换 特别是获取枚举备注等 特地整理下 方法以后使用 public void TestMethod1() { TestEnumOne colorEnum = TestE ...
- 【Scala】新手入门，基础语法概览
目录 变量.常量和数据类型 var val 数据类型 条件表达式 块表达式 to循环 for循环 for推导式 scala中的方法和函数 方法的定义 函数的定义 函数和方法的区别 变量.常量和数据类型 ...
- java读取文件内容常见几种方式
①随机读取文件内容 ②以行为单位读取文件,常用于读面向行的格式化文件 ③以字符为单位读取文件,常用于读文本,数字等类型的文件 ④以字节为单位读取文件,常用于读二进制文件,如图片.声音.影像等文件 pa ...
- Nginx服务器的安装和卸载
Nginx的安装 安装Nginx之前,需要先获取Nginx的安装文件.我们可以在http://nginx.org/en/download.html获取各个版本的Nginx安装文件.大家可以按照自己的需 ...
- 「雕爷学编程」Arduino动手做（30）——光敏二极管模块
37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器和模块,依照实践出真知(动手做)的理念,以学习和交流为目的,这里准备逐 ...
- css中height, width默认值
转载自:https://www.cnblogs.com/heyode/p/5973960.html <body> <div class="wrap"> &l ...
- 14.1 Go数据结构
14.1 Go数据结构 每一个程序都在学习十八般武艺,学习语言.数据库.HTTP等技能. 而程序中的九阳神功就是数据结构与算,掌握了数据结构与算法,你的内功修炼就会有质的飞跃. 无论从事业务开发,测评 ...