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事件循环 EventLoop

    前言 Event Loop即事件循环,是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制,也就是我们经常使用异步的原理. 先熟悉基本概念 [堆Heap] 堆是一种数据结构 ...

  2. ios打包 上架 了解

    苹果开发者中心  https://developer.apple.com/account 上架收费相关了解 https://www.jianshu.com/p/681f00a561ca ios打包 上 ...

  3. [再寄小读者之数学篇](2014-06-22 不等式 [中国科学技术大学2011年高等数学B考研试题])

    证明不等式: $$\bex 1+x\ln\sex{x+\sqrt{1+x^2}}>\sqrt{1+x^2},\quad x>0. \eex$$ 证明: 令 $x=\tan t,\ 0< ...

  4. HTTP协议11-cookie和seesion

    因为HTTP协议是无状态的,但是很多网站的功能需要先登录才能使用.这就引入了cookie. Cookie机制 服务器用HTTP头向客户端发送cookies.客户端(浏览器)解析cookies并将它们保 ...

  5. rsync3.1.3的编译安装和常用操作

    .rsync的编译安装 .tar.gz cd rsync- ./configure --prefix=/usr/local/rsync- --disable-ipv6 .rsync的配置文件: [ro ...

  6. Ubuntu18.04 LTS 安装部署golang最新版本1.10

    1 步骤 //1 直接安装golang-go 目前最新版本是1.10 sudo apt-get install golang-go //2 向/etc/profile追加以下代码 sudo vim / ...

  7. django中sqlite迁移mysql

    sqlite数据迁移 1 数据备份 django中打开terminalpython manage.py dumpdata authorization > authorization_data.j ...

  8. Java_日期时间相关类

    目录 Date类(java.util.date) Calendar类(java.util.Calendar) SimpleDateFormat类(java.text.SimpleDateFormat) ...

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

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

  10. redis学习（八）——redis应用场景

    毫无疑问,Redis开创了一种新的数据存储思路,使用Redis,我们不用在面对功能单调的数据库时,把精力放在如何把大象放进冰箱这样的问题上,而是利用Redis灵活多变的数据结构和数据操作,为不同的大象 ...