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

First:

I noticed the experimental

Second: Add

And

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!