The official version of Vue3.0 was released on September 18th last year. The official website of Vue3.0 is cli.vuejs.org/zh/guide/. The Node version of Vue3.0 is also required, and must be 8.9 or later (8.11.0 is recommended).

The advantage of Vue3.0

  1. Compiled on demand, compressed package size is smaller
  2. Faster compilation, 1.2 to 2 times faster than Vue2.0
  3. Using the Composition API
  4. Improved support for Ts
  5. Exposed custom rendering apis

A project to install Vue3.0

To view the node.js version before installing the Vue3.0 project, run node -v in CMD

Start the installation

Execute vue create the project name in CMD and select Manually Select Features enter

Select dependent dependencies

Space select, after the selection is complete, press Enter to submit

Select version

Has been created

Vue3.0 new features

setup

This method is fired when the component is initialized. Variables or functions defined inside this method must return. Setup does not have this; this is undefined

<template>
  <div id="nav">
    {{novel}}
  </div>
</template>
<script>
  export default {
    setup(){
      const novel = 'stupid bird';// Define constants
      return {
        novel
      }
    }
  }
</script>
Copy the code

V-model (Two-way data binding)

In Vue2. X, reactive data is realized by defineProperty, while in Vue3. X, reactive data is realized by Proxy

Custom bidirectional binding of data. Prior to version 2.0 all variables were bidirectional binding, in version 3.0 you can optionally set bidirectional binding of data, which is similar to the on-demand introduction of the Element-UI component library, greatly reducing the size of packages.

<template>
  <div id="nav">
    <p>{{novel}}</p>
    <p>{{obj}}</p>
    <p><button @click="changeFun">Click on the change</button></p>
  </div>
</template>
<script>
import { reactive, ref } from 'vue';Ref and reactive are introduced and resolved in vue
  export default {
    setup(){
      let novel = ref('stupid bird');// Use ref for basic data types
      let obj = reactive({name:'stupid bird'})// Use reactive for complex data types
      const changeFun = () = >{
        novel.value = '111';
      }
      return {
        novel,
        obj,
        changeFun
      }
    }
  }
</script>
Copy the code

readonly

In version 3.0, you can set read-only properties for data

<template>
  <div id="nav">
    <p>{{novel}}</p>
  </div>
</template>
<script>
import {  readonly } from '@vue/reactivity';
  export default {
    setup(){
      let novel = readonly('stupid bird');// Set the novel to read only
      setTimeout(() = > {
        novel.value='I'// Change the novel value
      }, 200);
      return {
        novel,
      }
    }
  }
</script>
Copy the code

The following happens

That’s the main update for today.