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>这本书.然而惭愧的是,这本书已 ...
随机推荐
- 前端面试题整理—jQuery篇
1.为什么使用jquery,他有哪些好处? 1)轻量级.代码简洁 2)强大的选择器,出色的DOM操作封装 3)有可靠的事件处理机制 4)浏览器兼容性好 5)支持链式操作 6)支持丰富的插件 2.jqu ...
- 2.9 while循环
while循环 <1>while循环的格式 while 条件: 条件满足时,做的事情1 条件满足时,做的事情2 条件满足时,做的事情3 ...(省略)... demo i = 0 whil ...
- Distance on the tree（数剖 + 主席树）
题目链接:https://nanti.jisuanke.com/t/38229 题目大意:给你n个点,n-1条边,然后是m次询问,每一次询问给你u,v,w然后问你从u -> v 的路径上有多少边 ...
- 《java与模式》
2012年3月 随笔档案 - java_my_life - 博客园--此网友 12年的博客都是和模式有关的,希望可以多看看.http://www.cnblogs.com/java-my-life/ar ...
- C# - 代码重构
隐藏更多 只暴露集合中供人使用的单一功能,将关于集合的更多功能隐藏掉. 旧版本 public class Animal{ private List<string> LanguageL ...
- RDay1-Problem 3 C
题目描述 初始给定n个卡片拍成一排,其中第i个卡片上的数为x[i]. 有q个询问,每次询问给定L和R表示询问区间[L,R]内的卡片所有出现了偶数次的数的异或和是多少. 输入 输入文件C.in 输入一行 ...
- RSF 分布式 RPC 服务框架的分层设计
RSF 是个什么东西? 一个高可用.高性能.轻量级的分布式服务框架.支持容灾.负载均衡.集群.一个典型的应用场景是,将同一个服务部署在多个Server上提供 request.response 消息通知 ...
- springboot集成mybatis源码分析-mybatis的mapper执行查询时的流程（三）
例: package com.example.demo.service; import com.example.demo.dao.UserDao; import com.example.demo.do ...
- redis-hash
Hash操作,redis中Hash在内存中的存储格式如下图: hset(name, key, value) # name对应的hash中设置一个键值对(不存在,则创建:否则,修改) # 参数: # n ...
- jade模板 注意事项
1. jade模板 语法 doctype html html head body header div 2. 添加内容:直接在标签后边加空格 直接写内容 如下: div 我要写的内容 3. ...