Vue的响应式原理
Vue的响应式原理
一、响应式的底层实现
1、Vue与MVVM
Vue是一个 MVVM框架
,其各层的对应关系如下
View层
:在Vue中是绑定dom对象的HTMLViewModel层
:在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"
}
})
在实例前声明的属性会在实例时添加 getter()
、setter()
方法,因此此时的name是响应式的,每当name变化时,会自动更新视图
2、在实例后添加
vm.name = "failte"
由于data中没有该属性,因此实例后,此时的name是非响应式的,name变化时,不会更新视图
若需要转换为响应式数据,需要使用 Vue.set()
方法手动添加为响应式属性
Vue.set(vm.data, "name", "ajaccio")
//Vue.$set是该方法的别名
Vue的响应式原理的更多相关文章
- vue.js响应式原理解析与实现
vue.js响应式原理解析与实现 从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很 ...
- vue深入响应式原理
vue深入响应式原理 深入响应式原理 — Vue.jshttps://cn.vuejs.org/v2/guide/reactivity.html 注意:这里说的响应式不是bootsharp那种前端UI ...
- Vue 数据响应式原理
Vue 数据响应式原理 Vue.js 的核心包括一套“响应式系统”.“响应式”,是指当数据改变后,Vue 会通知到使用该数据的代码.例如,视图渲染中使用了数据,数据改变后,视图也会自动更新. 举个简单 ...
- 深入解析vue.js响应式原理与实现
vue.js响应式原理解析与实现.angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很好奇vue.js是如何监测数据更新并且重新渲染页面.vue.js ...
- 一探 Vue 数据响应式原理
一探 Vue 数据响应式原理 本文写于 2020 年 8 月 5 日 相信在很多新人第一次使用 Vue 这种框架的时候,就会被其修改数据便自动更新视图的操作所震撼. Vue 的文档中也这么写道: Vu ...
- Vue.js响应式原理
写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:answershuto/learnV ...
- Vue的响应式原理---(v-model中的双向绑定原理)
Vue响应式原理 不要认为数据发生改变,界面跟着更新是理所当然. 具体代码实现:https://gitee.com/ahaMOMO/Vue-Responsive-Principle.git 看下图: ...
- vue系列---响应式原理实现及Observer源码解析(一)
_ 阅读目录 一. 什么是响应式? 二:如何侦测数据的变化? 2.1 Object.defineProperty() 侦测对象属性值变化 2.2 如何侦测数组的索引值的变化 2.3 如何监听数组内容的 ...
- Vue.js 响应式原理
1. Vue2.x 基于 Object.defineProperty 方法实现响应式(Vue3 将采用 Proxy) Object.defineProperty(obj, prop, descript ...
随机推荐
- OO第三单元总结——JML
目录 写在前面 JML理论基础 JML工具链 JMLUnitNG的使用 架构设计 Bug分析 心得体会 写在前面 OO的第三单元学习结束了,本单元我们学习了如何使用JML语言来对我们的程序进行规格化设 ...
- java基础 4 继承(3)this 与 super关键字
this用来指向当前实例对象,用来区别成员变量与方法的形参 super可以用来访问父类的方法或成员变量,当子类构造函数需要显示的调用父类的构造函数时,super()必须为构造函数中的第一条语句.
- IO与文件读写---Java的IO流架构
http://www.blogjava.net/pengpenglin/archive/2010/03/03/314239.html#314399 http://www.blogjava.net/jo ...
- 如何在 Linux 环境下配置 Nagios Remote Plugin Executor (NRPE)
为 NRPE 配置自定义命令 远程服务器上安装 下面列出了一些可以用于 NRPE 的自定义命令.这些命令在远程服务器的 /etc/nagios/nrpe.cfg 文件中定义. ## 当 1.5.15 ...
- zookeeperclient设置监听
1.目的 zookeeper是一个分布式服务管理框架.zookeeper提供了对client的通知.即在server端的节点有改动或者删除的时候,能够给client进行通知. 2.server端部署 ...
- 阅读《Android 从入门到精通》(33)——Intent 分类
Intent 分类 显式 Intent:Intent("android.intent.action.CALL", Uri.parse("tel:" + stri ...
- GLib-GObject-WARNING **: Two different plugins tried to register
使用 Ubuntu vivid 的 glib-2.44.1 的程序总是打印类似这种警告: GLib-GObject-WARNING **: Two different plugins tried to ...
- [LeetCode][Java] Roman to Integer
题目: Given a roman numeral, convert it to an integer. Input is guaranteed to be within the range from ...
- 【java】itoo项目实战之hibernate 懒载入优化性能
在做itoo 3.0 的时候,考评系统想要上线,就開始导入数据了,仅仅导入学生2万条数据,可是导入的速度特别的慢.这个慢的原因是由于导入的时候进行了过多的IO操作.可是导入成功之后,查询学生的速度更加 ...
- JSON使用总结
参考网站 官网: http://www.json.org/ 菜鸟教程:http://www.runoob.com/json/json-tutorial.html 什么是 JSON ? JSON 指的是 ...