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

![Vue的响应式原理示意图](https://hn-failte.github.io/assets/posts/vue-bottom-implementation.png#pic_center =30x30)

二、响应式数据

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的响应式原理的更多相关文章

  1. vue.js响应式原理解析与实现

    vue.js响应式原理解析与实现 从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很 ...

  2. vue深入响应式原理

    vue深入响应式原理 深入响应式原理 — Vue.jshttps://cn.vuejs.org/v2/guide/reactivity.html 注意:这里说的响应式不是bootsharp那种前端UI ...

  3. Vue 数据响应式原理

    Vue 数据响应式原理 Vue.js 的核心包括一套“响应式系统”.“响应式”,是指当数据改变后,Vue 会通知到使用该数据的代码.例如,视图渲染中使用了数据,数据改变后,视图也会自动更新. 举个简单 ...

  4. 深入解析vue.js响应式原理与实现

    vue.js响应式原理解析与实现.angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很好奇vue.js是如何监测数据更新并且重新渲染页面.vue.js ...

  5. 一探 Vue 数据响应式原理

    一探 Vue 数据响应式原理 本文写于 2020 年 8 月 5 日 相信在很多新人第一次使用 Vue 这种框架的时候,就会被其修改数据便自动更新视图的操作所震撼. Vue 的文档中也这么写道: Vu ...

  6. Vue.js响应式原理

      写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:answershuto/learnV ...

  7. Vue的响应式原理---(v-model中的双向绑定原理)

    Vue响应式原理 不要认为数据发生改变,界面跟着更新是理所当然. 具体代码实现:https://gitee.com/ahaMOMO/Vue-Responsive-Principle.git 看下图: ...

  8. vue系列---响应式原理实现及Observer源码解析(一)

    _ 阅读目录 一. 什么是响应式? 二:如何侦测数据的变化? 2.1 Object.defineProperty() 侦测对象属性值变化 2.2 如何侦测数组的索引值的变化 2.3 如何监听数组内容的 ...

  9. Vue.js 响应式原理

    1. Vue2.x 基于 Object.defineProperty 方法实现响应式(Vue3 将采用 Proxy) Object.defineProperty(obj, prop, descript ...

随机推荐

  1. OO第三单元总结——JML

    目录 写在前面 JML理论基础 JML工具链 JMLUnitNG的使用 架构设计 Bug分析 心得体会 写在前面 OO的第三单元学习结束了,本单元我们学习了如何使用JML语言来对我们的程序进行规格化设 ...

  2. java基础 4 继承(3)this 与 super关键字

    this用来指向当前实例对象,用来区别成员变量与方法的形参 super可以用来访问父类的方法或成员变量,当子类构造函数需要显示的调用父类的构造函数时,super()必须为构造函数中的第一条语句.

  3. IO与文件读写---Java的IO流架构

    http://www.blogjava.net/pengpenglin/archive/2010/03/03/314239.html#314399 http://www.blogjava.net/jo ...

  4. 如何在 Linux 环境下配置 Nagios Remote Plugin Executor (NRPE)

    为 NRPE 配置自定义命令 远程服务器上安装 下面列出了一些可以用于 NRPE 的自定义命令.这些命令在远程服务器的 /etc/nagios/nrpe.cfg 文件中定义. ## 当 1.5.15 ...

  5. zookeeperclient设置监听

    1.目的 zookeeper是一个分布式服务管理框架.zookeeper提供了对client的通知.即在server端的节点有改动或者删除的时候,能够给client进行通知. 2.server端部署 ...

  6. 阅读《Android 从入门到精通》(33)——Intent 分类

    Intent 分类 显式 Intent:Intent("android.intent.action.CALL", Uri.parse("tel:" + stri ...

  7. GLib-GObject-WARNING **: Two different plugins tried to register

    使用 Ubuntu vivid 的 glib-2.44.1 的程序总是打印类似这种警告: GLib-GObject-WARNING **: Two different plugins tried to ...

  8. [LeetCode][Java] Roman to Integer

    题目: Given a roman numeral, convert it to an integer. Input is guaranteed to be within the range from ...

  9. 【java】itoo项目实战之hibernate 懒载入优化性能

    在做itoo 3.0 的时候,考评系统想要上线,就開始导入数据了,仅仅导入学生2万条数据,可是导入的速度特别的慢.这个慢的原因是由于导入的时候进行了过多的IO操作.可是导入成功之后,查询学生的速度更加 ...

  10. JSON使用总结

    参考网站 官网: http://www.json.org/ 菜鸟教程:http://www.runoob.com/json/json-tutorial.html 什么是 JSON ? JSON 指的是 ...