Vue data cannot use arrow function problem analysis-JS Tutorial-php.cn

Vue data cannot use arrow function problem analysis

不言

Release： 2018-07-03 17:50:24

Original

2241 people have browsed it

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: () => {}
}

Copy after login

##1 VUE .js source code analysis

Note that only the core code is designed here

This 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 === &#39;object&#39; && typeof module !== &#39;undefined&#39; ? module.exports = factory() :
   typeof define === &#39;function&#39; && define.amd ? define(factory) :
   (global.Vue = factory());
  }(this, (function (){
   &#39;use strict&#39;;
    console.log(this) //*undefined*
  })))

Copy after login

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 undefined

The following is the implementation principle of data in vue

 (function (global, factory) {
   typeof exports === &#39;object&#39; && typeof module !== &#39;undefined&#39; ? module.exports = factory() :
   typeof define === &#39;function&#39; && define.amd ? define(factory) :
   (global.Vue = factory());
  }(this, (function (){
   &#39;use strict&#39;;
   function getData(data,vm) {
    return data.call(vm, vm)
   }
   function initData(params) {
    data = vm._data = typeof data === &#39;function&#39;
    ? getData(data, vm)
    : data || {};
   }
   initData()  
  })))

Copy after login

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._data

es5 function and es6 arrow function

 var obj = {
   a: () => {
   &#39;use strict&#39;;
    console.log(this,&#39;a&#39;)
   },
   b() {
    console.log(this,&#39;b&#39;)
   },
   c() {
    // window
    let e = () => {
     console.log(this,&#39;e&#39;)
    }
    return e
   }
  }
  obj.a() // window
  obj.b() // obj
  obj.c()() // obj

Copy after login

For 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 === &#39;object&#39; && typeof module !== &#39;undefined&#39; ? module.exports = factory() :
   typeof define === &#39;function&#39; && define.amd ? define(factory) :
   (global.Vue = factory());
  }(this, (function (){
   &#39;use strict&#39;;
   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 === &#39;function&#39;
    ? getData(data, vm)
    : data || {};
   }
   initData()
   console.log(vm);
  })))

Copy after login

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.

If we use

data() {}this points to the Vm instance, so he will update with the instance.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

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!