解析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 相关文章推荐
Ajax::prototype 源码解读
Jan 22 Javascript
javascript 面向对象思想 附源码
Jul 07 Javascript
js实现拉伸拖动iframe的具体代码
Aug 03 Javascript
jQuery之ajax删除详解
Feb 27 Javascript
编写高性能Javascript代码的N条建议
Oct 12 Javascript
jQuery使用each方法与for语句遍历数组示例
Jun 16 Javascript
使用Javascript监控前端相关数据的代码
Oct 27 Javascript
分享一道关于闭包、bind和this的面试题
Feb 20 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
Vue项目自动转换 px 为 rem的实现方法
Oct 29 Javascript
webpack的tree shaking的实现方法
Sep 18 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
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
全面解析PHP验证码的实现原理 附php验证码小案例
2016/08/17 PHP
javascript与CSS复习(《精通javascript》)
2010/06/29 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
jQuery实现图片走马灯效果的原理分析
2016/01/16 Javascript
vue中appear的用法
2017/08/17 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
vue中使用ueditor富文本编辑器
2018/02/08 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
2019/05/01 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
vue实现图片懒加载的方法分析
2020/02/05 Javascript
VSCode插件安装完成后的配置(常用配置)
2020/08/24 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
详解tensorflow载入数据的三种方式
2018/04/24 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
python+selenium实现自动抢票功能实例代码
2018/11/23 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
基于django 的orm中非主键自增的实现方式
2020/05/18 Python
Mixbook加拿大:照片书,照片卡,剪贴簿,年历和日历
2017/02/21 全球购物
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
2014厂务公开实施方案
2014/02/17 职场文书
化妆品活动策划方案
2014/05/23 职场文书
英语教育专业自荐信
2014/05/29 职场文书
任命书格式
2014/06/05 职场文书
异地年检委托书范本
2014/09/24 职场文书
使用Pytorch实现two-head(多输出)模型的操作
2021/05/28 Python
python状态机transitions库详解
2021/06/02 Python
Mysql调整优化之四种分区方式以及组合分区
2022/04/13 MySQL