深入理解Vue的数据响应式


Posted in Vue.js onMay 15, 2021

1. ES语法的getter和setter

在开始了解 Vue 的数据响应式原理前应该先搞清楚 ES语法 中的 getter 和 setter 方法的具体用法。

getter和setter 方法是以 get 和 set 关键字来为对象添加虚拟属性的一种方式。这种属性其实并不真实存在,而是以取值函数 getter 和存值函数 setter 来模拟的一种属性。目的是对某个属性设置存值函数和取值函数,拦截该属性的存取行为,以便于对该属性的存取做一些限定处理。如下所示(以下代码来源于 mdn)

getter 方法

const obj = {
  log: ['a', 'b', 'c'],
  get latest() { //在正常方法前加 get 关键字
    if (this.log.length == 0) {
      return undefined;
    }
    return this.log[this.log.length - 1];
  }
}

console.log(obj.latest);// 输出 c,获取的是属性名不用带括号

setter方法

const language = {
  set current(name) {
    this.log.push(name);
  },
  log: []
}

language.current = 'EN';
language.current = 'FA';

console.log(language.log);//输出 Array ["EN", "FA"]

2. ES语法的 defineProperty

defineProperty 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象,可用于在一个对象定义好后为其修改或添加属性。
语法为:

Object.defineProperty(obj, prop, descriptor)

添加常规属性:

let data = {
  m: 0
}

Object.defineProperty(data, 'n', {
  value: 1 //添加属性的 value 就是其值
})
console.log(`${data.n}`) //则会输出n值为1

也可用来添加 getter 和 setter 的虚拟属性

let data1 = {
    _n: 0
}

Object.defineProperty(data1, 'n', {
  get(){
    return this._n
  }, 
  set(value){
    if(value < 0) return
    this._n = value
  }//直接写明 get / set 即可
}) //由于指明了虚拟属性为 n,即 get n(){}、set n(value){},因此在函数定义时就不用再写n了

3. Vue对数据的代理和监听

代理,即 proxy,简单来说我自己的一些事情我自己不亲自处理,而是交给一个人让他去帮我做,那个做事的人就是代理。这个逻辑中有两个关键点需要搞清楚,代理是处理操作的人,而其处理操作的事情不属于他,而是属于委托其代理的人的。

因此类比到 Vue数据代理 ,委托代理的是 data{} 数据对象,其找到代理就是 Vue实例vm ,data{} 数据对象要代理 vm 做的事情是管理 data{} 数据对象里数据操作。因此 data{} 数据对象只负责内部数据的生产即可,对生产出来的数据的管理和操作全权交给 vm 处理。

那么 vm 如何对 data{} 数据对象里的数据进行控制和操作呢?换句话说,vm 如何在 data{} 数据对象里面的任意一个属性值变化时都及时知道呢?

于是便用到了 ES 语法中的 getter和setter 方法,通过 getter和setter 方法控制的属性的任何操作都会被这两个函数检测到,而 getter和setter 方法形成的属性是虚拟属性,真实并不存在,因此如果用户想私自不经过代理 vm 直接修改 data{} 数据对象的属性也获取不到对应的实体属性,只能通过 getter和setter 方法修改,那么其修改就必定被 vm 检测到。

因此 vm 为了实现对 data{} 数据对象里数据的全部控制,就必须在 Vue实例 创建的时候对传进来的 data{} 数据对象做一些处理,做的处理就是将 data{} 数据对象里的属性都变成了 getter和setter 方法控制的虚拟属性,并保存在代理数据对象 obj 并返回。

但为了不让用户直接修改原来的 data{} 属性,也将原来的 data{} 对象的实体属性全改变了,添加的虚拟属性名字和实体属性名一样,就会用虚拟属性覆盖原来的实际属性,用户在修改属性值是就是通过 getter和setter 方法修改的虚拟属性。这样一来 data{} 数据对象的全部属性的任何变化都会被 Vue实例vm 检测到。

let myData = {n:0}
let data = proxy({ data:myData }) // 类似于 let vm = new Vue({data: myData})

function proxy({data}/* 解构赋值*/){
  let _n = data.n
  Object.defineProperty(data, 'n', { //覆盖原来的data.n属性
    get(){
      return _n
    },
    set(newValue){
      if(newValue<0)return
      _n = newValue
    }
  })// 改变data{}数据对象本身属性,可通过闭包形成上下文,让原来的实际属性值存在闭包的上下文_n中
  
  const obj = {}
  Object.defineProperty(obj, 'n', {
    get(){
      return data.n
    },
    set(value){
      data.n = value
    }
  }) //添加data{}数据对象的代理,对data{}数据对象操作
  
  return obj // obj 就是data{}的代理
}

4. Vue的数据响应式

所谓响应式就是当事物发生变化时会根据变化做出相应的反映。

Vue 中的数据 data 是响应式的,由上述 Vue 通过 Object.defineProperty()函数 来用 getter和setter方法 对 data 数据做了代理和监听,一旦数据发生变化,Vue 就会改变数据对应的 UI 视图,这就是 Vue的数据响应式

但是 Vue 使用 Object.defineProperty 来设置监听,就只能对在 Vue实例化 时 data 对象里已经存在的属性设置监听,而对不存在的或者后来添加进去的属性没有进行监听。

为了解决这个问题,有两种方法:

1. 将所有属性都提前声明好

2. 使用 Vue.set 和 this.$set 添加属性

使用 Vue.set 和 this.$set 添加属性是会通知 Vue 对这后添加的属性也设置监听操作。

Vue.set('this.data','m','10')
this.$set('this.data','m','10')//为vm的data对象添加属性m值为10

3.数组变异

对于数组的数据增加,无法控制其新增个数因此不能提前声明所有数据值,而一个一个 set 又太麻烦,而且数组是常用的对象数据类型中的一种,因此 vue 的作者就对数组的增删函数如 push 和 pop 等进行了篡改,用户在使用 vue 中数组增删时仍是用 push 和 pop ,但是里面进行了额外的处理,这几个被篡改的 API 会对数组新增是数据代理监听并根据数据响应改变 UI 视图。

以上就是深入理解Vue的数据响应式的详细内容,更多关于Vue的数据响应式的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue+iview分页组件的封装
Nov 17 Vue.js
浅析VUE防抖与节流
Nov 24 Vue.js
vue绑定class的三种方法
Dec 24 Vue.js
vue实现登录功能
Dec 31 Vue.js
vuex的使用和简易实现
Jan 07 Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
vue实现拖拽进度条
Mar 01 Vue.js
关于Vue Router的10条高级技巧总结
May 06 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
浅谈Vue的computed计算属性
Mar 21 Vue.js
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
VUE递归树形实现多级列表
Jul 15 Vue.js
详解Vue的options
May 15 #Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 #Vue.js
Vue接口封装的完整步骤记录
Vue全家桶入门基础教程
vue实现可拖拽的dialog弹框
vue如何批量引入组件、注册和使用详解
vue组件的路由高亮问题解决方法
You might like
vBulletin HACK----显示话题大小和打开新窗口于论坛索引页
2006/10/09 PHP
php笔记之:AOP的应用
2013/04/24 PHP
php数组转成json格式的方法
2015/03/09 PHP
php上传图片并压缩的实现方法
2015/12/22 PHP
Thinkphp框架开发移动端接口(1)
2016/08/18 PHP
在Laravel中实现使用AJAX动态刷新部分页面
2019/10/15 PHP
深入认识JavaScript中的函数
2007/01/22 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
2010/11/11 Javascript
javascript 事件处理程序介绍
2012/06/27 Javascript
使用js简单实现了tree树菜单
2013/11/20 Javascript
js+ajax实现获取文件大小的方法
2015/12/08 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
2016/07/26 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
2017/08/23 Javascript
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
微信小程序整合使用富文本编辑器的方法详解
2019/04/25 Javascript
vue实例的选项总结
2020/06/09 Javascript
[02:35]DOTA2超级联赛专访XB 难忘一年九冠称王
2013/06/20 DOTA
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
[47:10]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第二场 12.16
2020/12/18 DOTA
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
Python将多个excel表格合并为一个表格
2021/02/22 Python
Python实现的多进程和多线程功能示例
2018/05/29 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
Python 安装第三方库 pip install 安装慢安装不上的解决办法
2019/06/18 Python
wxPython多个窗口的基本结构
2019/11/19 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
HTML里显示pdf、word、xls、ppt的方法示例
2020/04/14 HTML / CSS
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
市场营销专业推荐信
2013/11/03 职场文书
保险专业大学生职业规划书
2014/03/03 职场文书
材料工程专业毕业生求职信
2014/03/04 职场文书
初中学生操行评语
2014/12/26 职场文书
会议承办单位欢迎词
2015/09/30 职场文书