Vue的响应式原理

栏目: JavaScript · 发布时间: 6年前

内容简介:Vue是一个在Vue响应式底层实现方法是

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、响应式原理示意图

Vue的响应式原理

二、响应式数据

1、在实例前声明

var vm = new Vue({
    data: {
        name: "failte"
    }
})
复制代码

在实例前声明的属性会在实例时添加 getter()setter() 方法,因此此时的name是响应式的,每当name变化时,会自动更新视图

2、在实例后添加

vm.name = "failte"
复制代码

由于data中没有该属性,因此实例后,此时的name是非响应式的,name变化时,不会更新视图

若需要转换为响应式数据,需要使用 Vue.set() 方法手动添加为响应式属性

Vue.set(vm.data, "name", "ajaccio")
//Vue.$set是该方法的别名
复制代码

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

UNIX编程艺术

UNIX编程艺术

Eric S. Raymond / 姜宏、何源、蔡晓俊 / 电子工业出版社 / 2006-2 / 59.00元

本书主要介绍了Unix系统领域中的设计和开发哲学、思想文化体系、原则与经验,由公认的Unix编程大师、开源运动领袖人物之一Eric S. Raymond倾力多年写作而成。包括Unix设计者在内的多位领域专家也为本书贡献了宝贵的内容。本书内容涉及社群文化、软件开发设计与实现,覆盖面广、内容深邃,完全展现了作者极其深厚的经验积累和领域智慧。一起来看看 《UNIX编程艺术》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试