解析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 相关文章推荐
js left,right,mid函数
Jun 10 Javascript
用js实现小球的自由移动代码
Apr 22 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
Sep 04 Javascript
jquery实现多行文字图片滚动效果示例代码
Oct 10 Javascript
javascript常用正则表达式汇总
Jul 31 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 Javascript
jQuery validate插件功能与用法详解
Dec 15 Javascript
详解Vue 事件驱动和依赖追踪
Apr 22 Javascript
详解webpack编译多页面vue项目的配置问题
Dec 11 Javascript
JS使用对象的defineProperty进行变量监控操作示例
Feb 02 Javascript
element-ui如何防止重复提交的方法步骤
Dec 09 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
PHPExcel简单读取excel文件示例
2016/05/26 PHP
php while循环控制的简单实例
2016/05/30 PHP
php数值转换时间及时间转换数值用法示例
2017/05/18 PHP
CI框架实现创建自定义类库的方法
2018/12/25 PHP
jquery图片延迟加载 前端开发技能必备系列
2012/06/18 Javascript
JS数学函数Exp使用说明
2012/08/09 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
从数据库读取数据后将其输出成html标签的三种方法
2014/10/13 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
浅谈jQuery操作类数组的工具方法
2016/12/23 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
2017/07/10 Javascript
jquery实现下拉菜单的手风琴效果
2017/07/23 jQuery
微信小程序学习笔记之函数定义、页面渲染图文详解
2019/03/28 Javascript
基于vue写一个全局Message组件的实现
2019/08/15 Javascript
vue+moment实现倒计时效果
2019/08/26 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
Webpack按需加载打包chunk命名的方法
2019/09/22 Javascript
Python中使用items()方法返回字典元素对的教程
2015/05/21 Python
Python入门之后再看点什么好?
2018/03/05 Python
python开头的coding设置方法
2019/08/08 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
凯特·丝蓓英国官网:Kate Spade英国
2016/11/07 全球购物
Booking.com亚太地区:Booking.com APAC
2020/02/07 全球购物
冰淇淋店创业计划书范文
2013/12/27 职场文书
养成教育经验材料
2014/05/26 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
鸦片战争观后感
2015/06/09 职场文书
单位车辆管理制度
2015/08/05 职场文书
详解Spring Bean的配置方式与实例化
2022/06/10 Java/Android