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. HTML（七）HTML 表单(form元素介绍，input元素的常用type类型，input元素的常用属性)

    前言 表单是网页与用户的交互工具,由一个<form>元素作为容器构成,封装其他任何数量的表单控件,还有其他任何<body>元素里可用的标签 表单能够包含<input> ...

  2. [物理学与PDEs]第1章习题1 无限长直线的电场强度与电势

    设有一均匀分布着电荷的无限长直线, 其上的电荷线密度 (即单位长度上的电荷量) 为 $\sigma$. 试求该直线所形成的电场的电场强度及电势. 解答: 设空间上点 $P$ 到直线的距离为 $r$, ...

  3. mask rcnn

    Mask RCNN Mask RCNN 中主要改进是在faster rcnn中box regression 的branch 上加入mask prediction branch,能够得到点到点的预测. ...

  4. Git上传文件容量大小限制

    使用Git LFS突破git的100M容量限制. 1.安装Git LFS https://git-lfs.github.com./ 2.安装后把里面的git-lfs.exe放到你要上传的项目文件夹 3 ...

  5. hibernate之Configuration对象

    任务:读取主配置信息 1.  Configuration config = new Configuration();      使用hibernate,但并没有读取 2.  config.config ...

  6. filebeat_config

    Filebeat Prospector filebeat.prospectors: - input_type: log paths: - /var/log/apache/httpd-*.log doc ...

  7. JS 禁用鼠标右键

    oncontextmenu="window.event.returnValue=false" style="overflow-y: hidden; overflow-x: ...

  8. Visual Studio 2015中 没有“安装和部署”的解决方法

    使用Visual Studio 2015 Community新建项目,在已安装模板中的“其它项目类型”下未找到“安装和部署”选项.在微软官网下载 Microsoft Visual Studio 201 ...

  9. 网络层HTPPS和HTTP的概念与区别

    HTPPS和HTTP的概念 HTTPS(全称:Hypertext Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道,简单讲是HTTP ...

  10. 解决 RecyclerView 在Android Studio已经导入情况下还无法实例引用问题

    系统:Windows 10 IDE::android studio 1. 问题:RecyclerView 在Android Studio已经导入情况下还无法实例引用问题 由于RecyclerView是 ...