美文网首页
vue的data数据双向绑定原理及实现

vue的data数据双向绑定原理及实现

作者: 一爷之秋 | 来源:发表于2019-10-10 15:40 被阅读0次

Object.defineProperty()

该方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。
例:

//在console.log(book.name)同时,直接给书加一个书号
var Book = {};
var name = '';
Object.defineProperty(Book,'name',{
    set:function(value) {
        name = value;
        console.log('你取了一个书名叫:'+value);
    },
    get:function() {
        console.log('get方法被监听到');
        return '<'+name+'>';
    }
});
Book.name = '人性的弱点';  //你取了一个书名叫:人性的弱点
console.log(Book.name); //<人性的弱点>

此处代码转自

利用这个特性,vue遍历传入每个实例的data对象
源码

//遍历传入实例的data对象的属性,将其设置为Vue对象的访问器属性
 function observe(obj,vm){
     Object.keys(obj).forEach(function(key){
         defineReactive(vm,key,obj[key]);
     });
 }
 //设置为访问器属性,并在其getter和setter函数中,使用订阅发布模式。互相监听。
 function defineReactive(obj,key,val){
     //这里用到了观察者模式,它定义了一种一对多的关系,让多个观察者监听一个主题对象,这个主题对象的状态发生改变时会通知所有观察者对象,观察者对象就可以更新自己的状态。
     //实例化一个主题对象,对象中有空的观察者列表
     var dep = new Dep();
     //将data的每一个属性都设置为Vue对象的访问器属性,属性名和data中相同
     //所以每次修改Vue.data的时候,都会调用下边的get和set方法。然后会监听v-model的input事件,当改变了input的值,就相应的改变Vue.data的数据,然后触发这里的set方法
     Object.defineProperty(obj,key,{
         get: function(){
             //Dep.target指针指向watcher,增加订阅者watcher到主体对象Dep
             if(Dep.target){
                 dep.addSub(Dep.target);
             }
             return val;
         },
         set: function(newVal){
             if(newVal === val){
                 return
             }
             val = newVal;
             //console.log(val);
             //给订阅者列表中的watchers发出通知
             dep.notify();
         }
     });
 }
 
 //主题对象Dep构造函数
 function Dep(){
     this.subs = [];
 }
 //Dep有两个方法,增加订阅者  和  发布消息
 Dep.prototype = {
     addSub: function(sub){
         this.subs.push(sub);
     },
     notify: function(){
         this.subs.forEach(function(sub){
             sub.update();
         });
     }
 }

通过订阅发布消息的方式,监听每个数据的改变

相关文章

  • 深入Vue响应式原理

    1.Vue的双向数据绑定 参考 vue的双向绑定原理及实现Vue双向绑定的实现原理Object.definepro...

  • vue面试知识点

    vue 数据双向绑定原理 vue实现数据双向绑定原理主要是:采用数据劫持结合发布订阅设计模式的方式,通过对data...

  • vue 双向数据绑定

    Vue实现数据双向绑定的原理:Object.defineProperty()vue实现数据双向绑定主要是:采用数据...

  • Vue实现数据双向绑定的原理

    Vue实现数据双向绑定的原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数...

  • 【转】JavaScript的观察者模式(Vue双向绑定原理)

    关于Vue实现数据双向绑定的原理,请点击:Vue实现数据双向绑定的原理原文链接:JavaScript设计模式之观察...

  • 前端理论面试--VUE

    vue双向绑定的原理(详细链接) VUE实现双向数据绑定的原理就是利用了 Object.definePropert...

  • Vue - 双向绑定原理

    目标:理解Vue实现双向数据绑定的主要原理。 最终需求: 1. view -> data 视图变化影响数据 2. ...

  • Vue双向数据绑定原理

    剖析Vue实现原理 - 如何实现双向绑定mvvm 本文能帮你做什么?1、了解vue的双向数据绑定原理以及核心代码模...

  • 关于双向绑定的问题

    剖析Vue实现原理 - 如何实现双向绑定mvvm 本文能帮你做什么?1、了解vue的双向数据绑定原理以及核心代码模...

  • vue的双向绑定原理及实现(转)

    vue的双向绑定原理及实现 前言 代码: 效果图...

网友评论

      本文标题:vue的data数据双向绑定原理及实现

      本文链接:https://www.haomeiwen.com/subject/yccapctx.html