vue中最常见的属v-model这个数据双向绑定了，很好奇它是如何实现的呢？尝试着用原生的JS去实现一下。

首先大致学习了解下Object.defineProperty()这个东东吧！

* Object.defineProperty()

        *   对对象的属性进行 定义/修改

        * */

        let obj = {x:10}

        // 这两种方式都相对来说比较简单，直接，但是有些时候我们需要对对象的属性的修改和增加进行必要的干预

//        obj.y = 20;

//        obj.x = 100;

//        obj.x = 'abc';

//

//        let arr = [1,2,3];

//        arr.length = 'abc';//不可更改

//        console.log(arr);

//        console.log(obj.x);

//        delete obj.x;

//        console.log(obj);

        Object.defineProperty(obj, 'y', {

            configurable: false,    //设置是否可删除  false为不可删除

            value: 100

        });

        console.log(obj);

        delete obj.y;//删除

        console.log(obj);

        //设置对象某个属性值的时候，顺便设置它的属性。enumerable 可枚举 configurable 可以删除否 writable 可改值否

        Object.defineProperty(obj, 'z', {//enumerable  可枚举(没有则新添加)

            enumerable: true,//为false时，for..in object.keys  json.stringfy 不能取到该z属性

            value: 10000

        });

        for (var attr in obj) {

            console.log(attr);

        }

        Object.defineProperty(obj, 'm', {

            writable: false,//可更改

            value: 9

        });

        console.log(obj);

        obj.m = 100;

        console.log(obj);

以上总结了对象的defineProperty四个属性：configurable，enumerable，value，writable

接下来再深入认识下它的另外两个方法：set 以及get

注意：get和set不能与configurable，enumerable，value，writable同时存在

let obj = {x:10}

        let y = 100;

        Object.defineProperty(obj, 'y', {

            get() {

                //当obj的y属性被调用的时候触发，该方法的返回值将作为获取的结果

                console.log('get');

                return y;

            },

            set(value) {

                //当obj的y属性被设置的时候触发

                console.log('set', value);

                y = value;

            }

        })

        console.log(obj.y);

        obj.y = 1;

        console.log(obj.y);

 介绍完defineProperty了，最后我们一起看看如何简单的实现数据双向绑定吧！

<body>

    <input type="text" id="age">

    <h1></h1>

    <script>

        var ageElement = document.querySelector('#age');

        var h1Element = document.querySelector('h1');

        let obj = {};

        Object.defineProperty(obj, 'age', {

            get() {

            },

            set(value) {

                ageElement.value = value;

                h1Element.innerHTML = value;

            }

        })

        obj.age = 10;

        ageElement.oninput = function() {

            obj.age = this.value;

        }

       

    </script>

vue中数据双向绑定的实现原理的更多相关文章

  1. vue中数据双向绑定注意点

    最近一个vue和element的项目中遇到了一个问题: 动态生成的对象进行双向绑定是失败 直接贴代码: <el-form :model="addClass" :rules=& ...

  2. Vue的数据双向绑定和Object.defineProperty()

    Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...

  3. AngularJS中数据双向绑定(two-way data-binding)

    1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...

  4. 原生js实现 vue的数据双向绑定

    原生js实现一个简单的vue的数据双向绑定 vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时 ...

  5. 对象的属性类型 和 VUE的数据双向绑定原理

    如[[Configurable]] 被两对儿中括号 括起来的表示 不可直接访问他们 修改属性类型:使用Object.defineProperty()  //IE9+  和标准浏览器  支持 查看属性的 ...

  6. 【Vue】-- 数据双向绑定的原理 --Object.defineProperty()

    Object.defineProperty()方法被许多现代前端框架(如Vue.js,React.js)用于数据双向绑定的实现,当我们在框架Model层设置data时,框架将会通过Object.def ...

  7. vue中的双向绑定

    概述 今天对双向绑定感兴趣了,于是去查了下相关文章,发现有用脏检查的(angular.js),有用发布者-订阅者模式的(JQuery),也有用Object.defineProperty的(vue),其 ...

  8. vue实现数据双向绑定的原理

    一.知识准备Object.defineProperty( )方法可以直接在一个对象上定义一个新属性,或者修改一个已经存在的属性,并返回这个对象.Object.defineProperty(obj,pr ...

  9. Vue的数据双向绑定原理——Object-defineProperty

    一.定义 ①方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. ②vue.js的双向数据绑定就是通过Object.defineProperty方法实现的,俗称属性拦截 ...

随机推荐

  1. grunt+bower依赖管理

    安装bower(必须安装git) npm install bower -g bower按照插件命令 初始化配置 bower init 生成bower.json //如果有bower.json 直接输入 ...

  2. 含有n个元素的整型数组，将这个n个元素重新组合，求出最小的数，如{321,3,32}，最小的数为321323

    public class GetMinNumber { public static void main(String[] args) { String[] arr = null; System.out ...

  3. 再起航，我的学习笔记之JavaScript设计模式09(原型模式)

    我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 我们 ...

  4. android学习ProgressBar的简单使用

    android 提供的ProgressBar控件分为两种,一种是不带进度的进度条,一种是带进度的进度条,如果可以计算任务的完成量那么就用带进度条的,如果无法计算任务量,那么就使用不带进度的进度条.Pr ...

  5. Windows常用功能

    删除文件或目录CMD命令: rd/s/q 盘符:\某个文件夹  (强制删除文件文件夹和文件夹内所有文件)del/f/s/q 盘符:\文件名  (强制删除文件,文件名必须加文件后缀名)

  6. FFT 专题讲解

    FFT是什么? FFT是快速傅里叶变换(fast Fourier transform)的简称.在ACM领域主要是用来快速求解多项式乘法的算法, 在信号领域也有很大用途 基础知识 卷积 举个例子,给你两 ...

  7. 【leetcode】147. Insertion Sort List

    Sort a linked list using insertion sort. 链表的插入排序. 需要创建一个虚拟节点.注意点就是不要节点之间断了. class Solution { public: ...

  8. centos 7.2 配置Nginx

    1.添加资源 添加CentOS 7 Nginx yum资源库,打开终端,使用以下命令(没有换行): rpm -Uvh http://nginx.org/packages/centos/7/noarch ...

  9. Chrome打不开Pycharm运行的web应用

    这个现象困扰了我一段时间.比如在Pycharm里面运行一个Flask程序,如图所示 在Chrome中一直打不开,换了Firefox,依然如此,但是用mac自带的safari可以打开. 起初我以为是ip ...

  10. Ubuntu与Centos在登陆安全方面的比较

    Ubuntu在安装时创建的普通用户默认具有sudo权限,默认root没有设置密码,可以通过自建用户来执行sudo passwd 为root设置密码;Centos在安装时创建的普通用户默认没有sudo权 ...