解析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 相关文章推荐
精通JavaScript 纠正 cleanWhitespace函数
Mar 11 Javascript
jquery 无限级联菜单案例分享
Mar 26 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
jQuery实现模拟marquee标签效果
Jul 14 Javascript
分享Javascript实用方法二
Dec 13 Javascript
javascript表单事件处理方法详解
May 15 Javascript
jQuery ajax应用总结
Jun 02 Javascript
浅谈Javascript数据属性与访问器属性
Jul 26 Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 Javascript
jQuery图片切换动画特效
Nov 02 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 Javascript
使用flow来规范javascript的变量类型
Sep 12 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
NOT NULL 和NULL
2007/01/15 PHP
深入分析PHP优化及注意事项
2016/07/04 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
javascript一点特殊用法
2008/05/28 Javascript
jquery 学习之二 属性相关
2010/11/23 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
PHP开发者必须掌握的6个关键字
2014/04/14 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
深入学习jQuery Validate表单验证
2016/01/18 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
2016/06/20 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
react-native使用leanclound消息推送的方法
2018/08/06 Javascript
vue slots 组件的组合/分发实例
2018/09/06 Javascript
vue配置nprogress实现页面顶部进度条
2019/09/21 Javascript
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
python 实时遍历日志文件
2016/04/12 Python
Python基于贪心算法解决背包问题示例
2017/11/27 Python
python将文本中的空格替换为换行的方法
2018/03/19 Python
python中cPickle类使用方法详解
2018/08/27 Python
在Mac下使用python实现简单的目录树展示方法
2018/11/01 Python
在Python中合并字典模块ChainMap的隐藏坑【推荐】
2019/06/27 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
python元组的概念知识点
2019/11/19 Python
TensorFlow索引与切片的实现方法
2019/11/20 Python
使用Python爬虫库requests发送请求、传递URL参数、定制headers
2020/01/25 Python
使用python求解二次规划的问题
2020/02/29 Python
jupyter notebook 增加kernel教程
2020/04/10 Python
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
领导干部群众路线教育实践活动剖析材料
2014/10/10 职场文书
2015年学校政教处工作总结
2015/05/26 职场文书
好员工观后感
2015/06/17 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书