vue 双向数据绑定原理

采用defineProperty的两个方法get、set

示例

1 <!-- 表单 -->
2 <input type="text" id="input">
3 <!-- 展示 -->
4 <p id="desc"></p>
 1 let obj = {};
 2 let temp = {};//采用临时变量代理obj
 3 Object.defineProperty(obj,‘name‘,{
 4     //获取obj的name属性会触发
 5     get(){
 6         return temp[‘name‘];
 7     },
 8     //给obj的name属性赋值会触发
 9     set(val){
10         temp[‘name‘] = val;//改变temp的结果
11         input.value = val;//将值赋值到输入框
12         desc.innerText = val; //将值显示到输入框下面
13         //obj.name = val; //死循环,不能采取这种方式赋值,采用temp代理方式赋值和取值
14     }
15 });
16
17 //设置了id值不需要document.getElementById()
18 //调用上面的set方法,设置初始值
19 obj.name = "message";
20 //调用上面的get方法,获取属性值并放到输入框
21 input.value = obj.name;
22
23 //输入框的变化时执行,这里不能使用箭头函数,因为箭头函数不绑定this,找的是上下文的this
24 input.addEventListener(‘input‘,function(){
25     //当值变化时会调用set方法
26     obj.name = this.value;
27 });

defineProperty扩展

 1 // Object.defineProperty(obj,‘name‘,{
 2 //     configurable:false, //是否可删除
 3 //     writable:false, //是否可重新赋值
 4 //     enumerable:false,//是否可枚举,false不能for in循环和Object.keys(obj),
 5 //     value:1
 6 // });
 7 // Object.keys(obj)返回一个给定对象obj的所有可枚举属性的字符串数组,即obj的属性名数组
 8
 9 // 若有:
10 let obj2 = {};
11
12 // 一方面设置属性和值
13 obj2.name = 1;
14 // 等同于:(后三个属性的默认值都是true)
15 Object.defineProperty(obj2, "name", {
16     value : 1,
17     writable : true,
18     configurable : true,
19     enumerable : true
20 });
21
22 // 另一方面设置属性和值
23 Object.defineProperty(obj2, "name", {
24     value : 1
25 });
26 // 等同于:(后三个属性的默认值都是false)
27 Object.defineProperty(obj2, "name", {
28     value : 1,
29     writable : false,
30     configurable : false,
31     enumerable : false
32 });

原文地址:https://www.cnblogs.com/ainyi/p/9444315.html

时间: 2024-10-28 09:45:51

vue 双向数据绑定原理的相关文章

vue双向数据绑定原理探究(附demo)

昨天被导师叫去研究了一下vue的双向数据绑定原理...本来以为原理的东西都非常高深,没想到vue的双向绑定真的很好理解啊...自己动手写了一个. 传送门 双向绑定的思想 双向数据绑定的思想就是数据层与UI层的同步,数据再两者之间的任一者发生变化时都会同步更新到另一者. 双向绑定的一些方法 目前,前端实现数据双向数据绑定的方法大致有以下三种: 1.发布者-订阅者模式(backbone.js) 思路:使用自定义的data属性在HTML代码中指明绑定.所有绑定起来的JavaScript对象以及DOM元

vue双向数据绑定原理

1.实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值通知订阅者2.实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,以及绑定相应的更新函数3.实现一个Watcher,作为连接Observer和Compile的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图4.mvvm入口,整合以上三者 原文地址:https://blog.51cto.com/13550695/2467904

vue和angular双向数据绑定原理

都是视图和数据的双向传递: angular双向数据绑定原理: 就是通过脏值检测的方式判断数据是否有变更: 当数据中的值改变的化,就会到$degiest(是vue内部的方法)中循环查找,当值不改变了,就会把数据显示到视图中: vue双向数据绑定原理: 数据劫持,使用ES5的Object.definpropoty() 方法监控的数据,数据的读取使用的是setter和getter,用于视图和数据的同步绑定:

vue中实现双向数据绑定原理,使用了Object.defineproperty()方法,方法简单

在vue中双向数据绑定原理,我们一般都是用v-model来实现的 ,但一般在面试话会问到其实现的原理, 方法比较简单,就是利用了es5中的一个方法.Object.defineproperty(),它有三个参数, Object.defineproperty(obj,'val',attrObject), 参数1: obj是属性所在的对象,参数2: 'val',属性名,它是一个string类型,参数3: {}属性所描述的对象 详情可以看Object.defineproperty的文档 下面直接上dem

angular和vue双向数据绑定

angular和vue双向数据绑定的原理(重点是vue的双向绑定) 我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象90%以上都只是用到数据属性;我们向来讲解下数据属性和访问器属性到底是什么? 数据属性:数据属性包含一个数据值的位置,在这个位置可以读取和写入值. 访问器属性:访问器属性不包含数据值;他们包含一对getter和setter函数在读取访问器属性时,会调用getter函数,这个函数负责返回有效的值,在写

vue 双向数据绑定的实现学习(二)- 监听器的实现

废话:上一篇https://www.cnblogs.com/adouwt/p/9928278.html 提到了vue实现的基本实现原理:Object.defineProperty() -数据劫持 和 发布订阅者模式(观察者),下面讲的就是数据劫持在代码中的具体实现. 1.先看如何调用 new一个对象,传入我们的参数,这个Myvue ,做了啥? 上面看到了在实例化一个Myvue 对象的时候,会执行init方法, init 方法做了两个事,调用了observer 方法,和 实例化调用了 compil

[Vue源码]一起来学Vue双向绑定原理-数据劫持和发布订阅

有一段时间没有更新技术博文了,因为这段时间埋下头来看Vue源码了.本文我们一起通过学习双向绑定原理来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫持和发布订阅 一起来学Vue模板编译原理(一)-Template生成AST 一起来学Vue模板编译原理(二)-AST生成Render字符串 一起来学Vue虚拟DOM解析-Virtual Dom实现和Dom-diff算法 这些文章统一放在我的git仓库:https://github.com/yzsun

React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑定 * 事件对象: 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象包含着所有与事件有关的信息 * 表单事件: 获取表单的值 * 1.监听表单的改变事件 ---onChange * 2.在改变的事件里面获取表单输入的值 ---event * 3.把表单输入的值赋值给username

vue双向绑定原理

vue双向绑定原理的核心 它的实现的核心是通过Object.defineProperty(),对data的每个属性进行了get.set的拦截. 其实只要Object.defineProperty()已经可以实现双向绑定,只是这样做效率非常低. 观察者模式 它在双向绑定当中是什么角色呢? 它其实是让双向绑定更有效率 为什么? 观察者模式,它是一对多的一种模式,在vue里面,"一"是改了某一data数据,"多"是页面上凡是用了这个数据的地方,都更新.这就是页面上的很多&