Your location:Tech News>News>Script>15 minutes to get started vue3.0 (Summary)

Latest News

15 minutes to get started vue3.0 (Summary)



  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: // / 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: // 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:




  Composition API provides two major benefits:

  A clear code structure

  2, eliminate duplicate logic



  If you do not like Composition API, can continue to use 2.x traditional methods:



  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:



  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



  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:


  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:



  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: