Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what are the new features of Vue3.2". In the operation of actual cases, many people will encounter such a dilemma. Then let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The first one: formal graduation

From the beginning of learning vue3, I noticed the experimental. Because the concise way of writing is sought after by many people (people who have written setup () {return {}} know it), and some even say that this is the complete form of vue3. Read the updated description, emmm.... Official complaints are the deadliest.

Is a compile-time syntax sugar that greatly improves productivity when using Composition API within SFC.

Second: add v-bind

V-bind, on the other hand, simply means that you can use the dynamic values defined by the component inside. Officials gave an example:

Import {ref} from 'vue'const color = ref (' red') Color is: {{color}} button {color: v-bind (color);}

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

Document address:

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

Third: add defineCustomElement method

Vue 3.2 introduces a new defineCustomElement method that allows you to easily 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 ``tags// on the page will be upgraded.customElements.define (' my-vue-element', MyVueElement)

Fourth: performance improvement

There is a lot of space here about the performance upgrade of version 3.2, which mentions the new directive v-memo, which simply remembers part of the template tree, skipping not only the virtual DOM differences, but also the creation of the new VNode altogether. Can be used for complex large pages.

Fifth: server rendering

Finally, server-side rendering and the new Effect Scope API are mentioned. Interested students can take a closer look at the updated documents.

Blog.vuejs.org/posts/vue-3...

No. 6: 1024Lab, say a little more.

I believe many students have started to use it. You can see it in the document

DefineProps, defineEmits, defineExpose, withDefaults belong to compiler macro, 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 disposed of at compile time.

However, an error will be reported when it is not introduced into your use.

Const props = defineProps (); const emit = defineEmits ()

First of all, eslint will report an error:

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

At this point, 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-rulemodule.exports = {globals: {defineProps: "readonly", defineEmits: "readonly", defineExpose: "readonly", withDefaults: "readonly"}}

Then it is possible that the compiled browser console will report an error

DefineEmits is not defined

You may find that defineEmits and others are not disposed of at compile time, and the source code defineEmits is still there through the browser, with red wavy lines. At this point, you may need to check the version of each package in package.json and the version 2.4.x of vite, update it 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}) {}}) that's all for Vue3.2. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.