浅谈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 相关文章推荐
jQuery实现高亮显示的方法
Mar 10 Javascript
js如何实现点击标签文字,文字在文本框出现
Aug 05 Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 Javascript
用JS生成UUID的方法实例
Mar 30 Javascript
js实现页面a向页面b传参的方法
May 29 Javascript
jQuery Easyui快速入门教程
Aug 21 Javascript
js实现获取鼠标当前的位置
Dec 14 Javascript
javascript判断一个变量是数组还是对象
Apr 10 Javascript
TypeScript开发Node.js程序的方法
Apr 30 Javascript
使用Bootstrap做一个朝代历史表
Dec 10 Javascript
在react中使用vue的状态管理的方法示例
May 02 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
Jun 05 Javascript
在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
PHP读写文件的方法(生成HTML)
2006/11/27 PHP
解析如何用php screw加密php源代码
2013/06/20 PHP
PHP程序漏洞产生的原因分析与防范方法说明
2014/03/06 PHP
destoon之一键登录设置
2014/06/21 PHP
php连接oracle数据库及查询数据的方法
2014/12/29 PHP
理解JavaScript中的对象 推荐
2011/01/09 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
innerText 使用示例
2014/01/23 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
使用CoffeeScrip优美方式编写javascript代码
2015/10/28 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
很棒的js Tab选项卡切换效果
2016/08/30 Javascript
轻松理解Javascript变量的相关问题
2017/01/20 Javascript
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
vue中实现上传文件给后台实例详解
2019/08/22 Javascript
vue和小程序项目中使用iconfont的方法
2020/05/19 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
2020/07/31 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
2020/08/24 Javascript
Python做智能家居温湿度报警系统
2018/09/25 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
Python后台开发Django的教程详解(启动)
2019/04/08 Python
Python-接口开发入门解析
2019/08/01 Python
Python socket服务常用操作代码实例
2020/06/22 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
Python获取指定网段正在使用的IP
2020/12/14 Python
CSS3使用transition属性实现过渡效果
2018/04/18 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
美国在线打印网站:Overnight Prints
2018/10/11 全球购物
好的演讲稿开场白
2013/12/30 职场文书
元旦晚会邀请函
2014/01/27 职场文书
大一学生职业生涯规划
2014/03/11 职场文书
婚礼秀策划方案
2014/05/19 职场文书
go结构体嵌套的切片数组操作
2021/04/28 Golang
Windows Server 2008 修改远程登录端口以及配置防火墙
2022/04/28 Servers
教你nginx跳转配置的四种方式
2022/07/07 Servers