美文网首页首页推荐今日值得看坚持写
Vue.js react双向绑定的实现原理

Vue.js react双向绑定的实现原理

作者: sponing | 来源:发表于2016-11-28 22:32 被阅读0次

Object.defineproperty语法

var o = {}; // 创建一个新对象
// Example of an object property added with defineProperty with a data property descriptor
Object.defineProperty(o, "a", {value : 37,
                               writable : true,
                               enumerable : true,
                               configurable : true});
// 对象o拥有了属性a,值为37

// Example of an object property added with defineProperty with an accessor property descriptor
var bValue;
Object.defineProperty(o, "b", {get : function(){ return bValue; },
                               set : function(newValue){ bValue = newValue; },
                               enumerable : true,
                               configurable : true});
o.b = 38;

数据和视图联动
给对象o定义新的属性b,并且定义属性b的get和set方法,当o.b的时候会调用b属性的get方法,给b属性赋值的时候,会调用set方法,这就是修改数据的时候,视图会自动更新的关键

前端获取数据后,需要根据数据操作dom,视图变化后,需要修改不少代码,有没有方法将数据和dom操作隔离,看一个例子

显示用户信息的html模版

<div> <p>你好,<span id='nickName'></span></p> <div id="introduce"></div></div> 
//视图控制器
var userInfo = {};
Object.defineProperty(userInfo, "nickName", {
    get: function(){
        return document.getElementById('nickName').innerHTML;
    },
    set: function(nick){
        document.getElementById('nickName').innerHTML = nick;
    }
});
Object.defineProperty(userInfo, "introduce", {
    get: function(){
        return document.getElementById('introduce').innerHTML;
    },
    set: function(introduce){
        document.getElementById('introduce').innerHTML = introduce;
    }
})
//数据
//todo 获取用户信息的代码
....

userInfo.nickName = "xxx";
userInfo.introduce = "我是xxx,我来自云南,..."

设置userInfo的nickName属性时会调用set方法,更新dom节点的html

相关文章

  • vue双向绑定原理

    Vue.js双向绑定的实现原理

  • Vue.js数据双向绑定实现

    目前的几种主流前端框架中,react是单向绑定,而angular.js和vue.js是双向绑定,实现双向绑定的方法...

  • React中双向数据绑定基本原理

    在Vue.js中在@input等事件和v-bind上扩展了v-model实现双向数据绑定,在React中也是一样的原理

  • 深入Vue响应式原理

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

  • Vue.js react双向绑定的实现原理

    Object.defineproperty语法 数据和视图联动给对象o定义新的属性b,并且定义属性b的get和se...

  • 简单实现react双向绑定

    在看Vue.js文档的时候,看到深入响应式原理这一节时,顺便想了想如何模仿Vue.js的双向绑定原理来实现reac...

  • vue.js

    Vue.js双向绑定的实现原理 Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统。本文仅探究...

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

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

  • 前端理论面试--VUE

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

  • Vue 基础

    Vue.js双向绑定的实现原理 MVC和MVVM模式 最简单的Vue应用 v-cloak v-bind 、v-on...

网友评论

    本文标题:Vue.js react双向绑定的实现原理

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