vue的思中双向数据绑定的原理

我们在面试中经常会被问道什么是mvc 什么是 mvvm 还有双向数据绑定的原理：

MVC：对项目的整体把控,M代表的是数据库中的数据,V代表的是前端的视图层，C用于处理M和V之间进行交互的业务逻辑(业务逻辑需要程序员自己控制，自己编写)

MVVM:主要用于一些前端的框架,对MVC三层架构中的视图层再次进行层次划分，M是当前一个视图中需要用到的数据,V就是当前视图,VM负责M和V之间的数据调度,内部已经帮你完成了数据的绑定和交互

MVC和MVVM之间的区别:MVC数据流通是单向的,MVVM是双向数据绑定

双向数据绑定：

双向数据绑定的意思就是模型中的数据可以之间更新到视图上,视图中的数据发生改变也可以直接更新到模型中能够做到双向数据绑定(通信)的原因:就是因为有VM的存在，VM内部的实现一般是框架已经处理完成,不需要程序员进行控制

双向数据绑定原理: Object.defineProperty存取器
使用Object.defineProperty提供的set方法可以在给对象赋值时,触发额外操作,即在set函数内部去处理视图的更新

// 使用 Object.defineProperty 可以给对象赋值
var obj = {};

Object.defineProperty(obj,'name',{
    value:'zxx'
})

console.log(obj.name)

var obj = {};
var initValue = 'zxx'
Object.defineProperty(obj,'name',{
    get:function(){
        console.log('我被读取了')
        return initValue
    },
    set:function(v){
        console.log('我被赋值了')
        initValue = v
    }
})
obj.name = 'lxy'
console.log(obj.name)

说道 Object.defineProperty 将属性添加到对象，或修改现有属性的特性。

它的语法有三个参数

Object.defineProperty(object, propertyname, descriptor)

object
必需。  要在其上添加或修改属性的对象。  这可能是一个本机 JavaScript 对象（即用户定义的对象或内置对象）或 DOM 对象。
propertyname
必需。  一个包含属性名称的字符串。
descriptor
必需。  属性描述符。  它可以针对数据属性或访问器属性。

Object.defineProperty它的返回值是 已经被修改了的对象

可使用 Object.defineProperty 函数来执行以下操作：

向对象添加新属性。当对象不具有指定的属性名称时，发生此操作。
修改现有属性的特性。当对象已具有指定的属性名称时，发成此操作。

描述符对象中会提供属性定义，用于描述数据属性或访问器属性的特性。描述符对象是 Object.defineProperty 函数的参数。

若要向对象添加多个属性或修改多个现有属性，可使用 Object.defineProperties 函数 (JavaScript)

注意：

如果以下任一条件为 true，则引发 TypeError 异常：

object 参数不是对象。
此对象不可扩展且指定的属性名称不存在。
descriptor 具有 value 或 writable 特性，并且具有 get 或 set 特性。
descriptor 具有 get 或 set 特性，上述特性不是函数且已定义。
指定的属性名称已存在，现有属性具有 false 的 configurable 特性，且 descriptor 包含一个或多个与现有属性中特性不同的特性。但是，当现有属性具有 false 的 configurable 特性和 true 的 writable 特性时，则允许 value 或 writable 特性不同。

以上是查阅文档和自己的总结整理的希望对你们有帮助

vue的思中双向数据绑定的原理

猜你喜欢