vue의 전역 메소드와 인스턴스 메소드의 차이점은 무엇입니까

vue에서 전역 메소드와 인스턴스 메소드의 차이점: 1. 전역 메소드는 "Vue.myGlobalMethod"를 통해 호출되고, 인스턴스 메소드는 "this.$myMethod"를 통해 호출됩니다. 2. 전역 메소드는 vue에서 정의된 정적 메소드입니다. 인스턴스 메서드는 구성 요소 내부에서 정의할 수 있습니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

vue의 전역 메서드와 인스턴스 메서드의 차이점은 무엇인가요

개발 중에 재사용성을 높이고 코드를 단순화하기 위해 코드의 공통 부분을 추출하여 재사용 가능한 모듈을 형성해야 하는 경우가 많습니다. . 코드를 추출하여 모듈을 만든 후 어디에서나 참조하려면 이러한 모듈을 전역 속성으로 설정해야 합니다. 따라서 전역 공용 메서드를 구현하려면 다음 지식 포인트를 알아야 합니다.

전역 속성을 설정하는 방법

1. 전역 속성 설정

전역 속성은 다음과 같이 나눌 수 있습니다. 변수 및 전역 속성 방법. 전역 변수를 구현하는 일반적인 방법은 vuex를 사용하는 것입니다(vuex 사용은 여기서 자세히 설명하지 않습니다). 또 다른 방법은 이를 구현하기 위해 프로토타입 속성을 사용하는 것입니다. 다음으로는 프로토타입에 집중하겠습니다.

2. 전역 속성 참조

Vue를 사용할 때 다음 코드 문자열을 작성해야 합니다.

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

위 코드는 Vue 생성자를 사용하여 Vue 객체를 생성합니다.

이를 통해 Vue가 실제로 객체임을 알 수 있습니다. 그런 다음 Vue의 프로토타입을 사용하여 전역 속성에 대한 참조를 구현할 수 있습니다. 우선, 다음 지식 포인트를 이해해야 합니다.

프로토타입이란 무엇인가요?

js 코드에서는 속성 프로토타입을 자주 볼 수 있습니다. 생성자(객체를 생성하는 데 사용되는 함수)의 속성이며 프로토타입 객체를 가리키는 데 사용됩니다. 그렇다면 프로토타입 객체란 무엇일까요? "프로토타입 객체"를 이해하려면 "프로토타입"과 "객체"를 분리하여 설명해야 합니다.

먼저 객체에 대해 이야기해 보겠습니다. js에는 문자열, 수학, 객체, 배열 등과 같은 많은 내장 객체가 있습니다.

// 声明一个数组对象
const arr = Array();

위는 내장 객체(배열의 생성자)를 사용하여 배열을 만드는 것입니다.

물론 사용자 정의 개체를 설정할 수도 있습니다. 즉, 새 개체를 직접 설정할 수도 있습니다.

const obj = {};

위 코드는 빈 객체를 설정합니다.

Vue 인스턴스는 몇 가지 유용한 인스턴스 속성과 메서드를 노출합니다. 이러한 속성과 메서드에는 프록시

구성 요소 트리

$parent: 구성 요소 인스턴스의 상위 인스턴스에 액세스하는 데 사용됨
$root: 구성 요소 트리에 액세스하는 데 사용됩니다. 현재 구성 요소 트리 인스턴스의 루트
$children: 현재 구성 요소 인스턴스의 직접 하위 구성 요소 인스턴스에 액세스하는 데 사용
$refs: v-ref 지시문의 하위 구성 요소에 액세스하는 데 사용
DOM 액세스

$el: 현재 구성 요소 인스턴스의 dom 요소를 마운트하는 데 사용
$els: $el 요소에서 v-el 명령어를 사용하여 DOM 요소에 액세스하는 데 사용
차이점

는 Vue.myGlobalMethod를 통해 호출되는 window.myGlobalMethod로 이해될 수 있는 전역 메서드이며, Vue

Instance 메서드에 정의된 정적 메서드일 뿐입니다. JS의 클래스 개념과 프로토타입 프로토타입 체인의 의미를 떠올려보세요. . 이해가 되지 않는다면 먼저 이 기본 내용을 살펴보세요.

여기서 설명드릴 수 있는 점은 this.$myMethod

[관련 권장 사항: "

vue.js tutorial

"]을 통해 컴포넌트 내에서 인스턴스 메소드를 호출할 수 있다는 것입니다.

위 내용은 vue의 전역 메소드와 인스턴스 메소드의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!