首页天道酬勤vue双向绑定原理,vue中实现数据双向绑定的是

vue双向绑定原理,vue中实现数据双向绑定的是

张世龙 05-04 02:14 58次浏览

简化mvvm框架

目前,angular、reat和vue都是mvvm类型的框架

以vue为例

这里的虚拟机是vue框架,它相当于中间集线器的作用,连接了模型和视图。 如果前面显示的view发生变化,它会实时响应viewModel,如果需要,viewModel会通过ajax等方法将更改的数据传递给后台模型

同时从后台model获取的数据通过vm将值响应到前台UI

双向绑定原理

虚拟机的核心是,view和data在data发生更改时,通过Object.defineProperty () )方法的set方法进行监视,并在此之前调用定义了data和view关系的回调函数,从而

view发生了更改,因为底层input事件更改了数据响应

vue通过Object.defineProperty ()实现了数据劫持。

Object.defineProperty ()是用来做什么的? 可以控制特定于单个对象属性的操作,如读写权限和是否可枚举。 这里主要讨论两个对应的描述属性get和setvarBook={}

varname=' ';

对象. define property (book,' name ),

set :功能(value ) {

name=value

console.log ('你取了' value '这个书名;

(,

get:function () }

return' 《'+ name+ '》 '

}

() )

控制台. log (book ) )。

Book.name='vue权威指南'; //你取了vue权威指南这一书名

控制台. log (book.name; //《vue权威指南》

//get在读取这样的属性时触发

//set在设定属性值时触发

实现方法:观察者模式

观察器(objec.define property中的set )拦截数据的变化,如果数据发生变化,则通知观察者列表Dep ),其中包含与数据变化对应的update函数)、watcheete

有关具体代码实现,请访问https://www.cn blogs.com/libin-1/p/6893712.html

有关详细信息,请访问前端学习网站。

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