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

첫 번째: d7b7247d8029f2c18bf139c9b4de217b 정식 졸업

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

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

두 번째: c9ccee2e6ea535a969eb3f532ad9fe89 v-bind

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

import { ref } from 'vue'
const color = ref('red')
</script>
<template>
  <button @click="color = color === &#39;red&#39; ? &#39;green&#39; : &#39;red&#39;">
    Color is: {{ color }}
  </button>
</template>
<style scoped>
button {
  color: v-bind(color);
}
</style>

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 `<my-vue-element>` tags
// on the page will be upgraded.
customElements.define(&#39;my-vue-element&#39;, 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

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

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

<script setup>
const props = defineProps<{
  value?: number;
}>();
const emit = defineEmits<{
  (e: &#39;update:value&#39;, value: number): void;
}>();
</script>

먼저 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!