浅谈Vue响应式(数组变异方法)


Posted in Javascript onMay 07, 2018

前言

很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗?

查看官方文档才发现,不是女神太高冷,而是你没用对方法。

浅谈Vue响应式(数组变异方法)

浅谈Vue响应式(数组变异方法)

看来想让女神自己动,关键得用对方法。虽然在官方文档中已经给出了方法,但是在下实在好奇的紧,想要解锁更多姿势的话,那就必须先要深入女神的心,于是乎才有了去探索Vue响应式原理的想法。(如果你愿意一层一层地剥开我的心。你会发现,你会讶异…… 沉迷于鬼哭狼嚎 无法自拔QAQ)。

前排提示,Vue的响应式原理主要是使用了ES5的Object.defineProperty,毫不知情的同学可以查看相关资料。

为啥数组不响应?

仔细一想,Vue的响应是基于Object.definePropery的,这个方法主要是对对象属性的描述进行修改。数组其实也是对象,通过定义数组的属性应该也能产生响应的效果呀。先验证一下自己的想法,撸起袖子就开干。

const arr = [1,2,3];

let val = arr[0];

Object.defineProperty(arr,'0',{
  enumerable: true,
  configurable: true,
  get(){
    doSomething();
    return val;
  },
  set(a){
    val = a;
    doSomething();
  }
});

function doSomething() {

}

然后在控制台中分别输入arr、arr[0] = 2、arr,可以看到如下图的结果。

浅谈Vue响应式(数组变异方法)

咦,一切居然都如预想猜想的一样。

接下来,看到这段代码,有的同学可能会有所疑问,为啥在get()方法里不直接返回this[0]呢?而是要借助val来返回值呢?仔细一想,卧槽!!!差点特么的死循环了,你想呀,get()本身就是获取当前属性的值,在get()里调用this[0]不是等同于再次调用了get()方法吗? 好可怕好可怕,简直吓死劳资了。

虽然你想象中的女神可能会这种姿势,但是你眼前的这个女神确实不是这种姿势的,像我这种?潘渴粜员┞段抟傻娜嗽趺纯赡懿峦概?竦男乃迹课?裁床徽庋?煊κ?菽兀炕蛐硎且蛭??楹投韵蠡故怯兴?畋穑?ㄒ迨?榈氖粜钥赡芑岵??恍┞榉秤?ug。又或许是因为在交互的过程中可能会产生大量的数据,导致整体的性能下降。也有可能是作者权衡利弊之后用其他方法也可以达到数据响应的效果。反正我是猜不透啦。

为啥调用数组原生方法就可以响应了?

为什么使用了这些数组的方法就就能让数据响应了呢?先看看数组部分的源码吧。

简单的来讲,def的作用就是重新定义对象属性的value值。

//array.js
import { def } from '../util/index'

const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)
//arrayMethods是对数组的原型对象的拷贝,
//在之后会将该对象里的特定方法进行变异后替换正常的数组原型对象
/**
 * Intercept mutating methods and emit events
 */
[
 'push',
 'pop',
 'shift',
 'unshift',
 'splice',
 'sort',
 'reverse'
]
.forEach(function (method) {
 // cache original method
 //将上面的方法保存到original中
 const original = arrayProto[method]
 def(arrayMethods, method, function mutator (...args) {
  const result = original.apply(this, args)
  const ob = this.__ob__
  let inserted
  switch (method) {
   case 'push':
   case 'unshift':
    inserted = args
    break
   case 'splice':
    inserted = args.slice(2)
    break
  }
  if (inserted) ob.observeArray(inserted)
  // notify change
  ob.dep.notify()
  return result
 })
})

贴出def部分的代码

/**
 * Define a property.
 */
export function def (obj: Object, key: string, val: any, enumerable?: boolean) {
 Object.defineProperty(obj, key, {
  value: val,
  enumerable: !!enumerable,
  writable: true,
  configurable: true
 })
}

array.js是对数组的一些方法进行变异,我们以push方法来举个例子。首先 就是要用original = arrayProto['push']来保存原生的push方法。

然后就是要定义变异的方法了,对于def函数,如果不深究的话,def(arrayMethods,method,function(){}),这个函数可以粗略的表示为arrayMethods[method] = function mutator(){};

假设在之后调用push方法,实际上调用的是mutator方法,在mutator方法中,第一件事就是调用保存了原生push方法的original,先求出实际的值。一堆文字看起来实在很抽象,那么写一段低配版的代码来表达源码的含义。

const push = Array.prototype.push;

Array.prototype.push = function mutator (...arg){
  const result = push.apply(this,arg);
  doSomething();
  return result
}

function doSomething(){
  console.log('do something');
}

const arr = [];
arr.push(1);
arr.push(2);
arr.push(3);

在控制台中查看结果为:。

浅谈Vue响应式(数组变异方法)

那么源码中的

const ob = this.__ob__
  let inserted
  switch (method) {
   case 'push':
   case 'unshift':
    inserted = args
    break
   case 'splice':
    inserted = args.slice(2)
    break
  }
  if (inserted) ob.observeArray(inserted)
  // notify change
  ob.dep.notify()

这段代码就是对应的doSomething()了

在该代码中,清清楚楚的写了2个单词的注释notify change,不认识这2个单词的同学就百度一下嘛,这里就由我代劳了,这俩单词的意思是发布改变!每次调用了该方法,都会求出值,然后做一些其他的事情,比如发布改变与观察新增的元素,响应的其他过程在本篇就不讨论了。

[
 'push',
 'pop',
 'shift',
 'unshift',
 'splice',
 'sort',
 'reverse'
]

目前一共有这么些方法,只要用对方法就能改变女神的姿势哟!

小结

对于标题,我一改再改,一开始叫浅析Vue响应原理,但是后来一看 这个标题实在太大,那就从最简单的入手吧,先从数组入手,而且本篇也不会花费太多时间去阅读。如果本篇有什么地方写得有误,误导了他人,请一定指出,万分感激。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript实现分栏显示小技巧附图
Oct 13 Javascript
JavaScript中的方法调用详细介绍
Dec 30 Javascript
Javascript基础教程之数据类型 (字符串 String)
Jan 18 Javascript
JavaScript位移运算符(无符号) >>> 三个大于号 的使用方法详解
Mar 31 Javascript
javaScript数组迭代方法详解
Apr 14 Javascript
JS实现图片剪裁并预览效果
Aug 12 Javascript
用jQuery实现优酷首页轮播图
Jan 09 Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
详谈javascript精度问题与调整
Jul 08 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
vue实现可拖拽的dialog弹框
May 13 Vue.js
在HTML文档中嵌入JavaScript的四种方法
May 07 #Javascript
详解JavaScript的BUG和错误
May 07 #Javascript
vue实现个人信息查看和密码修改功能
May 06 #Javascript
基于vue-element组件实现音乐播放器功能
May 06 #Javascript
VueJs组件之父子通讯的方式
May 06 #Javascript
vue自动化表单实例分析
May 06 #Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
May 06 #Javascript
You might like
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
老生常谈PHP面向对象之注册表模式
2017/05/26 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
使用PHPExcel导出Excel表
2018/09/08 PHP
javascript Firefox与IE 替换节点的方法
2010/02/24 Javascript
javascript中alert()与console.log()的区别
2015/08/26 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
2020/10/26 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
Vue底层实现原理总结
2018/02/17 Javascript
微信小程序rich-text富文本用法实例分析
2019/05/20 Javascript
Element-UI+Vue模式使用总结
2020/01/02 Javascript
vue 导航守卫和axios拦截器有哪些区别
2020/12/19 Vue.js
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
Python中使用PIPE操作Linux管道
2015/02/04 Python
在Python中移动目录结构的方法
2016/01/31 Python
python实现RSA加密(解密)算法
2016/02/17 Python
Python subprocess库的使用详解
2018/10/26 Python
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
explicit和implicit的含义
2012/11/15 面试题
为什么要做架构设计
2015/07/08 面试题
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
实习教师自我鉴定
2013/12/09 职场文书
《童趣》教学反思
2014/02/19 职场文书
法定授权委托证明书
2014/09/27 职场文书
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
小学生五一劳动节演讲稿
2015/03/18 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
MySQL root密码的重置方法
2021/04/21 MySQL
SpringBoot整合RabbitMQ的5种模式实战
2021/08/02 Java/Android