vue数据变化的监控是如何做到的
mvvm框架里的数据监控对象,包括 基本数据类型和对象, 对象分为对象和数组.
首先是对普通数据类型和对象的监控.其次是对数组的监控.
对对象的监控需要用到递归;
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head> <body>
q请输入:<input id="oInput" type="text">
<div>
<p>我是绑定的输出框</p>
<div id="show"></div>
</div> <script>
//创建一个data对象作为数据层model
//输入时,将input的值传给data,data接到值后,触发通知函数,并将值传给show
//当data的值被修改时候,触发data的set,将input的值修改,并传值给show
const data = {
value: '',
demo: ''
}
oInput.oninput = function () {
data.value = this.value;
} function observe(data) {//监控对象属性发生变化
if (!data || typeof data !== 'object') {
return;
}
Object.keys(data).forEach(function (ele) {//对象的所有属性
definePro(data, ele, data[ele]) //形成闭包;
}) }
function definePro(data, key, value) {
observe(value) //用递归监控value是object的情况.
Object.defineProperty(data, key, {
get() {
getProx();
return value;
},
set(newVal) {
if(value === newVal){//判断改没改
return ;
}
setProx();
value = newVal;//这一步最重要!!!!形成闭包,返回value就可以
update();
}
}) }
function update(){
var value = data.value
show.innerText = value;
oInput.value = value;
}
function getProx() {
console.log('get')
}
function setProx() {
console.log('set')
}
observe(data)
</script> </body> </html>
对应数组,利用defineProperty监控Array.prototype.
let arr = [];
let { push } = Array.prototype;//仅以push为例 function update() {
console.log('更新了')
}
function observe(data) {
Object.defineProperty(Array.prototype, 'push', {
value: function (...arg) {
update();
push.apply(this, arg);
} })
}
observe();
vue数据变化的监控是如何做到的的更多相关文章
- vue数据变化后页面刷新
在测试methods和conputed区别的时候,我在methods方法体内增加了一个vue数据自增语句,类似于this.abc++;导致整个页面无法加载出来. 原因是this.abc改变 会触发页面 ...
- vue响应式数据变化
vue响应式数据变化 话不多说,先上代码: //拷贝一份数组原型,防止修改所有数组类型变量的原型方法 let arrayProto = Array.prototype;// 数组原型上的方法 let ...
- vue.js之过滤器，自定义指令，自定义键盘信息以及监听数据变化
一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 ...
- vue教程2-08 自定义键盘信息、监听数据变化vm.$watch
vue教程2-08 自定义键盘信息 @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive('on').keyCode ...
- Vue中使用computed与watch结合实现数据变化监听
目的:当数据变化时,为其中重要数据增加边框,实现闪烁以达到提醒目的.数据格式如下,只有在未处理火警/故障时增加闪烁边框.可以使用watch进行深度监听.数据格式已定,也非常明确要监听的数据是有两个.既 ...
- 动手实现 Redux（二）：抽离 store 和监控数据变化
上一节 的我们有了 appState 和 dispatch: let appState = { title: { text: 'React.js 小书', color: 'red', }, conte ...
- vue对象数组数据变化，页面不渲染
很多时候,我们习惯于这样操作数组和对象: data() { // data数据 return { arr: [1,2,3], obj:{ a: 1, b: 2 } }; }, // 数据更新 数组视图 ...
- Vue数据产生变化需要页面渲染完之后执行某操作
1.数据产生变化或者页面需要vue数据渲染完之后加载的东西 Vue.nextTick(function () { alert(123); }); 2 调用vue方法 --------------Vue ...
- Vue中Object和Array数据变化侦测原理
在学完Vue.js框架,完成了一个SPA项目后,一直想抽时间找本讲解Vue.js内部实现原理的书来看看,经过多方打听之后,我最后选择了<深入浅出Vue.js>这本书.然而惭愧的是,这本书已 ...
随机推荐
- FM（Factorization Machines）
摘自 https://www.jianshu.com/p/1687f8964a32 https://blog.csdn.net/google19890102/article/details/45532 ...
- BMP文件解析
目录 BMP文件简介 BMP文件格式 位图头 位图信息 调色板 位图数据 C语言代码 获取文件大小 获取文件尺寸 获取文件偏移量 读取文件数据示例 一个问题 完整程序 BMP文件简介 BMP(全称Bi ...
- 集合各个实现类的底层实现原理 ----- 原文地址：https://blog.csdn.net/qq_25868207/article/details/55259978
ArrayList实现原理要点概括 参考文献: http://zhangshixi.iteye.com/blog/674856l https://www.cnblogs.com/leesf456/p/ ...
- Chrome 远程代码执行漏洞CVE-2019-5786-EXP
0x01 漏洞原理 CVE-2019-5786是位于FileReader中的UAF漏洞,由Google's Threat Analysis Group的Clement Lecigne于2019-02- ...
- 【原创】大数据基础之Marathon（1）简介、安装、使用
marathon 1.6.322 官方:https://mesosphere.github.io/marathon/ 一 简介 Marathon is a production-grade conta ...
- 【原创】大叔问题定位分享（17）spark查orc格式数据偶尔报错NullPointerException
spark查orc格式的数据有时会报这个错 Caused by: java.lang.NullPointerException at org.apache.hadoop.hive.ql.io.orc. ...
- 25)django-form使用
目录 1)django form作用 2)django form使用 一:django form 作用 django form有两个作用:一是用户输入数据验证:二是生成html 1)用户输入数据验证, ...
- Python——python读取html实战，作业7（python programming）
查看源码,观察html结构 # -*- coding: utf-8 -*- from lxml.html import parse from urllib.request import urlopen ...
- vue-resource post请求后台接口报400（跨域问题解决方法）
1.打开config/index.js,在proxyTable中添写如下代码 proxyTable: { '/api': { //使用"/api"来代替"http://f ...
- 《剑指offer》最小的k个数
本题来自<剑指offer> 反转链表 题目: 思路: C++ Code: Python Code: 总结: