vue双向绑定原理

简析mvvm框架

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

以vue为例

1.png

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

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

双向绑定原理

2.png

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 是在设置属性值的时候触发的

实现方法: 观察者模式

3.png

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

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

想要了解更多相关知识,可访问 前端学习网站!!

以上就是vue双向绑定原理的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏