Vue中的双向绑定原理（个人理解篇）

最新推荐文章于 2024-05-08 22:21:46 发布

星云好酷

最新推荐文章于 2024-05-08 22:21:46 发布

阅读量370

点赞数

分类专栏： vue经验文章标签： vue

本文链接：https://blog.csdn.net/u014728574/article/details/103846894

版权

vue经验专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Vue中的双向绑定原理

据说Vue2.0中的双向绑定原理是采用数据劫持和订阅-观察者模式的结合而实现的。其中view发生变化通过底层input事件通知到data层；从model到view涉及到一个方法–>Object.defineProperty()

Object.defineProperty用法

Object.defineProperty(obj,key,des);

该方法用于为对象新增/修改属性并返回该对象。其中obj为添加/修改属性的对象，key为属性名称（新增的或已有的），des为属性描述符。属性描述符des就是描述key的特性，分成两类：

数据描述符：含有value（属性的值）,writable（默认为false不能被重新赋值,当其为true时，属性才能被改变）两种键值；
存取描述符：含有set（当属性被改变时调用此方法）,get（当属性被读取时被调用的方法），若configurable为false,那么该属性不能被修改。

此外desc属性描述符有公共的键值：

configurable ：可配置性定义对象的属性是否可被删除，默认为false,当属性不可配置时不能在数据和访问器属性类型之间进行切换，为true时才能被删除；
enumerable：可枚举性定义对象的属性是否可以在for...in和Object.keys(..)中被枚举，默认为false，为true时才能成为对象的枚举属性。若直接对对象属性进行定义或赋值，则enumerable为true。

通过定义属性使用get,set就可以通知到订阅者，以下是简单的双向绑定实现：
mVue.js

function mVue(obj){
    let {myEl,myData}={...obj};

    this.myEl=document.querySelector(myEl);
    this.myData={...myData};
    let tempData=this.myEl;
    Object.keys(myData).forEach(key=>{
        Object.defineProperty(this.myData,key,{
            configurable:true,
            enumerable:true,
            set:function(val){
                noticeView(tempData,val);
            },
            get:function(newVal){
                return newVal;
            }
        })
    });
    addEventListen(this.myEl,this.myData);
}

function addEventListen(el,data){
    let inputElement=el.querySelector('input');
    inputElement.addEventListener('input',function(e){
        for(pro in data){
            data[pro]=e.target.value;
        }
    });
}


function noticeView(el,val){
    let spanElement=el.querySelector('span');
    spanElement.innerText=val;
}

test.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<style>
   label{
       color:#bfbfbf;
   }
   span{
       background: #265b9c;
       color: #dce1e4;
   }
</style>
<body>
   <div id="container">
       <h5>Vue双向绑定实现：</h5>
       <input type="text"/>
       <hr/>
       <br/>
       <label>></label>
       <span></span>
   </div>
   <script src="js/mVue.js"></script>
   <script>
       const myVue=new mVue({
           myEl:'#container',
           myData:{
               message:'Hello World!'
           }
       })
   </script>
</body>
</html>

效果如下：
在这里插入图片描述

结尾

外面手写的双向绑定例子有点看不懂，总之原理大概知道了。还有一点，在实际运用中，Vue是不能检测到对象属性的添加/删除，有时碰到比较复杂的自定义组件，在数据绑定上有时数据已更新但视图不更新的情况，这时不妨试用一下Vue.$set(obj,value)或Vue.$set(arr,index,value)。

后记

有文章解释Vue3.0的响应式不再依赖Object.defineProperty而是使用Proxy对象

Proxy

顾名思义Proxy是代理，是ES6中的新特性，用于包装其第一个参数target对象，而定义代理行为的是第二参数handler对象( 可为空对象{ } ).

let handler={
	get:function(target,name){
		return name in target?target[name]:66;
	},
	set:function(target,prop,value){
		if(prop=='age'){
			if(!Number.isInteger(value)){
				throw new Error("The age is not an integer");
			}
			if(value>200){
				throw new Error("The age seems invalid.");
			}
			target[prop]=value;
		}
	}
};

let target={};
let proxyObj=new Proxy(target,handler);

target.age="age";// 抛出异常: Uncaught TypeError: The age is not an integer
target.age=290;// 抛出异常: Uncaught TypeError: The age seems invalid.
target.age=10;
console.log(target.age);//10

Proxy代理可以帮子类实现继承，创建特定属性对象，拓展一个对象等，但是并不兼容IE浏览器，

Object.defineProperty和Proxy的区别

星云好酷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中的双向绑定原理（个人理解篇）

Vue中的双向绑定原理据说Vue中的双向绑定原理是采用数据劫持和订阅-观察者模式的结合而实现的。其中view发生变化通过底层input事件通知到data层；Object.defineProperty用法Object.defineProperty(obj,key,des);obj为添加/修改属性的对象，key为属性名称（新增的或已有的），des为属性描述符。属性描述符des就是描述key的...
复制链接

扫一扫