精华内容
下载资源
问答
  • //获取最新记录 let val = this.get() //回调更新视图 //把this.cb的全部方法属性放到this.vm这个对象里 然后在把参数传进this.vm里 this.cb.call(this.vm, val, oldval) } } //实现数据劫持和变化侦测 function ...
    <script>
      //创建依赖收集的类
      export class Dep {
        constructor() {
          this.subs = []
        }
        //为添加依赖添加方法 我也不知道为什么要定义这个函数 直接写在depend不香么? 完成API? 或许有其他的用法
        addSubs(sub) {
          this.subs.push(sub)
        }
        //删除依赖 or 接触监听
        removesubs() {
          remove(this.subs, sub)
        }
        //添加依赖
        depend() {
          if (window.target) {
            //判断全局中有咩有watcher绑定了window.target 有就收集
            addSubs(window.target)
          }
        }
        //发送通知到依赖 提醒依赖更新
        notify() {
          const subs = this.subs.slice() //或许是怕修改到原数组吧 因为slice方法不会影响到原数组
          for (let i = 0; i < this.subs.length; i++) {
            this.subs[i].update() //watcher中定义了update方法
          }
        }
      }
      //删除依赖
      function remove(arr, item) {
        if (arr.length) {
          if (arr.indexOf(item) > -1) {
            const index = Object.keys(arr)
            arr.splice(index, 1)
          }
        }
      }
      //收集object中的全部子key 递归回调 创建Observer类 把全部都变成getter/setter的形式
      export class Observer {
        constructor(val) {
          //判断是不是数组
          if (!Array.isArray(val)) {
            walk(val)
          }
        }
      }
      function walk(val) {
        let keys = Object.keys(val)
        for (let i = 0; i < val.length; i++) {
          defineReactive(val, keys[i], val[keys[i]]) // 这里的val[keys[i] 是key中key 是为了判定key还有没有其他的对象
        }
      }
      //订阅者watcher 也就是依赖
      export class Watcher{
        constructor(vm, expOrFn, cb) {
          this.vm = vm;
          this.cb = cb;
          this.getter = parsePath(expOrFn) //获取data.a.b.c的内容
          this.value = this.get(); // 当前值
        }
        get() { //获取当前的属性
          window.target = this; //绑定当前目标
          let val = this.getter.call(this.vm, this.vm) //把当前的路径放入这个watch对象中 获取当前数据
          window.target = undefined;//取消为了下次获取
          return val
        }
        update() {
          //获取当前记录
          let oldval = this.value;
          //获取最新记录
          let val = this.get()
          //回调更新视图 //把this.cb的全部方法属性放到this.vm这个对象里 然后在把参数传进this.vm里
          this.cb.call(this.vm, val, oldval)
        }
      }
      //实现数据劫持和变化侦测
      function defineReactive(data, key, val) {
        if (typeof val === 'object') {
          new Observer(val)
        }
        let dep = new Dep() //实例化类
        Object.defineProperty(data, key, {
          enumerable: true, //可以枚举
          configurable: true, //可删除
          get: function () {
            //get不用传值 因为在收集到的依赖Watcher中绑定了window.target
            //这里是收集依赖的
            dep.depend() //在dep类中定义了depend方法
            return val
          },
          set: function (newVal) {
            //set要传newVal
            if (val === newVal) {
              return
            }
            val = newVal //更新新的newVal 不然会一直触发set(个人猜测)
            dep.notify() //在dep类中定义了notify方法
          },
        })
      }
    </script>
    
    展开全文
  • Vue实现双向数据绑定代码 ​ Vue实现双向数据,通过Object.defineProperty()中set()方法与get()。即发布订阅、订阅模式,(发布、订阅模式参考资料),对数据进行拦截。实现双向数据绑定(本人上一篇文章有讲过基本...

    Vue实现双向数据绑定代码

    ​ Vue实现双向数据,通过Object.defineProperty()set()方法get()。即发布订阅、订阅模式,(发布、订阅模式参考资料),对数据进行拦截。实现双向数据绑定(本人上一篇文章有讲过基本原理)。

    代码

    Object.defineProperty()
    传入三个参数:

    1. 监听的对象
    2. 自定一个属性名(案例中定义为binding,当多个监听用于区分)
    3. json对象,设置get、set方法(对应被调用、被修改)
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <input type="text" name="" id="inp">
        <p id="context"></p>
        <script>
            let obj = {};
            Object.defineProperty(obj, 'binding', {
                get() {
                    return obj;
                },
                set(newValue) {
                    document.getElementById('inp').value = newValue;
                    document.getElementById('context').innerHTML = newValue
                }
            });
            document.getElementById('inp').onkeyup = (e)=>{
                obj.binding = e.target.value;
            }
        </script>
    </body>
    
    </html>
    

    在这里插入图片描述

    验证

    添加一个按钮。点击按钮给p标签赋值,观察input框内值的变换。

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <input type="text" name="" id="inp">
        <p id="context"></p>
        <!-- 验证:添加按钮 -->
        <button id="btn">赋值666</button>
        <script>
            let obj = {};
            Object.defineProperty(obj, 'binding', {
                get() {
                    return obj;
                },
                set(newValue) {
                    document.getElementById('inp').value = newValue;
                    document.getElementById('context').innerHTML = newValue
                }
            });
            document.getElementById('inp').onkeyup = (e)=>{
                obj.binding = e.target.value;
            };
            // 验证:添加事件
            document.getElementById('btn').onclick = (e)=>{
                obj.binding = 666;
            }
        </script>
    </body>
    
    </html>
    

    在这里插入图片描述

    注意:

    ​ 如果不使用上述方法,而采用直接获取DOM并赋值。虽然p标签会改变,但是input框中的内容不会跟随改变。大家可以验证一下(__) 嘻嘻……

    展开全文
  • Vue实现双向数据绑定的原理:Proxy实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta...

    Vue实现双向数据绑定的原理:Proxy代理实现

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body>
        <input type="text" v-model="title" />
        <input type="text" v-model="title" />
        <div v-bind="title"></div>
      </body>
      <script>
        function View() {
          let proxy = new Proxy(
            {},
            {
              get(obj, property) {},
              set(obj, property, value) {
                obj[property] = value;
                document
                  .querySelectorAll(
                    `[v-model="${property}"],[v-bind="${property}"]`
                  )
                  .forEach((el) => {
                    el.innerHTML = value;
                    el.value = value;
                  });
              },
            }
          );
          this.run = function () {
            const els = document.querySelectorAll("[v-model]");
            els.forEach((item) => {
              item.addEventListener("keyup", function () {
                proxy[this.getAttribute("v-model")] = this.value;
              });
            });
          };
        }
        let view = new View().run();
      </script>
    </html>
    

    效果如下:
    在这里插入图片描述

    展开全文
  • 用原生js实现Vue双向数据绑定 大家都知道Vue有个很大的特色,就是不用操作dom就可以直接实现数据的双向绑定,极大的方便了我们使用Jquery、原生js时改变数据需要对Dom频繁的操作。 今天就和大家一起来使用原生js...

    用原生js实现Vue双向数据绑定

    大家都知道Vue有个很大的特色,就是不用操作dom就可以直接实现数据的双向绑定,极大的方便了我们使用Jquery、原生js时改变数据需要对Dom频繁的操作。

    今天就和大家一起来使用原生js模拟一个Vue的数据双向绑定

    html部分

    <p id="showValue" style="height: 40px;line-height: 40px;color: white;background-color: black;"></p>
    <input id="inputId" type="text" oninput='changeValue()'>

    js部分

    <script>
            let Aobj = {};    //命名为Aobj 方便大家在windows对象里面可以在最上面找到该属性
            let _this = this; //看下文
            Object.defineProperty(Aobj, 'name', {   //该函数体内的this指向Aobj  
                get: function () {
                    return document.getElementById('inputId').value  //Aobj.name被调用的时候返回输入框里的值
                },
                set: function (val) {
                    document.getElementById('inputId').value = val //设置Aobj.name的时候同时将值赋予给input
                    _this.changeValue(event)
                },
                // value: "hello",     监听对象属性name的值 不能和get()、set()方法同时存在
                // writable: true,     设置监听的对象value值是否可以被重新赋值 不能和get()、set()方法同时存在
                // enumerable: true,   定义了对象的属性是否可以在 for...in 循环和 Object.keys() 中被枚举
                // configurable: true  特性表示对象的属性是否可以被删除,以及除 value 和 writable 特性外的其他特性是否可以被修改。
            })
            function changeValue() {  //获取输入框的值实时显示在页面上
                let val = document.getElementById('inputId').value
                document.getElementById('showValue').innerText = val
                console.log(Aobj.name, '.....Aobj.name');
            }
    </script>

    这样就能实现一个简单的数据双向绑定了

    至于Object.defineProperty以及可以监听更多对象属性的Object.defineProperties方法,大家可以去试验获得更多的解答。

    今天的分享就到这里

    大家可以自行复制代码去执行,观察结果,如果觉得笔者思想有误的欢迎在评论区指出,也欢迎大家随时加群交流!

    **欢迎大家加入微信群交流**

    今天是从业四年以来第4篇分享文章,也算是个进步吧,一天进步一点点,加油

    好,今天的方法就分享到这里,如果各位有什么不明白的,可以在评论下留言,大家一起探讨。我是三井寿,一个永不放弃的男人!
    在这里插入图片描述

    展开全文
  • 新的响应式机制采用了ES6的...vue3.0双向数据绑定Proxy Vue3.0中的响应式采用了ES6中的Proxy方法。 Proxy 对象用于定义基本操作的自定义行为(如属性查找、赋值、枚举、函数调用等) const p = new Proxy(target...
  • 理解VUE双向数据绑定原理和实现

    万次阅读 多人点赞 2021-02-26 12:04:02
    一、原理: 1.vue 双向数据绑定是通过 数据劫持 结合...2.核心:关于VUE双向数据绑定,其核心是 Object.defineProperty()方法; 3.介绍一下Object.defineProperty()方法 (1)Object.defineProperty(obj, prop, d...
  • vue2 双向数据绑定原理是通过Object.definedProperty()实行数据劫持,结合observer() 观察者,来实现 vue3 是通过3.0新增的proxy 来实现
  • observer主要是负责对Vue数据进行数据劫持,使其数据拥有get和set方法 Compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数 watcher负责数据监听,当数据...
  • Vue中的双向数据绑定是如何实现的? 解题思路: Vue双向数据绑定是通过数据劫持结合发布者订阅者模式来实现的 要实现这种双向数据绑定,必要的条件有: 实现一个数据监听器Observer,能够对数据对象的所有属性...
  • vue双向数据绑定

    2021-01-08 14:39:24
    前言 ...1,vue双向数据绑定的原理 vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的,通过object.defineproperty() 中的set和 get实现,就是当数据变动时会发布信息给订阅者触发
  • Vue 是如何实现数据双向绑定的? Vue 数据双向绑定主要是指:数据变化更新视图,视图变化更新数据 Vue 主要通过以下 4 个步骤来实现数据双向绑定的: 实现⼀个数据监听器 Observer: 对数据对象进⾏遍历,能够对数据...
  • vue中采用数据劫持结合观察者订阅者模式,通过Object.defineProperty()劫持各个属性的setter和getter,在数据变化时,通知订阅者,触发相应的监听回调。
  • vue双向数据绑定通过数据劫持结合发布者订阅者模式得方法来实现的。 vue通过Object.defineProperty()来实现数据劫持的。 Object.defineProperty()可以控制对象的一些特有操作,如: let person = {} let name = '' ...
  • Vue2的双向数据绑定

    2021-03-03 11:49:35
    vue双向绑定原理 vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。我们先来看Object....
  • Vue.js它是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter;在数据变动时发布消息给订阅者,触发相应的监听回调。 我们知道,实现MVVM主要包括两个方面:...
  • 双向数据绑定 概念: vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图。 主要流程(三...
  • Vue实现双向数据绑定的原理: 就是利用了Object.Property()这个方法,重新定义了对获取属性值(get)和设置属性(set)的操作来实现的, 它接收的三个参数,要操作的对象,要定义或者要修改的对象的属性名, 属性描述符...
  • Vue2双向数据绑定存在的问题: 关于对象:Vue 无法检测property的添加或移除。 关于数组:不能利用索引直接设置一个数组项,也不能修改数组的长度。 Vue2.0 原理:使用Object.defineProperty对象以及对象属性...
  • 双向数据绑定:保留了 angular 的特点,在数据操作方面更为简单; 组件化:保留了 react 的优点,实现了 html 的封装和重用,在构建单页面应用方面有着独特的优势; 视图,数据,结构分离:使数据的更改更为简单,不...
  • 关于双向数据绑定 ​ 不同的MVVM框架中,双向数据绑定所用到的技术有所不同。 ​ Vue使用的是ES5中**Object.defineProperty()**方法监控对数据的操作,从而实现数据同步。并将变更后的数据重新渲染到视图中。 通常...
  • ps:本文章适合和我一样的小白食用,大神请绕路! 第一个例子: <div id="app"> <input type="text" id="username" :value="username" />... var app=new Vue({ el:"#app", data:{ usernam
  • 三、表单双向数据绑定和组件 目录:双向数据绑定、组件 1.双向数据绑定 1)什么是双向数据绑定 Vue.js是一个MVVM框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会...
  • vue数据双向绑定原理

    2021-02-03 14:11:00
    vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的 var vm = new Vue({ data: { obj: { a: 1 } }, created: function () { console.log(this.obj); } }); 结果 我们可以看到属性a有两...
  • vue自定义组件实现双向绑定

    千次阅读 2020-12-22 12:23:59
    今天,我们通过另一种方式实现交互,参考input框的v-model,实现自定义组件的双向数据绑定。 即:父组件值改变,子组件的值跟着改变;反之,子组件值发生变化,父组件值随之变化 子组件定义: 由于不能直接修改...
  • 在线使用-线上测试-源码 //代码: {{ name }} 数据绑定 在正式开始之前我们先来说说数据绑定的事情,数据绑定我的理解就是让数据M(model)展示到 视图V(view)上。我们常见的架构模式有 MVC、MVP、MVVM模式,...
  • 如图,由于vue数据双向绑定,给waterSetInfo拼接单位的时候,会将res.data也进行赋值,导致waterSet里面的记过不对 解决方案: 深拷贝的方法:JSON暴力转换 解构赋值 this.waterMarkSet = JSON.parse(JSON....
  • 首先,vue实现数据双向绑定的原理是:采用数据劫持结合发布者-订阅者模式,通过Object.defineProperty(obj,props)来劫持各个属性的setter和getter方法,在数据变动时发布消息给订阅者,触发相应的回调函数。...
  • vue3双向绑定实现原理

    2021-07-15 21:48:59
    一、vue3为什么要用proxy实现双向绑定? 1.object.defineProperty的缺点: 因为es5的object.defineProperty无法监听对象属性的删除和添加 不能监听数组的变化,除了push/pop/shift/unshift/splice/spObject.definert...
  • 但是vue2双向数据绑定存在问题: 1.Vue 无法检测property的添加或移除。由于 Vue 会在初始化实例时对property执行getter/setter转化,所以property必须在data对象上存在才能让 Vue 将它转换为响应式的。 2.当你...
  • 这次给大家带来如何进行Vue数据双向绑定实现,进行Vue数据双向绑定实现的注意事项有哪些,下面就是实战案例,一起来看一下。一、示例var vm = new Vue({data: { obj: { a: 1} },created: function (){ console.log...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 45,968
精华内容 18,387
关键字:

vue如何实现双向数据绑定

vue 订阅