解析vue data不可以使用箭头函数问题


Posted in Javascript onJuly 03, 2018

首先需要明确,a() {}和 b: () => {}是不同的

let obj = {
   a() {},
   // 相当于
   a:function() {},
   b: () => {}
}

1 VUE.js 源码解析

注意此处只设计核心代码

这段代码也是UMD实现原理,本文这里不是重点,有兴趣的可以自行探究。

(function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
   (global.Vue = factory());
  }(this, (function (){
   'use strict';
    console.log(this) //*undefined*
  })))

解析一:

对于javascript来说,非严格模式下函数都会有一个this指向,不清楚的这里有传送门this指向相关

说一下本文中涉及的this指向问题,如果不是严格模式,this应该指向window,但是由于vue作者使用的是严格模式,所以他指向了undefined

以下是vue中data的实现原理

(function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
   (global.Vue = factory());
  }(this, (function (){
   'use strict';
   function getData(data,vm) {
    return data.call(vm, vm)
   }
   function initData(params) {
    data = vm._data = typeof data === 'function'
    ? getData(data, vm)
    : data || {};
   }
   initData()  
  })))

也就是说每次新创建实例的时候都会去判断是否有data函数,如果有的话就会将其赋值给vm._data,心细的同学会发现对于Vmm实例来说是没有data,而是有vm._data

es5函数和es6箭头函数

var obj = {
   a: () => {
   'use strict';
    console.log(this,'a')
   },
   b() {
    console.log(this,'b')
   },
   c() {
    // window
    let e = () => {
     console.log(this,'e')
    }
    return e
   }
  }
  obj.a() // window
  obj.b() // obj
  obj.c()() // obj

对于普通函数(非严格模式下),this指向调用者,es6中的this指向声明时的上下文环境。

结合以上两点解析今天的问题

(function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
   (global.Vue = factory());
  }(this, (function (){
   'use strict';
   let vm = {}
   var data = () => {
    console.log(this);//undefined
    return {
     a: 1
    }    
   }
   function getData(data,vm) {
    return data.call(vm, vm)
   }
   function initData(params) {
    data = vm._data = typeof data === 'function'
    ? getData(data, vm)
    : data || {};
   }
   initData()
   console.log(vm);
  })))

以上代码说明你使用箭头函数给data: () => {} this指向undefined的时候,是会赋值给vm._data,但是他会相当于一个全局的,只要你不刷新页面他就会缓存你的data。

如果我们使用data() {}this指向Vm实例,所以他会随着实例更新。

总结

以上所述是小编给大家介绍的vue data不可以使用箭头函数问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery中获取iframe的代码
Jan 11 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
Mar 25 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
Sep 29 Javascript
写JQuery插件的基本知识
Nov 25 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
Nov 23 Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
vue.extend与vue.component的区别和联系
Sep 19 Javascript
JavaScript实现新年倒计时效果
Nov 17 Javascript
Vue监听页面刷新和关闭功能
Jun 20 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
Oct 25 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 Javascript
详解Vue SPA项目优化小记
Jul 03 #Javascript
jQuery实现表单动态添加与删除数据操作示例
Jul 03 #jQuery
JS实现显示当前日期的实例代码
Jul 03 #Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 #jQuery
vue 设置路由的登录权限的方法
Jul 03 #Javascript
jQuery阻止事件冒泡实例分析
Jul 03 #jQuery
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 #Javascript
You might like
用PHP实现小型站点广告管理(修正版)
2006/10/09 PHP
php判断是否为json格式的方法
2014/03/04 PHP
JS面向对象编程 for Cookie
2010/09/19 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
seaJs的模块定义和模块加载浅析
2014/06/06 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
jquery实现两个图片渐变切换效果的方法
2015/06/25 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
2015/11/29 Javascript
JavaScript判断微信浏览器实例代码
2016/06/13 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
基于Node.js的WebSocket通信实现
2017/03/11 Javascript
H5图片压缩与上传实例
2017/04/21 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
2018/04/23 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
微信小程序实现bindtap等事件传参
2019/04/08 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
2020/03/04 Javascript
Python命令行解析模块详解
2018/02/01 Python
python人民币小写转大写辅助工具
2018/06/20 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
python实现中文文本分句的例子
2019/07/15 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
澳大利亚百货商店中销量第一的商务衬衫品牌:Van Heusen
2018/07/26 全球购物
新学期教师寄语
2014/04/02 职场文书
机电一体化专业毕业生自荐信
2014/06/19 职场文书
2014年销售经理工作总结
2014/12/01 职场文书
搞笑婚庆主持词
2015/06/29 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书
获奖感言怎么写
2015/07/31 职场文书
搞笑欢迎词大全
2015/09/30 职场文书
宣传委员竞选稿
2015/11/19 职场文书
OpenCV-Python实现怀旧滤镜与连环画滤镜
2021/06/09 Python
Java并发编程之Executor接口的使用
2021/06/21 Java/Android
MySQL分区路径子分区再分区
2022/04/13 MySQL