浅谈vue双向绑定原理

简析mvvm框架

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

以vue为例

这里的vm 就是vue框架，它相当于中间枢纽的作用,连接着model 和view.

当前台显示的view发生变化了，它会实时反应到viewModel上，如果有需要，viewModel 会通过ajax等方法将改变的数据传递给后台model
同时从后台model获取过来的数据，通过vm将值响应到前台UI上

双向绑定原理

vm的核心是view 和 data

当data 有变化的时候它通过Object.defineProperty(）方法中的set方法进行监控，并调用在此之前已经定义好data 和view的关系了的回调函数，来通知view进行数据的改变
而view 发生改变则是通过底层的input 事件来进行data的响应更改

vue是通过Object.defineProperty()来实现数据劫持的。

Object.defineProperty( )是用来做什么的？它可以来控制一个对象属性的一些特有操作，比如读写权、是否可以枚举，这里我们主要先来研究下它对应的两个描述属性get和set

varBook= {}varname= '';Object.defineProperty(Book, 'name', {set:function(value) {name= value;console.log('你取了一个书名叫做'+ value);},get:function() {return'《'+ name+ '》'}})console.log(Book)Book.name= 'vue权威指南'; // 你取了一个书名叫做vue权威指南console.log(Book.name); // 《vue权威指南》// get 是在读取那么属性的时候触发的// set 是在设置属性值的时候触发的

实现方法：观察者模式

Observer（Objec.defineProperty中的set）监听data的变化，当data有变化的时候通知观察者列表Dep（里面有与data变化对应的update函数）,watcher负责向观察者列表里添加（订阅）对应的更新函数，Dep里的更新函数执行完了之后将最新的值更新到view上。

具体的代码实现可参考：https://www.cnblogs.com/libin-1/p/6893712.html

浅谈vue双向绑定原理相关推荐

浅谈vue双向绑定的原理
一.什么是双向绑定我们先从单向绑定切入单向绑定非常简单,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新双向绑定就很容易联想到了,在单向绑定 ...
浅聊vue双向绑定原理Object.defineProperty-/-Proxy
什么是双向绑定呢?vue又是怎么做的我们接下来就聊一聊什么是双向绑定? 当数据模型data变化时,页面视图会得到响应更新 vue又是怎么做的? vue其实现原理是对data的getter/sette ...
vue双向绑定原理及实现
vue双向绑定原理及实现一.MVC模式二.MVVM模式三.双向绑定原理 1.实现一个Observer 2.实现一个Watcher 3.实现一个Compile 4.实现一个MVVM 四.最后写一个 ...
【vue双向绑定原理浅析】
vue双向绑定原理浅析 1.什么是双向绑定? 所谓双向绑定,指的是vue实例中的data与其渲染的DOM元素的内容保持一致,无论谁被改变,另一方会相应的更新为相同的数据.(数据变化更新视图,视图变 ...
前端技巧|vue双向绑定原理，助你面试成功
在面试一些大厂的时候,面试官可能会问到你vue双向数据绑定的原理是什么?有些小伙伴不知道是什么东西,这样你在面试官的眼里就大打折扣了.今天小千就来给大家介绍一下vue的双向绑定原理,千万不要错过啦. ...
Vue双向绑定原理代码实现
1.代码实现Vue双向绑定与事件绑定,v-bind v-model v-on DOM结构准备 <body><div id="app"><form> ...
浅谈Vue响应式原理
一.Vue中的响应式 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新. 二.响应式的基本原理 1.通过Objec ...
浅谈Vue 自定义事件——原理及用法
前言在Vue 中,对HTML的原生事件做了支持.例如:click.focus.change等事件.除了原生事件外,Vue 还允许用户自定义事件. 什么是事件?什么是自定义事件? 在了解自定义事件前, ...
通俗易懂了解Vue双向绑定原理及实现
https://www.cnblogs.com/wangjiachen666/p/9883916.html 亲测可用

浅谈vue双向绑定原理

浅谈vue双向绑定原理相关推荐

最新文章

热门文章