深入理解Vue响应式原理
前言
Vue响应式原理是Vue最独特的特性之一，当数据模型进行修改时，视图就会进行更新，这使得状态管理简单直接，但是其底层的细节还是需要我们深入学习理解，这样遇到一些问题我们才能快速进行定位，并解决；下面我将带大家由浅入深，逐步理解Vue的响应式原理；
文章の目录
- 前言
- 如何监测数据的变化
- 注意事项
- 对象
- 数组
- 写在最后
如何监测数据的变化
要想准确响应数据的变化，首先需要精确及时的监测数据的变化，Vue检测数据的变化核心还是通过Object.defineProperty();下面通过实例为大家详细阐述Vue检测数据变化的过程，代码示例如下：
<script type="text/javascript" >let data = {name:'xizhutao',address:'安徽',}//创建一个监视的实例对象，用于监视data中属性的变化const obs = new Observer(data) console.log(obs) //准备一个vm实例对象let vm = {}vm._data = data = obsfunction Observer(obj){//汇总对象中所有的属性形成一个数组const keys = Object.keys(obj)//遍历keys.forEach((k)=>{Object.defineProperty(this,k,{get(){return obj[k]},set(val){console.log(`${k}被改了，我要去解析模板，生成虚拟DOM.....我要开始忙了`)obj[k] = val}})})}</script>
以上代码检测数据变化的思路如下：
一、封装一个Observer构造函数，接收一个data数据对象，通过Object.keys()方法，将接收到的数据对象中的属性存放到一个数组中，然后调用forEach()方法对数组进行遍历，用Object.defineProperty()给this即Observer实例对象添加数组中的每一项属性；
二、通过get、set方法监测数据的操作，一旦Observer构造函数的实例对象上的属性被访问，get函数就会被调用，返回data数据中的属性值，同样的Observer构造函数的实例对象上的属性被修改了，data数据中的属性值也实现了修改；这就是Vue监测数据变化的原理；
注意事项
对象
Vue不能监测对象的Property的添加和删除，在监测数据变化原理中讲到，在Vue初始化实例对象时，会将data对象中的属性存到数组中进行遍历，然后调用Object.defineProperty()给属性添加get ， set方法监视data对象中属性的变化，因此如果我们在初始化实例对象后，给Vue实例添加属性，并不会给添加的属性添加对应的get、set方法，导致添加的属性并不是响应式的；如果你还不理解，请看以下示例代码：
var vm = new Vue({data:{a:11}
})
// vm.a 是响应式的
vm.b = 22
// vm.b 是非响应式的
以上代码中的a属性在初始化实例对象时就有，因此会生成相对应的get、set方法，然而b属性是在初始化vm实例后添加的属性，因此并没有生成相对于的set和get方法；导致属性b并不是响应式的；
针对以上问题我们可以使用Vue.set(object, propertyName, value)或者vm.$set ( target，propertyName/index，value)方法解决，但是此方法只能给嵌套的对象添加属性，不能给vm或vm的根数据对象添加响应式属性；
代码示例如下：
//someObject为嵌套在data数据对象内的一个对象
Vue.set(vm.someObject, 'b', 22)
vm.$set(this.someObject,'b',22)
⚠注意：set方法不能给vm或vm的根数据对象设置属性，只能给跟数据对象中嵌套的对象设置属性❗❗❗
数组
Vue不能监测以下数组的变动：1、通过索引号修改数组的对应值，修改后的值不是响应式的；2.通过length修改数组长度时，数据不是响应式的；示例如下：
var vm = new Vue({data: {items: ['a', 'b', 'c']}
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的
为了解决以上通过索引添加的数据不是响应式的，可以使用以下方法解决：
1、Vue.set(vm.items, indexOfItem, newValue)
2、vm.$set(vm.items, indexOfItem, newValue)
3、vm.items.splice(indexOfItem, 1, newValue)
为了解决通过length属性改变数组长度也是响应式的，可以使用以下方法：
vm.items.splice(newLength)
代码示例如下：
var vm = new Vue({data: {items: ['a', 'b', 'c']}
})
Vue.set(vm.items , 0 , 'aa') // 响应性的
vm.$set(vm.items , 0 , 'aa') // 响应性的
vm.items.splice(0 , 1 , 'aa')//响应性的
//通过length
vm.items.splice(2)//响应性的
更详细的信息请查看Vue.js官网：深入理解响应式原理
写在最后
深入理解Vue响应式原理相关推荐
- 理解VUE响应式原理
1.响应式原理基础 响应式基本原理是基于Object.defineProperty(obj, prop, descriptor), descriptor里面可以定义get和set方法,可以在获取属性值 ...
- data的值 如何初始化vue_理解Vue响应式系统
深入理解 Vue 响应式系统 理解 Vue 响应式原理,到 computed.vuex 原理 前言 众所周知,一说到 vue 的响应式系统,就能马上想到 Object.defineProperty.数 ...
- vue 数组删除 dome没更新_详解Vue响应式原理
摘要: 搞懂Vue响应式原理! 作者:浪里行舟 原文:深入浅出Vue响应式原理 Fundebug经授权转载,版权归原作者所有. 前言 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是 ...
- Vue响应式原理的简单模型
1.前言 最近在梳理vue响应式的原理,有一些心得,值得写一篇博客出来看看. 其实之前也尝试过了解vue响应式的原理,毕竟现在面试看你用的是vue的话,基本上都会问你几句vue响应式的原理.以往学习这 ...
- Vue响应式原理（看这一篇就够了）
你肯定听说过Object.denfineProperty或是Proxy\reflect,这的确是在VUE响应式原理中起重要作用的一部分代码,但这远远不能代表整个流程的精妙.上图: 不懂没关系,请往下看 ...
- Vue源码--解读vue响应式原理
原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...
- Vue响应式原理详细讲解
面试官:请你简单的说说什么是Vue的响应式. 小明:mvvm就是视图模型模型视图,只有数据改变视图就会同时更新. 面试官:说的很好,回去等通知吧. 小明:.... Vue响应式原理 先看官方的说法 简 ...
- 一篇文章带你吃透VUE响应式原理
本篇响应式原理介绍比较长,全文大概1w+字.虽然内容繁杂,但阅读过后,绝对会让你对vue的响应式有更加深刻的理解. 分块阅读,效果更佳.(建议读者有一定vue使用经验和基础再食用) 首先上图,下面这张 ...
- 深入了解 Vue 响应式原理(数据拦截)
前言 在上一章节我们已经粗略的分析了整个的Vue 的源码(还在草稿箱,需要梳理清楚才放出来),但是还有很多东西没有深入的去进行分析,我会通过如下几个重要点,进行进一步深入分析. 深入了解 Vue 响应 ...
最新文章
- Oracle数据库对象----视图
- ajax 泛微oa表单js_OA项目总结
- 像程序员一样思考_如何像程序员一样思考-解决问题的经验教训
- JEECG中datagrid方法自定义查询条件
- Java 稳步成长、Kotlin 崛起、Go 保持独特风格，2020 年各大编程语言发展趋势一览...
- mpacc和计算机硕士,考MPAcc还是工作？读研三年VS工作三年对比！
- 力扣-面试题 02.06. 回文链表
- 模2运算的原理 模2加法，模2减法，模2乘法，模2除法
- 分享一个好用的图片压缩软件
- 360张图围绕成为3d_3D设计将在10分钟内成为专业人士
- CDA Level1知识点总结之业务分析报告与数据可视化报表
- 谷歌插件——Vimium
- .NET经典图书推荐（下）
- 《那年那兔那些事》观后感
- 淘宝特价版上货精灵有哪些功能特点？
- 为啥没有好用的开发单片机的国产IDE？
- 相互保如何升级为相互宝？
- 浅析烫金浆对织物烫金效果的影响
- Python+matplotlib画爱心
- Naive Bayesian
热门文章