這篇文章主要介紹了vue data不可以使用箭頭函數問題，本文通過源碼解析給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
首先需要明確，a() {}和 b: () => {}是不同的
| 1 2 3 4 5 6 |
let obj = {
a() {},
a:function() {},
b: () => {}
}
|
1 VUE.js 源碼解析
注意此處只設計核心代碼
這段代碼也是UMD實現原理，本文這里不是重點，有興趣的可以自行探究。
| 1 2 3 4 5 6 7 8 |
(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)
})))
|
解析一：
對於javascript來說，非嚴格模式下函數都會有一個this指向，不清楚的這里有傳送門this指向相關
說一下本文中涉及的this指向問題，如果不是嚴格模式，this應該指向window，但是由於vue作者使用的是嚴格模式，所以他指向了undefined
以下是vue中data的實現原理
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
(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箭頭函數
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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指向聲明時的上下文環境。
結合以上兩點解析今天的問題
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
(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實例，所以他會隨着實例更新。
轉載https://www.php.cn/js-tutorial-405826.html
