Vue 데이터는 화살표 기능 문제 분석을 사용할 수 없습니다.

이 글은 주로 Vue 데이터에서 화살표 기능을 사용할 수 없는 문제를 소개하고 있으며, 소스 코드 분석을 통해 아주 자세하게 소개하고 있으며, 필요한 친구들이 참고할 수 있습니다.

우선, 명확해야 합니다. a () {}와 b: () => {}는 다릅니다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

rrreee

1 VUE입니다. Node.js 소스 코드 분석

여기서는 핵심 코드만 설계되었습니다.이 코드는 UMD 구현 원칙이기도 합니다. 관심 있는 분들은 직접 살펴보셔도 됩니다.

rrreee

분석 1:

Javascript의 경우 비엄격 모드의 함수에는 this 포인터가 있습니다. 확실하지 않은 경우 이 포인터와 관련된 포털이 있습니다. 이 기사에 대해 알려주세요. 관련된 이 포인팅 문제는 엄격 모드가 아닌 경우 창을 가리켜야 하지만 vue 작성자는 엄격 모드를 사용하므로 정의되지 않음을 가리킵니다

다음은 데이터의 구현 원리입니다. vue

rrreee

🎜즉, 새로운 인스턴스가 생성될 때마다 데이터 기능이 있는지 판단하여 vm에 할당합니다. _data. 주의깊은 학생들은 Vmm 인스턴스 데이터에는 데이터 함수가 없지만 vm._data🎜🎜es5 함수와 es6 화살표 함수🎜

🎜rrreee🎜🎜🎜가 있다는 것을 알게 될 것입니다. 엄격하지 않은 모드에서) 이는 호출자를 가리키고 es6의 this는 선언된 컨텍스트를 가리킵니다. 🎜🎜위의 두 가지 점을 결합하여 오늘의 문제를 분석합니다🎜

🎜rrreee🎜🎜🎜위 코드는 화살표 함수를 사용하여 데이터를 할당하는 것을 보여줍니다. () => {} 이것이 정의되지 않음을 가리킬 때 , vm._data 값을 할당하지만 페이지를 새로 고치지 않는 한 전역 값과 동일합니다. 🎜🎜🎜 data()를 사용하면 {}this는 Vm 인스턴스를 가리키므로 인스턴스로 업데이트됩니다. 🎜🎜위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요! 🎜🎜관련 권장 사항: 🎜🎜🎜Vue iview-admin 프레임워크에서 두 번째 수준 메뉴를 세 번째 수준 메뉴로 변경하는 방법 정보🎜🎜🎜🎜🎜vue.js 캐러셀 구성 요소 사용 방법 정보🎜🎜🎜🎜🎜 🎜🎜🎜🎜

위 내용은 Vue 데이터는 화살표 기능 문제 분석을 사용할 수 없습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!