Home > Article > Web Front-end > Vue data cannot use arrow function problem analysis
This article mainly introduces the problem that arrow functions cannot be used in vue data. This article introduces it to you in great detail through source code analysis and has certain reference value. Friends who need it can refer to it
First of all, you need to To be clear, a() {} and b: () => {}
are different
let obj = { a() {}, // 相当于 a:function() {}, b: () => {} }
##1 VUE .js source code analysis
Note that only the core code is designed hereThis code is also the UMD implementation principle. This article is not the focus. Those who are interested can explore it by themselves.(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* })))Analysis 1: For javascript, functions in non-strict mode will have a this pointer. If you are not sure, there is a transmission here Door this pointing related Let’s talk about the this pointing issue involved in this article. If it is not strict mode, this should point to window, but since the vue author uses strict mode, he points to undefinedThe following is the implementation principle of data in vue
(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() })))That is to say, every time a new instance is created, it will be judged whether there is a data function, if so. It will be assigned to vm._data. Careful students will find that there is no data for the Vmm instance, but vm._dataes5 function and es6 arrow function
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()() // objFor ordinary functions (in non-strict mode), this points to the caller, and this in es6 points to the context at the time of declaration. Combined the above two points to analyze today’s problem
(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); })))The above code shows that you use the arrow function to give data: () => {} When this points to undefined, it will be assigned to vm._data, but it will be equivalent to a global one. As long as you do not refresh the page, it will cache your data.
data() {}this points to the Vm instance, so he will update with the instance.
About the method of changing the secondary menu of the Vue iview-admin framework to the third-level menu
About How to use the vue.js carousel component
The above is the detailed content of Vue data cannot use arrow function problem analysis. For more information, please follow other related articles on the PHP Chinese website!