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. JavaScript数据类型 String字符串类型的属性和方法

    属性 字符串String类型的每个实例都有一个length属性,表示字符串中的字符个数.由于字符串是不可变的,所以字符串的长度也不可变 字符串的length属性不会在for/in循环中枚举,也不能通过 ...

  2. [物理学与PDEs]第2章习题3 Laplace 方程的 Neumann 问题

    设 $\Omega$ 为单连通区域, 在其边界 $\vGa$ 上给定向量场 ${\bf u}_B$, 则在 $\bar\Omega$ 中存在速度场 ${\bf u}$, 使其在 $\Omega$ 中成 ...

  3. 在Spring框架中bean配置文件中constructor-arg标签中没有name元素?

    bean配置文件出现错误的依赖: <beans <beans xmlns="http://www.springframework.org/schema/beans"   ...

  4. 逻辑运算符、位运算符、三元运算符、判断语句（if，switch）

    逻辑运算符 逻辑与 &:由false则false 逻辑或 |:有true则true 逻辑异或 ^:相同为false,不同为true 逻辑非 !:非false则true,非true则false ...

  5. C#处理非托管资源

    using System; //处理非托管资源 //例如:文件句柄.网络连接.数据库连接 //实现IDisposable不意味着也应该实现一个终结器,终结器会带来额外开销 //发布本机资源,要释放本机 ...

  6. ng-app&data-ng-app

    来源stackoverflow 区别:在验证html5时,ng-app会抛出一个错误,而对带data-前缀的特性不会抛出.其它方面这两个属性一样.

  7. 在window系统上安装redis服务-Invalid argument during startup: Failed to open the .conf

    当前redis版本: redis-cli -v redis-cli 3.0.503 网上给的命令(在redis所在文件夹下执行): redis-server –service-install redi ...

  8. TCP/IP（五）传输层之细说TCP的三次握手和四次挥手

    前言 这一篇我将介绍的是大家面试经常被会问到的,三次握手四次挥手的过程.以前我听到这个是什么意思呀?听的我一脸蒙逼,但是学习之后就原来就那么回事! 一.运输层概述 1.1.运输层简介 这一层的功能也挺 ...

  9. java web添加mysql过程中遇到的错误及解决办法

    问题一:遇到提示找不到驱动   com.mysql.jdbc.Driver 起初项目中是导入了mysql-connector-java-5.1.45-bin.jar 包的,但是一直依然报错,最后去官网 ...

  10. web开篇

    一.内容回顾 1.python基础 2.网络编程 3.并发编程 4.前端 5.数据库(MySQL) 二.今日概要 1.了解Web应用程序的本质 2.Django简介及安装使用 三.今日详细 1.最简单 ...