Uvu announced the release of Vue3.2 on August 5.

Today, a month later, I wrote taste, belatedly, tofu is cold.

After uVU announced the update, they tested it locally and found no obvious problems, and uVU said there were no disruptive updates, so schedule it!

Update the content

In 3.2, there are two features that have been around for a long time:

script setup

Simple setup syntax candy in the Composition API, but with it you can write a lot less: returns in setup, for example, and imported components can be used without declaration.

Utah has really helped us take the lazy spirit to the extreme.

In script setup mode, the main changes are the declarations of props and emits. DefineProps and defineEmits must be used.

There is also the Script Setup component, which is described in the documentation as being turned off by default. To put it simply, all properties in a component are accessible only from within the component. No properties defined in the component can be accessed by the parent component through ref or by the child component through $parent.

So we need to actively expose externally accessed properties via defineExpose.

v-bind

We can use js variables directly in style, for example

As you can see, the div background color on the page is the background variable we defined, and v-bind makes it very easy to change the style dynamically.

Error: background variable defined but never used in esLint

Vue version 7.16.0 is compatible with vue3.2’s new V-bind method. Vue version 7.16.0 is compatible with vue3.2’s new V-bind method. Vue version 7.16.0 is compatible with vue3.2’s new V-bind method

After the upgrade, restart the ESLint server and the error goes away.

implementation

The implementation of V-Bind is based on an existing CSS API: CSS custom properties.

As you can see in F12, the variables we bind to v-bind are bound to DOM nodes using custom attributes.

We can implement the same requirement ourselves with the following code:

Problems encountered

Say that finish upgrade content, the following is to say the problems encountered in the development.

In fact, WHEN VUe3 is used now, it has not met any big problems (otherwise, I would not have lived to write articles now), just because it has not been widely used, there are few reference materials, and it is not easy to find solutions from the Internet.

DefineEmits and defineEmit

Prior to 3.2, when we fired a parent component event within a component, we received the event from the parent through emits. In

It’s emits instead of defineEmits. That’s easy. Yes, I felt the same way at first, but when I introduced defineEmits into the project, I realized that things didn’t go as expected.

After importing the event via const emits = defineEmits([‘test’]), emits is null and cannot be called.

Finally, the solution is found on issues, and the problem can be solved by upgrading @Vue/Compiler-SFC package.

But the weirder thing happened when I was writing the article, and the experimental project of the article did not reproduce this problem. Vue was downgraded to 3.2.1, and @Vue/Compiler-SFC was also an old version, but the problem still could not be repeated. Even the production project, which downgraded @vue/ Compiler-SFC back to the old version, cannot be reproduced.

Therefore, if you encounter similar problems, you can try to upgrade @vue/ Compiler-SFC to solve them. If you do not encounter any problems, there is no need to worry.

conclusion

This is the only obvious problem encountered in vue3.2. Other minor problems are related to project structure and vite. I will sort out an article later.

So far, the vuE3 + Vite development team has been comfortable enough with no major problems. But Element-Plus is worth laughing at, with all its bugs.

So stay tuned for the next episode