Vue 3 has not been officially released, but the Alpha version has been released.
Although the official Vue is not recommended to use directly in a production environment 3, but it is always good to learn in advance.
I learned shouting his mouth did not move, his hands still very honest document opens Vue 3
Create a project
Official Vue provides a very intimate github repository, so that we can quickly experience the new features of Vue 3:
git clone https: // github.com / vuejs / vue-next-webpack-preview.git vue3-start
cd vue3-start
npm install or yarn intall
After the development environment is ready, start the command:
npm run dev
Open your browser to http: // 127.0.0.1: 8080, you can see a simple page counter:
Open package.json, vue version currently in use is: 3.0.0-beta.2
Vue 3 New Features
Vue designed 3 is faster, smaller, and better support TypeScript .
Some new features include:
1, Composition API
2, Multiple root elements
3, Suspense
4, Multiple V-models
5, Reactivity
6, Teleport
7, Transition
8, Remove Filter
9, App configuration
1, Composition API
Vue official release of the official Composition API plug-in, so that customers can Vue2.x enjoy Function Base to bring new experience.
In the vue 3 no separate installation plug out of the box.
Open App.vue, you will see the setup () method:
Hello Vue 3!
Composition API provides two major benefits:
A clear code structure
2, eliminate duplicate logic
count: {{count}}
NewVal (count + 2): {{countDouble}}
Message: {{msg}}
If you do not like Composition API, can continue to use 2.x traditional methods:
count: {{count}}
NewVal (count + 2): {{countDouble}}
Message: {{msg}}
The above two codes listed in effect completely equivalent
The benefits of using Composition API: allows us to better organize the code (state, methods, computed properties, watcher, etc.).
With the growth of the size of the components, how to organize our business code becoming an important issue to ensure that new entrants developers can easily understand the code without the need to spend too much time.
Before we use mixin to code reuse.However, mixin biggest pain point is that we need to track the status of different components and methods, which tend to give developers bring some mental burden, accidentally, mixin may override existing methods or state assembly.
Use Composition API to make the code easier to reuse.
We can also extract the repeat function code:
// message.js
import {ref, watch} from "vue";
export function message () {
let msg = ref (123);
watch (msg, (newVal) => {
console.log ( "msg changed", newVal);
});
const changeMessage=()=> {
msg.value = "new Message";
};
return {msg, changeMessage};
}
Using the above components other components:
count: {{count}}
NewVal (count + 2): {{countDouble}}
Message: {{msg}}
2, Multiple root elements
In Vue 2, tempalte only take a root element.Even if we have only two
Mark, we also have to include them in a
Count: {{count}}
In order to compile, we usually add a root node.
This design really bad, I have been many times Tucao this design.Because it will bring unnecessary code nesting and indentation.
Fortunately cancel this restriction in the Vue 3:
Directly inIn any number of labels:
Count: {{count}}
When you open a template with VScode, see some lint mistake, this is because the official plugin eslint-plugin-vue not yet support the new template syntax.
3, Suspense
Suspense is a new feature Vue 3.
Front and rear ends generally is an asynchronous interaction process: We provide a load default animation, when the data is returned with the v-if used to control the data display.
Suspense has significantly simplifies this process: it provides a default and fallback two states:
{{Item.title}}
{{Item.body}}
Articles loading.
4, Multiple v-models
We all know that v-models for two-way data binding.Typically for use with a form element.Sometimes we use it in a custom component.
Vue 2 allows only a v-models on a component.In Vue 3, we can be any number of v-model bound to our custom components:
5, Reactivity
Vue Responsive 2 has been great, but there are some problems in a few cases:
We found this.subscript to modify the list of elements, and will not trigger wacher monitor function, in order to achieve their goals, we had to use vue.set () or vue.delete () methods.
In vue 3, we do not need the aid of other API:
export default {
setup() {
let list = ref ([1, 2]);
let myObj = ref ({name: "Preetish"});
function myFun () {
list.value [3] = 3;
myObj.value.last="HS";
delete myObj.value.name;
}
return {myFun, list, myObj};
},
};
6, Portals
Portals provide a component in the ability to render a page any DOM node.In Vue 2, the use of a portal-vue third-party plug-ins to do this.
Directly in vue 3 in which:
till this moment,
7, Transition
Before I use the v-enter-active, v-enter, v-enter-to engage in these states confusing.
Now Vue 3 from a more intuitive naming: v-enter into a v-enter-from, v-leave into v-leave-from.
8, Remove Filter
Vue 3 Filter abandoned the use of property or more recommended calculation methods to achieve:
{{Date | format}}
{{Format (date)}}
9, App configration
In Vue 2, if you want to use use (), mixin (), directive () method and the like require complex global Vue objects:
import Vue from "vue";
import App from "https: // www.jb51.net / article / App ";
Vue.use ();
Vue.mixin ();
Vue.component ();
Vue.directive ();
new Vue ({
el: "#app",
template: "
components: {
App,
},
});
In Vue. 3, the changed return createApp Vue example:
import {createApp} from "vue";
import App from "https: // www.jb51.net / article / App.vue ";
const app = createApp (App);
app.use ();
app.mixin ();
app.component ();
app.directive ();
app.mount ( "# app");
Conclusion
In short Vue 3 to organizations by providing a simple way and share code, and provide strong support TypeScript the new code organization will have a significant impact on the future of application development.
Meanwhile, some other features, such as Suspense, more v-models, etc. will bring great convenience to developers.
Meanwhile faster performance, smaller.How it is done, please refer to another article I wrote: Vue.js Author: About Vue3.The story behind 0
This article about 15 minutes to get started vue3.0 (Summary) on the introduction to this article, the more vue3.0 Getting Please search script home earlier article or continue browsing the following related articles in the future we hope a lot of support scripting House!
You may also be interested in the article: Based vue3.0.1beta build imitation Jingdong electricity supplier H5 Project On Vue3.0 The new API into the pit of the composition-api guide you ready vue3.0 yet