首先需要明確，a() {}和 b: () => {}是不同的
let obj = { a() {}, // 相當于 a:function() {}, b: () => {}}1 VUE.js 源碼解析
注意此處只設(shè)計核心代碼
這段代碼也是UMD實現(xiàn)原理，本文這里不是重點，有興趣的可以自行探究。
(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來說，非嚴格模式下函數(shù)都會有一個this指向，不清楚的這里有傳送門this指向相關(guān)
說一下本文中涉及的this指向問題，如果不是嚴格模式，this應(yīng)該指向window，但是由于vue作者使用的是嚴格模式，所以他指向了undefined
以下是vue中data的實現(xiàn)原理
(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() })))也就是說每次新創(chuàng)建實例的時候都會去判斷是否有data函數(shù)，如果有的話就會將其賦值給vm._data,心細的同學會發(fā)現(xiàn)對于Vmm實例來說是沒有data，而是有vm._data
es5函數(shù)和es6箭頭函數(shù)
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對于普通函數(shù)（非嚴格模式下），this指向調(diào)用者，es6中的this指向聲明時的上下文環(huán)境。
結(jié)合以上兩點解析今天的問題
(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); }))) 以上代碼說明你使用箭頭函數(shù)給data: () => {} this指向undefined的時候，是會賦值給vm._data，但是他會相當于一個全局的，只要你不刷新頁面他就會緩存你的data。
如果我們使用data() {}this指向Vm實例，所以他會隨著實例更新。
總結(jié)
以上所述是小編給大家介紹的vue data不可以使用箭頭函數(shù)問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點
疑難解答
