浅谈Vue的响应式原理-创新互联
一、响应式的底层实现
1、Vue与MVVM
Vue是一个 MVVM框架,其各层的对应关系如下
- View层:在Vue中是绑定dom对象的HTML
- ViewModel层:在Vue中是实例的vm对象
- Model层:在Vue中是data、computed、methods等中的数据
在 Model 层的数据变化时,View层会在ViewModel的作用下,实现自动更新
2、Vue的响应式原理
Vue响应式底层实现方法是 Object.defineProperty() 方法,该方法中存在一个getter和setter的可选项,可以对属性值的获取和设置造成影响
Vue中编写了一个wather来处理数据
在使用getter方法时,总会通知wather实例对view层渲染页面
同样的,在使用setter方法时,总会在变更值的同时,通知wather实例对view层进行更新
3、响应式原理与兼容
由于 Object.defineProperty() 方法只部分支持IE9,所以Vue兼容IE版本最低为IE9,在IE9中,Vue的核心框架、vue-router、vuex是确保可以正常使用的
4、响应式原理示意图
1、在实例前声明
var vm = new Vue({ data: { name: "failte" } })
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
当前题目:浅谈Vue的响应式原理-创新互联
文章源于:http://scyanting.com/article/ddjcig.html