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数据变化的监控是如何做到的的更多相关文章

  1. vue数据变化后页面刷新

    在测试methods和conputed区别的时候,我在methods方法体内增加了一个vue数据自增语句,类似于this.abc++;导致整个页面无法加载出来. 原因是this.abc改变 会触发页面 ...

  2. vue响应式数据变化

    vue响应式数据变化 话不多说,先上代码: //拷贝一份数组原型,防止修改所有数组类型变量的原型方法 let arrayProto = Array.prototype;// 数组原型上的方法 let ...

  3. vue.js之过滤器，自定义指令，自定义键盘信息以及监听数据变化

    一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 ...

  4. vue教程2-08 自定义键盘信息、监听数据变化vm.$watch

    vue教程2-08 自定义键盘信息 @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive('on').keyCode ...

  5. Vue中使用computed与watch结合实现数据变化监听

    目的:当数据变化时,为其中重要数据增加边框,实现闪烁以达到提醒目的.数据格式如下,只有在未处理火警/故障时增加闪烁边框.可以使用watch进行深度监听.数据格式已定,也非常明确要监听的数据是有两个.既 ...

  6. 动手实现 Redux（二）：抽离 store 和监控数据变化

    上一节 的我们有了 appState 和 dispatch: let appState = { title: { text: 'React.js 小书', color: 'red', }, conte ...

  7. vue对象数组数据变化，页面不渲染

    很多时候,我们习惯于这样操作数组和对象: data() { // data数据 return { arr: [1,2,3], obj:{ a: 1, b: 2 } }; }, // 数据更新 数组视图 ...

  8. Vue数据产生变化需要页面渲染完之后执行某操作

    1.数据产生变化或者页面需要vue数据渲染完之后加载的东西 Vue.nextTick(function () { alert(123); }); 2 调用vue方法 --------------Vue ...

  9. Vue中Object和Array数据变化侦测原理

    在学完Vue.js框架,完成了一个SPA项目后,一直想抽时间找本讲解Vue.js内部实现原理的书来看看,经过多方打听之后,我最后选择了<深入浅出Vue.js>这本书.然而惭愧的是,这本书已 ...

随机推荐

  1. [物理学与PDEs]第4章第2节 反应流体力学方程组 2.3 混合气体状态方程

    1.  记号与假设 (1)  已燃气体的化学能为 $0$. (2)  单位质量的未燃气体的化学能为 $g_0>0$. 2.  对多方气体 (理想气体当 $T$ 不高时可近似认为), $$\bex ...

  2. CentOS 7 破解root密码

    破解root密码必须在本机上进行,如果使用SecureCRT  Xshell等远程工具修改是会出错的! A0 哥们儿,忘记密码了,怎么办??? A1.进入启动界面: A2. 按‘e’键进入编辑模式 A ...

  3. python 模块 DButils

    # DButils 为了解决多客户端都需要操作数据库的问题. # import pymysql # from DBUtils.PooledDB import PooledDB # # POOL = P ...

  4. OpenCV3编程入门读书笔记5-边缘检测

    一.边缘检测的一般步骤 1.滤波 边缘检测的算法主要是基于图像强度的一阶和二阶导数,但导数通常对噪声很敏感,因此必须采用滤波器来改善与噪声有关的边缘检测器的性能. 2.增强 增强边缘的基础是确定图像各 ...

  5. 转载一篇好理解的vue ssr文章

    转载:原文链接https://www.86886.wang/detail/5b8e6081f03d630ba8725892,谢谢作者的分享 前言 大多数Vue项目要支持SSR应该是为了SEO考虑,毕竟 ...

  6. mysql修改字符集

    文章链接:https://www.cnblogs.com/hubavyn/p/4359315.html mysql修改表.字段.库的字符集(转) 原文链接:http://fatkun.com/2011 ...

  7. Git使用六：版本对比

    准备工作: 创建一个新的项目,并初始化git 创建两个文件,并写入对应内容(utf-8无bom格式) 执行git add 命令将两个文件添加到暂存区,执行commit命令提交到仓库并生产快照 修改工作 ...

  8. 设计模式学习之责任链模式（Chain of Responsibility，行为型模式）（22）

    参考:http://www.cnblogs.com/zhili/p/ChainOfResponsibity.html 一.引言 在现实生活中,有很多请求并不是一个人说了就算的,例如面试时的工资,低于1 ...

  9. PHP AES的加密解密-----【弃用】

    mcrypt_decrypt在PHP7.*已经被弃用,取而代之的是openssl_decrypt/encrypt,请参考: PHP7.* AES的加密解密 AES加密算法 密码学中的高级加密标准(Ad ...

  10. Eclipse中如何将项目转成Dynamic Web项目

    项目接手前的同事是使用MyEclipse写的,拿SVN将项目导入eclipse时,web项目就会变成java项目,这时就需要修改配置文件将项目转成web,步骤如下: 1.修改项目配置文件. 要修改的项 ...