浅析vue的双向数据绑定

vue 的双向数据绑定是基于es5的 object对象的defineProperty属性,重写data的set和get函数来实现的。
1、defineProperty 数据展示

 1 Object.defineProperty(obj,‘name‘,{
 2    configurable:true , // false则不可以删除key值
 3    enumerable:true , // false则在枚举时候会忽略
 4    value:‘xixi‘
 5    writable:true  // false则不可更改key的value值
 6 });
 7
 8 //writable为false
 9 var obj = {};
10 Object.defineProperty(obj,‘name‘,{
11     value:‘xixi‘
12     writable:false,
13     configurable:true ,
14     enumerable:true ,
15 });
16 obj.val = ‘西瓜‘;//writable为false,不可以更改。
17
18 //configurable为false
19 var obj = {};
20 Object.defineProperty(obj,‘name‘,{
21     value:‘xixi‘
22     writable:true,
23     configurable:false ,
24     enumerable:true ,
25 });
26 obj.val = ‘西瓜‘;
27 delete obj.val //configurable为false,不可以删除。
28
29 //enumerable为false
30 var obj = {};
31 Object.defineProperty(obj,‘name‘,{
32     value:‘xixi‘
33     writable:true,
34     configurable:true ,
35     enumerable:false ,
36 });
37 for(var i in obj) {
38   console.log(obj[i])  // enumerable为false时,不会显示值
39 }

2、存取器描述

1 var obj = {};
2 Object.defineProperty(obj,‘name‘,{
3     get:function(){} | undefined,
4     set:function(){} | undefined,
5     configuracble:true | false,
6     enumerable:true | false
7 })
8 //当前使用了setter和getter方法,不许使用writable和value两个属性

当设置获取对象的某个属性的时候,可以提供getter和setter方法

 1 var obj = {};
 2 var value = ‘xixi‘;
 3 object.defineProperty(obj, ‘name‘, {
 4    get: function() {
 5        return value
 6    },
 7    set: function(val) {
 8        value = val
 9    }
10 })
11 console.log(obj.name) // xixi
12 obj.name = ‘西瓜‘;
13 console.log(obj.name) // 西瓜

原文地址:https://www.cnblogs.com/mxyr/p/9507043.html

时间: 2024-11-05 19:43:11

浅析vue的双向数据绑定的相关文章

vue的双向数据绑定

这篇文章我会仿照vue写一个双向绑定的实例,主要实v-model  ,  v-bind  ,  v-click 1.原理 Vue的双向数据绑定的原理大家可能或多或少了解一点,主要是通过 Object 对象的 defineProperty 属性,重写data的 set 和 get 函数来实现的. 2.页面结构 包含了 一个input,使用v-model指令 一个button,使用v-click指令 一个h3,使用v-bind指令. 我们最后会通过类似于vue的方式来使用我们的双向数据绑定,结合我们

Vue自定义v-model实现Vue的双向数据绑定--Vue高级特性

Vue高级特性 一.自定义v-model实现Vue的双向数据绑定 父组件中 <p>{{name}}</p> <custormModel v-model="name" /> data() { return { // 组件 custormModel 中的 input 输入改变,绑定到了这里,实现双向绑定 name: '颜色' } }, components: { custormModel } 组件custormModel <input type=&

深入vue源码,了解vue的双向数据绑定原理

大家都知道vue是一种MVVM开发模式,数据驱动视图的前端框架,并且内部已经实现了双向数据绑定,那么双向数据绑定是怎么实现的呢? 先手动撸一个最最最简单的双向数据绑定 1 <div> 2 <input type="text" name="" id="text"> 3 <span id="show"></span> 4 </div> 5 6 <script>

vue的双向数据绑定实现原理(简单)

如果有人问你,学vue学到了什么,那双向数据绑定,是必然要说的. 我们都知道,在vue中,使用数据双向绑定我们都知道是v-modle实现的. 实现原理是通过Object.defineProperty的方法实现的. 这个方法接收三个参数 obj要在其上定义属性的对象.prop要定义或修改的属性的名称.descriptor将被定义或修改的属性描述符. 还有一些属性描述符 其中的俩个, get:不存在该属性时返回undefined 当访问这个属性的时候执行 有值是返回传进来的prop. set:不存在

Vue原理--双向数据绑定

数据劫持 vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调. Object.defineProperty() Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象. Object.defineProperty(obj, prop, descriptor) 参数: obj

Vue的双向数据绑定原理是什么?

vue是采用数据劫持,并且使用发布-订阅者的开发模式.原理是观察者observer通过Object.defineProperty()来劫持到各个属性的getter setter,在数据变动的时候,会被observer观察到,会通过Dep通知数据的订阅者watcher,之后进行相应的视图上面的变化. 具体实现步骤: 第一步:需要observe的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter 这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据

聊聊 Vue 的双向数据绑定,Model 如何改变 View,View 又是如何改变 Model 的

VM 主要做了两件微小的事情: 从 M 到 V 的映射(Data Binding),这样可以大量节省你人肉来 update View 的代码(将数据绑定到view) 从 V 到 M 的事件监听(DOM Listeners),这样你的 Model 会随着 View 触发事件而改变 (view改变的时候改变数据) 1.M 到 V 实现 做到这件事的第一步是形成类似于: // template var tpl = '<p>{{ text }}</p>'; // data var data

Vue.js双向数据绑定模板渲染

准备知识 1. 前端开发基础 html.css.js2. 前端模块化基础3. 对ES6有初步的了解 vuejs官网:cn.vuejs.org HTML: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Vuejs</title> <style> .finished { text-deco

简单实现VUE的双向数据绑定

<!DOCTYPE html> <html> <head> <title>vue-双向数据绑定的简单实现</title> </head> <body> <input type="text" name="" id="inputText"> <span id='textSpan'></span> <script type=&q