Vue3.2가 출시되어 이러한 새로운 기능을 제공합니다!

藏色散人
풀어 주다: 2022-01-14 17:03:37
앞으로
4579명이 탐색했습니다.

첫 번째: <스크립트 설정> 정식 졸업

vue3을 학습할 때부터 실험적인 <스크립트 설정> 을 발견했습니다. 간결한 작성 방법은 많은 사람들이 추구하기 때문에(setup(){return{}}을 작성해 본 사람은 누구나 알고 있음), 어떤 사람들은 이것이 vue3의 완전한 형태라고 말하기도 합니다. 업데이트 설명을 읽어보니 음... 공식적인 불만사항이 가장 치명적이네요.

은 SFC 내에서 Composition API를 사용할 때 작업 효율성을 크게 향상시키는 컴파일 타임 구문 설탕입니다.

두 번째:

로그인 후 복사

vue의 중국 공식 웹사이트에는 당분간 업데이트된 콘텐츠가 없기 때문에, 필요한 학생들은 외부 네트워크에 가서 영어 문서를 읽어야 할 수도 있습니다.

문서 주소:

https://v3.vuejs.org/api/sfc-script-setup.html
로그인 후 복사

세 번째: 새로운 DefineCustomElement 메서드

Vue 3.2에는 새로운 정의 CustomElement 메서드가 도입되었습니다. Vue 구성 요소 API를 사용하여 기본 사용자 지정 요소를 쉽게 만들 수 있습니다.

import { defineCustomElement } from 'vue'
const MyVueElement = defineCustomElement({
  // normal Vue component options here
})
// Register the custom element.
// After registration, all `` tags
// on the page will be upgraded.
customElements.define('my-vue-element', MyVueElement)
로그인 후 복사

넷째: 성능 개선

여기에는 새로운 명령어 v-memo를 언급하는 버전 3.2의 성능 업그레이드에 대해 이야기할 공간이 많습니다. 간단히 말해서 이 명령어는 가상 DOM 차이를 건너뛸 뿐만 아니라 템플릿 트리의 일부를 기억합니다. 새 VNode 생성을 건너뜁니다. 복잡한 대형 페이지에 사용할 수 있습니다.

다섯 번째: 서버 렌더링

마지막으로 서버 측 렌더링과 새로운 Effect Scope API에 대해 언급했습니다. 관심 있는 학생들은 업데이트 문서를 자세히 살펴볼 수 있습니다.

blog.vuejs.org/posts/vue-3…
로그인 후 복사

6번: 1024Lab 좀 더 이야기해보자

이미 많은 학생들이 사용하기 시작했다고 합니다. 문서에서 볼 수 있듯이

defineProps, DefineEmits, DefineExpose 및 withDefaults는 컴파일러 매크로에 속합니다. 문서에는 다음과 같은 내용도 나와 있습니다.

They do not need to be imported, and are compiled away when is processed
로그인 후 복사

소개할 필요가 없으며 컴파일 중에 처리됩니다.

단, 도입되지 않은 상태로 사용하시면 오류가 발생합니다.

로그인 후 복사

먼저 eslint는 오류를 보고합니다:

ESLint: 'defineEmits' is not defined.(no-undef)
로그인 후 복사

이때 eslint-plugin-vue

//https://eslint.vuejs.org/user-guide/#compiler-macros-such-as-defineprops-and-defineemits-are-warned-by-no-undef-rule
module.exports = {
  globals: {
    defineProps: "readonly",
    defineEmits: "readonly",
    defineExpose: "readonly",
    withDefaults: "readonly"
  }
}
로그인 후 복사

설정을 변경해야 합니다. 그런 다음 컴파일 후 브라우저 콘솔에서 오류를 보고할 수 있습니다

defineEmits is not defined
로그인 후 복사

다음을 발견할 수 있습니다. defineEmits 등은 컴파일되지 않습니다. 이를 처리해야 할 때 브라우저를 통해 소스 코드 DefineEmits를 보면 빨간색 물결선이 그려져 있습니다. 이때 package.json의 각 패키지 버전과 vite 2.4.x 버전을 확인하고 다시 시도해야 합니다. 컴파일된 코드는 다음과 같습니다.

const _sfc_main = _defineComponent({
  props: {
    value: { type: Number, required: false }
  },
  emits: ["update:value"],
  setup(__props, { expose, emit }) {}
 })
로그인 후 복사

위 내용은 Vue3.2가 출시되어 이러한 새로운 기능을 제공합니다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:toutiao.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!