直接进入主题了,想必大家都知道实现vue响应式核心方法就是 Object.defineProperty
,那就从它开始说
Object.defineProperty
缺点:
- 深度监听,需要递归到底,一次性计算量大
- 无法监听新增、删除属性(需要vue.set 和 vue.delete)
- 无法原生监听数组,需要特殊处理
实现响应式
function updateView () {
console.log('视图更新')
}
// 重新定义数组原型
const oldArrayProperty = Array.prototype
// 创建新对象原型指向 Array.prototype,在扩展新的方法不会影响原型
const arrProto = Object.create(oldArrayProperty);
['push', 'pop', 'shift', 'unshift', 'splice'].forEach(methodName => {
arrProto[methodName] = function () {
updateView()
oldArrayProperty[methodName].call(this, ...arguments)
}
});
// 监听data传入的属性
function defineReactive(target, key, value) {
// 深度监听 多层对象嵌套
observer(value)
// 核心api
Object.defineProperty(target, key, {
get() {
return value
},
set(newVal) {
// 设置新值也要监听 比如{age:27}
observer(newVal)
if (newVal !== value ) {
value = newVal
updateView()
}
}
})
}
// 监听对象属性
function observer(target) {
if (typeof target !== 'object' || target === null) {
// 不是对象或数组
return target
}
// 监听数组 把原数组的隐式原型赋值给我们定义好的数组对象
if (Array.isArray(target)) {
target.__proto__ = arrProto
}
// 重新定义各个属性,加getter、setter属性
for(let key in target) {
defineReactive(target, key, target[key])
}
}
const data = {
name: 'zk',
age: 26,
info: {
address: 'city' // 需深度监听
},
nums: [1, 2, 3]
}
observer(data)
// data.info.address = 'beijing' // 需要深度监听
// data.info = {address:'beijing'} // 需要深度监听
// data.x = 666 // 新增属性,监听不到 需要vue.set方法
// delete data.name // 删除属性,监听不到 需要vue.delete方法
data.nums.push(21)
vue2简单的数据双向绑定实现
<div>内容:<span id="content"></span></div>
<input id="iptName" />
const iptName = document.getElementById('iptName')
const content = document.getElementById('content')
let obj = {
name: ''
}
let newObj = JSON.parse(JSON.stringify(obj))
Object.defineProperty(obj, 'name', {
get() {
return newObj.name
},
set(val) {
if (val === newObj.name) return
newObj.name = val
observer()
}
})
function observer () {
iptName.innerText = obj.name
content.innerText = obj.name
}
iptName.oninput = function () {
obj.name = this.value
}
Vue2源码解读 - 响应式原理及简单实现的更多相关文章
-
vue源码之响应式数据
分析vue是如何实现数据响应的. 前记 现在回顾一下看数据响应的原因. 之前看了vuex和vue-i18n的源码, 他们都有自己内部的vm, 也就是vue实例. 使用的都是vue的响应式数据特性及$w ...
-
Spring:源码解读Spring IOC原理
Spring IOC设计原理解析:本文乃学习整理参考而来 一. 什么是Ioc/DI? 二. Spring IOC体系结构 (1) BeanFactory (2) BeanDefinition 三. I ...
-
Spring源码解读Spring IOC原理
一.什么是Ioc/DI? IoC 容器:最主要是完成了完成对象的创建和依赖的管理注入等等. 先从我们自己设计这样一个视角来考虑: 所谓控制反转,就是把原先我们代码里面需要实现的对象创建.依赖的代码,反 ...
-
通用后台管理系统源码,响应式布局,Java管理系统源码,零门槛安装部署
本项目是一个通用响应式管理后台,导入开发环境安装就能直接运行,界面也非诚漂亮,在PC端和移动端也是自适应的.非常适合企业或者个人搭建各种商城后台,博客后台,网站管理后台等. 源码启动后的截图 需要这套 ...
-
Python Web Flask源码解读(二)——路由原理
关于我 一个有思想的程序猿,终身学习实践者,目前在一个创业团队任team lead,技术栈涉及Android.Python.Java和Go,这个也是我们团队的主要技术栈. Github:https:/ ...
-
JGUI源码:响应式布局简单实现(13)
首先自我检讨下,一直没有认真研究过响应式布局,有个大致概念响应式就是屏幕缩小了就自动换行或者隐藏显示,就先按自己的理解来闭门造车思考实现过程吧. 1.首先把显示区域分成12等分,bootstrap是这 ...
-
java 企业门户网站 源码 自适应响应式 freemarker 静态引擎 html5 SSM
官网 http://www.fhadmin.org/ 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的ht ...
-
vue2.0 之 深入响应式原理
实例demo<div id="app"> <span>{{a}}</span> <input type="text" ...
-
2,MapReduce原理及源码解读
MapReduce原理及源码解读 目录 MapReduce原理及源码解读 一.分片 灵魂拷问:为什么要分片? 1.1 对谁分片 1.2 长度是否为0 1.3 是否可以分片 1.4 分片的大小 1.5 ...
随机推荐
-
HTML5 ---localStorage
HTML5中提供了localStorage对象可以将数据长期保存在客户端,直到人为清除. localStorage提供了几个方法: 1.存储:localStorage.setItem(key,valu ...
-
PAC自动代理文件格式,教你如何写PAC文件
PAC文件格式 PAC文件是纯文本格式的,实际上就是JavaScript文件.Chrome/Chromium的扩展Switchy!的"Auto Switch Mode"功能实际上也 ...
-
SVN四部曲之SVN命令精通
SVN 常用命令一览表 命令 功能 使用格式 checkout 检出 svn co URL up 更新到当前URL的末端 svn up switch 更新到某一tag/branch svn s ...
-
[置顶] 用Wireshark保存RTP的负载码流
这段时间工作太忙,有些日子没写文章了,今天准备了一篇Wireshark工具的一个小功能,在验证码流的时候非常好用,闲话不说,直接说步骤: 1.打开Wireshark抓取流媒体码流,然后用RTP过滤: ...
-
s6 传输层
标题 s6-1 传输层概述(2019-04-06 21:19) s6-2 UDP(2019-04-07 08:39) s6-3 通信模型(2019-04-07 08:47) s6-4 TCP 数据段( ...
-
Qualcomm Vuforia SDK背景
参考视频:http://edu.csdn.net/course/detail/1467/23125?auto_start=1 一:概述 官网:www.vuforia.com 应用方向:产品交互.虚拟购 ...
-
elasticsearch中的filter与aggs
今天在ES上做了一个聚合,先过滤一个嵌套对象,再对另一个域做聚合,但是过滤似乎没有起作用 { "size":0, "filter":{ "nested ...
-
bzoj 1612: [Usaco2008 Jan]Cow Contest奶牛的比赛【Floyd】
floyd传递关系,一个牛能确定排名的条件是能和所有牛确定关系 #include<iostream> #include<cstdio> using namespace std; ...
-
BALNUM - Balanced Numbers
BALNUM - Balanced Numbers Time limit:123 ms Memory limit:1572864 kB Balanced numbers have been used ...
-
【凭据不工作】Win远程桌面提示您的凭据不工作
1.浏览器直接进入云服务器 2.打开运行 --输入gpedit.msc--计算机配置--管理模板--windows组件--远程桌面服务--远程桌面会话主机--安全--远程(RDP)链接要求使用制定的安 ...