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

첫 번째: 정식 졸업

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

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

두 번째: v-bind

를 추가했으며 v-bind는 단순히 구성 요소에서 정의한 동적 값을 내부적으로 사용할 수 있다는 의미입니다. 관계자는 다음과 같은 예를 들었습니다.

import { ref } from 'vue' const color = ref('red') Color is: {{ color }} button { color: v-bind(color); } 로그인 후 복사 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 로그인 후 복사 소개할 필요가 없으며 컴파일 중에 처리됩니다.

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

const props = defineProps (); const emit = defineEmits (); 로그인 후 복사 먼저 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 }) {} }) 로그인 후 복사