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>这本书.然而惭愧的是,这本书已 ...
随机推荐
- css长度单位学习(em,rem,px,vw,vh)
绝对长度单位 绝对长度单位代表一个物理测量 [像素px(pixels)] 像素,为影像显示的基本单位,译自英文"pixel",pix是英语单词picture的常用简写,加上英语单词 ...
- html设置背景图片并自适应
<style> html{ height:100%; } body{ padding: 0; margin: 0; background: url(images/2.jpg); backg ...
- docker学习-----docker服务的安装
docker 以下观点个人理解,只做参考 一.docker本身的优势 1.docker他本身是一个容器,用来方便我们项目打包,做服务器虚拟化,统一开发者环境等多种优势:运行于docker上的项目可以快 ...
- XL4001 典型应用电路
典型的应用电路如下: 中文数据手册:https://wenku.baidu.com/view/98ad2ed86f1aff00bed51ec7.html 在做毕设的时候用到的一款350ma的DC/DC ...
- 找不到或无法加载主类（Could not find or load main class）
一般可能会是包名引起的,还有可能就不小心加上了.class后缀 解决方案如下 可以加上目录或者使用符号 . ,注意要用空格隔开 java -cp d:\sample HelloWorldjava -c ...
- XML,json,ajax
一.XML 1.概述:XML全称为Extensible Markup Language, 意思是可扩展的标记语言 2.版本:W3C在1998年2月发布1.0版本:W3C在2004年2月发布1.1版本, ...
- 【译】索引进阶（一）：SQL SERVER索引介绍
[译注:此文为翻译,由于本人水平所限,疏漏在所难免,欢迎探讨指正] 原文链接:http://www.sqlservercentral.com/articles/Stairway+Series/7 ...
- springMVC下载中文文件名乱码【转】
//遇到的现象是,下载含有中文文件名的文件时,能获取到文件,但是使用IE正常,使用firefox,chrome文件名却乱码.//既然如此,就区分一下浏览器再返回好了,处理方式如下 //RESTfull ...
- Emacs Org-mode 3 表格
Org 使用内置的表格编辑器.可以进行简单的表格编写和计算. Org中的表格 第一个非空字符“|” 视为表格的起始位置,后面的“|” 视为字段分隔符. 3.1 生成表格 编写表格时,可以将字段先写好, ...
- RxPermissions Usage
refs:https://github.com/tbruyelle/RxPermissions https://www.jianshu.com/p/c3546e5cd2ffhttps://www.ji ...