A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 小江哥 黑马粉丝团   /  2019-12-10 16:39  /  1313 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 小江哥 于 2019-12-10 16:41 编辑

Vue的响应式原理一、Vue与MVVM
Vue是一个MVVM框架,其各层的对应关系如下
  • View层:在Vue中是绑定对象的HTML
  • ViewModel层:在Vue中是实例的vm对象
  • Model层:在Vue中是data、computed、methods等的数据

二、Vue的响应式原理
Vue响应式底层实现方法是Object.defineProperty()方法,该方法中存在一个getter和setter的可选项,可以对属性的获取和设置造成影响
Vue中编写了一个wather来处理数据
在使用getter方法时,总会通知watcher实例对View层渲染页面
同样的,在使用setter方法时,总会在变更值的同时,通知watcher
三、响应式原理与兼容
由于Object.defineProperty()方法只支持IE9,所以Vue兼容IE版本最低为IE9,在IE9中,Vue的核心框架、vue-router、vuex是确保可以使用的
四、响应式原理示意图

响应式原理示意图.jpg (165.57 KB, 下载次数: 60)

响应式原理示意图.jpg

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马