vue3.0의 설정 사용법은 무엇입니까

vue3.0에서 설정 함수는 조합 API의 입구이며 데이터 및 매개변수를 정의하는 데 사용됩니다. 구문은 "setup(props,{slots,attrs,emit}){const name ='name'return입니다. {name}} "; 이 함수는 동기식만 가능하고 비동기식이 될 수 없습니다.

이 기사의 운영 환경: Windows 10 시스템, Vue3 버전, DELL G3 컴퓨터.

vue3.0에서 setup의 사용법은 무엇인가요

1. setup 기능의 특징과 기능

　확실한 것은 Vue3.0이 Vue2.x 버전과 호환된다는 점입니다. 일상 작업에서 Vue3 Vue2의 관련 구문을 사용합니다. 라이프 사이클의 beforeCreate 및 Created 사이의 기능은 데이터 및 메소드의 데이터 및 메소드를 설정 기능에서 사용할 수 없음을 의미합니다

　　2. 설정 기능 Composition API의 입구입니다

3. 설정 함수에 정의된 변수와 메서드는 마지막에 반환되어야 합니다. 그렇지 않으면 템플릿에서 사용할 수 없습니다.

2. 설정 함수에 대한 참고 사항:

1. setup 함수 실행 시 생성된 lifecycle 메소드 실행이 없으므로 setup 함수에서는 데이터와 메소드의 변수 및 메소드를 사용할 수 없습니다　　2. setup 함수에서 Vue는 잘못된 사용을 피하기 위해 setup 함수를 직접 사용합니다. 이것은 undefine

　3으로 수정되었습니다. setup 함수는 비동기식만 가능하고 비동기식일 수 없습니다.

사용법 1: ref

<template>
 <div id="app">
  {{name}}
  <p>{{age}}</p>
  <button @click="plusOne()">+</button>
 </div>
</template>
 
<script>
import {ref} from &#39;vue&#39;
export default {
 name:&#39;app&#39;,
 data(){
  return {
   name:&#39;xiaosan&#39;
  }
 },
 setup(){
  const name =ref(&#39;小四&#39;)
  const age=ref(18)
  function plusOne(){
   age.value++ //想改变值或获取值 必须.value
  }
  return { //必须返回 模板中才能使用
   name,age,plusOne
  }
 }
}
</script>

사용법 2 : 코드 분할

Options API 및 Composition API

Options API Convention :

props에서 수신 매개변수를 설정해야 합니다

data에서 변수를 설정해야 합니다

computed에서 계산 속성을 설정해야 합니다

다음을 수행해야 합니다. watch에서 청취 속성 설정

메서드에서 이벤트 메서드를 설정해야 합니다

Options API는 작업을 수행해야 하는 위치를 규정하고, 이로 인해 어느 정도 코드 분할을 수행해야 한다는 것을 알 수 있습니다.

이제 Composition API를 사용하므로 더 이상 이렇게 동의하지 않습니다. 따라서 코드 구성이 매우 유연하게 설정에서 작성될 수 있습니다.

설정 함수는 props와 context라는 두 가지 매개변수를 제공합니다. 중요한 점은 vue3.0에서는 이에 액세스하는 형식이 this.xxx=》context.xxx

이 된다는 것입니다. 옵션 API의 강제 코드 분리 없이는 더 이상 이 컨텍스트가 없습니다. Composition API는 우리에게 더 넓은 세상을 제공하므로 더 주의하고 제한해야 합니다.

복잡한 로직 코드의 경우 Composition API의 본래 의도에 더욱 주의를 기울여야 하며, 주저하지 말고 Composition API를 사용하여 코드를 분리하고 다양한 모듈로 잘라서 내보냅니다.

다음과 같을 것으로 예상합니다:

importuseAfrom'./a';
importuseBfrom'./b';
importuseCfrom'./c';
exportdefault{
setup (props) {
let{ a, methodsA } = useA();
let{ b, methodsB } = useA();
let{ c, methodsC } = useC();
return{
a,
methodsA,
b,
methodsB,
c,
methodsC
}
}
}

설정 콘텐츠 코드의 양이 점점 더 많아지더라도 항상 크지만 지저분하지 않고 명확한 코드 구조를 갖는 방식으로 나아갈 것입니다.

【관련 추천: "

vue.js tutorial

"】

위 내용은 vue3.0의 설정 사용법은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!