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>这本书.然而惭愧的是,这本书已 ...
随机推荐
- HTML（一）HTML基础语法（HTML简介，HTML文档声明）
HTML 概念介绍 [概念] (Hyper Text Markup Language)超文本标记语言,是用来描述网页的一种语言 超文本(Hyper Text):不只包括文本,也可以包括图片.链接.音乐 ...
- oracle数据库驱动（ojdbc）
第1部分 Q:为什么oralce的jdbc驱动,在maven上搜索到把pom配置复制到pom.xml里进行引用的时候会报错? ANS:虽然能在maven仓库里搜索到,但貌似不能用,原因是oracle是 ...
- shell 批量检测远程端口
[DNyunwei@YZSJHL24-209 li]$ cat port.sh #!/bin/bash # ip=`cat iplist` for i in $ip;do port=`ssh -t $ ...
- Python3：排序函数sort() 和 sorted() 之介绍
今天来讲一下Python中的排序函数.Python中有2个内建的排序函数,分别为sort() 和 sorted() 下面介绍分别介绍一下2个函数: 1.有一个列表 :a=[1,4,5,88,0,7], ...
- Centos 06 文件类型和扩展名&索引节点inode和存储块block
本节内容 1.文件类型 2.文件扩展名 3.索引节点inode和block块 首先需要申明一点, 1.在linux里面文件扩展名和文件类型是没有关系的 2.为了容易区分和兼容用户使用windows的习 ...
- C# - 常用接口
常用接口 用于比较接口 IComparable<T> 接口内部定义了用于比较两个对象大小的CompareTo(T t)方法,>参数时返回1,=参数时返回0,<参数时返回-1.集 ...
- mongoDB3.0版本使用express读取数据
使用express连接数据库操作 var express = require('express'); var app = express(); var MongoClient = require('m ...
- 手写代码 - java.util.Arrays 相关
1-拷贝一个范围内的数组 Arrays.copyOfRange( array, startIndex, endIndex); include startIndex... exclude endInde ...
- Idea 问题记录
日常问题记录 下载IDEA, tomcat ,下载jdk 前言:java net对比 Java:JDK .NET:.NetFramework WEB服务器 Java:Tomcat,JBoss,Web ...
- vue之生命周期钩子函数之运用
一.什么是生命周期钩子函数: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行 ...