What? VUE3.2 released?

Two days ago early in the morning received you big micro blog push, Vue 3.2 released! Boy, this new version is here before the last one was played out. The comments section was also full of wails

\

But also, as noted in the comments section, it’s hard not to support. Let’s see what’s new this time.

Two new features have graduated from experimental status

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — the waltz division — — — — — — — — — — — — — — — — — — — — — — — — — — — —

The first:<script setup>Graduated from a formal

I noticed the experimental

< Script setup> is a compile-time syntax sugar that can greatly improve productivity when using the Composition API within the SFC.

Second: New additions<style> v-bind

< span style = “box-sizing: border-box; color: RGB (50, 50, 50); line-height: 22px; font-size: 14px! Important; white-space: inherit! Important;” Officials give an example:

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

Because vUE Chinese official website does not have this update for the time being, students who need it may have to go to the Internet to chew on the English document.

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

Third: Add defineCustomElement method

Vue 3.2 introduces a new defineCustomElement method that makes it easy to create native custom elements using the Vue component 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('my-vue-element', MyVueElement)
Copy the code

Number four: Performance improvements

There is a lot of talk here about the 3.2 performance upgrade, which mentions the new directive V-Memo, which simply memorizes a portion of the template tree and skips not only the virtual DOM differences, but also the creation of a new VNode entirely. Can be used for complex large pages.

Number five: Server rendering

Finally, server-side rendering and the new Effect Scope API are mentioned. Those of you who are interested can take a closer look at the update document. Blog.vuejs.org/posts/vue-3…

No. 6:1024Lab Say more

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

DefineProps, defineEmits, defineExpose, and withDefaults are 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, they are handled at compile time.

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

<script setup lang="ts"> const props = defineProps<{ value? : number; } > (); const emit = defineEmits<{ (e: 'update:value', value: number): void; } > (); </script>Copy the code
  • First, ESLint will report an error:

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

At this point you need to change the eslint-plugin-vue configuration

//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"
  }
}
Copy the code
  • Then maybe the browser console will report an error after compilation

defineEmits is not defined

You may notice that defineEmits, etc., was not disposed of during compilation, and that the source code defineEmits is still there with a red wavy line drawn through the browser. Json and 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 }) {}
 })
Copy the code

Point 7: Let me finish with a little teasing

Volar is a plugin for vscode, which makes webstorm’s party… Crying miserably…

But Vue 3.2 + Script setup + typescript + volar smells good! Really sweet!

SmartAdmin2.0 is also refactoring with the latest

SmartAdmin: github.com/1024-lab/sm…