Vue3.2 has been released, bringing these new features!

First: 5101c0cdbdc49998c642c71f6b6410a8 Official graduation

I noticed the experimental 5101c0cdbdc49998c642c71f6b6410a8 from the beginning of learning vue3. Because the concise writing method is sought after by many people (everyone who has written setup(){return{}} knows it), some people even say that this is the complete form of vue3. After reading the update description, emmm...the official complaints are the most deadly.

5101c0cdbdc49998c642c71f6b6410a8 is a compile-time syntactic sugar that greatly improves productivity when using the Composition API within SFC.

Second: Addc9ccee2e6ea535a969eb3f532ad9fe89 v-bind

Andc9ccee2e6ea535a969eb3f532ad9fe89 v-bind, simply speaking, can be used internally Dynamic value defined by the component. The official gave an example:

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>

Because the vue Chinese official website does not have this updated content for the time being, students who need it may have to go to the external network to read the English documents.

Document address:

https://v3.vuejs.org/api/sfc-script-setup.html

Third: New defineCustomElement method

Vue 3.2 introduces a new defineCustomElement method, which can use Vue components API to easily create native custom elements:

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)

Fourth: Performance improvements

There is a lot of space here to talk about the performance upgrade of version 3.2, which mentions the new The instruction v-memo, simply put, this instruction will remember a part of the template tree, not only skipping virtual DOM differences, but also completely skipping the creation of new VNode. Can be used for complex large pages.

Fifth: Server Rendering

Finally mentioned server-side rendering and the new Effect Scope API. Interested students can take a closer look at the update document.

blog.vuejs.org/posts/vue-3…

The 6th: 1024Lab Let’s talk a little bit more

I believe many students have already started using it. As you can see in the document,

defineProps, defineEmits, defineExpose, and withDefaults belong to compiler macros. The document also says:

They do not need to be imported, and are compiled away when is processed

They do not need to be introduced and will be processed during compilation.

However, if you don’t introduce it, you will get an error.

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

First of all, eslint will report an error:

ESLint: 'defineEmits' is not defined.(no-undef)

At this time you need to change the configuration of 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"
  }
}

Then the browser console may report an error after compilation

defineEmits is not defined

You may find that defineEmits, etc. are not processed during compilation. If you look at the source code through the browser, defineEmits are still there, with red wavy lines drawn. At this time, you may need to check the versions of each package in package.json and the vite version 2.4.x. Update and try again. The compiled code should look like this:

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

The above is the detailed content of Vue3.2 has been released, bringing these new features!. For more information, please follow other related articles on the PHP Chinese website!