最近老是有兄弟问我，Vue双向绑定的原理，以及简单的原生js写出来实现，我就来一个最简单的双向绑定，

aristark 发布于2019-08-23 12:40 / 2186人阅读

摘要：废话不多说直接看效果图代码很好理解，但是在看代码之前需要知道双向绑定的原理其实就是基于实现的双向绑定官方传送门这里我们用官方的话来说方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。

废话不多说直接看效果图

代码很好理解，但是在看代码之前需要知道Vue双向绑定的原理其实就是基于
Object.defineProperty  实现的双向绑定 官方传送门

这里我们用官方的话来说
Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
语法：
Object.defineProperty(obj, prop, descriptor)
参数
obj：
要在其上定义属性的对象。
prop：
要定义或修改的属性的名称。
descriptor：
将被定义或修改的属性描述符。

这里面要说的真的就太多了，我们就调双向绑定需要用到的说一下就可以了，需要了解更多的朋友可以进官网官网看更加详细的

这里我们就只是说一下 Object.defineProperty里面的核心的 get 和 set

get

let data ={} ;
let index = 1;
Object.defineProperty(data,"age",{ //不明白参数什么含义的请往上看咯
    get:function(){
        return index;//获取到了定义的index变量
    }
})
console.log(data); // {age:1}

怎么样，是不是非常简单，那么我们趁热赶紧看一下set吧

set

var data ={} ;
var index= 1;
Object.defineProperty(data,"age",{
    get:function(){
        return index;
    },
    set:function(newZhi){
        index=newZhi;
    }
})
console.log(data);// {age:1}
哈哈 是不是感觉和上面的get是一样的呢？用法都是一样的 那么楼主能来点不一样的嘛？
回答：可以


----------


Object.defineProperty(data,"age",{
    get:function(){
        return index;
    },
    set:function(newZhi){
        index=newZhi+10;
    }
})
console.log(data); // {age:11}

既然Object.defineProperty里面的set和get看懂了就可以直接上手简单的双向绑定啦，这时候有的小伙伴可能就问了：什么？这么快？回答：就是这么快
直接贴代码每一行都是有注释的赶紧看看吧


        
        我是测试数据的

怎么样？是不是很简单呢 十行代码就完事了(当然只是简单的双向绑定，拓展性很强）

云服务器 GPU云服务器 js双向绑定 js双向数据绑定 js双向绑定数据 js 数据双向绑定

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98920.html

最近老是有兄弟问我，Vue双向绑定的原理，以及简单的原生js写出来实现，我就来一个最简单的双向绑定，

摘要：废话不多说直接看效果图代码很好理解，但是在看代码之前需要知道双向绑定的原理其实就是基于实现的双向绑定官方传送门这里我们用官方的话来说方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。废话不多说直接看效果图 showImg(https://segmentfault.com/img/bVbiYY5?w=282&h=500); 代码很好理解，但是在看代码之前...

zhangfaliang 2019-08-02 11:52 评论0 收藏0
【Vue原理】VModel - 白话版

摘要：执行的时候，会绑定上下文对象为组件实例于是中的就能取到组件实例本身，的代码块顶层作用域就绑定为了组件实例于是内部变量的访问，就会首先访问到组件实例上。其中的获取，就会先从组件实例上获取，相当于。写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版本【2.5.17】如果你觉得...

keke 2019-08-23 18:25 评论0 收藏0
javascript知识点

摘要：模块化是随着前端技术的发展，前端代码爆炸式增长后，工程化所采取的必然措施。目前模块化的思想分为和。特别指出，事件不等同于异步，回调也不等同于异步。将会讨论安全的类型检测惰性载入函数冻结对象定时器等话题。 Vue.js 前后端同构方案之准备篇——代码优化目前 Vue.js 的火爆不亚于当初的 React，本人对写代码有洁癖，代码也是艺术。此篇是准备篇，工欲善其事，必先利其器。我们先在代...

Karrdy 2019-08-26 11:34 评论0 收藏0
前端面试题大集合：来自真实大厂的532道面试题(只有题，没有答案)

答案自己谷歌或百度找。一、来源背景面试题是来自微博@牛客网发布的真实大厂前端面经题目，我一直在收集题目长期一个一个的记录下来的，可能会有重复，但基本前端的面试大纲和需要掌握的知识都在其中了，面试题仅做学习参考，学习者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。二、532道前端真实大厂面试题 express和koa的对比，两者中间件的原理，koa捕获异常多种情...

Kerr1Gan 2019-08-26 12:20 评论0 收藏0