Know Vue3

The relevant information

First, what is VUe3

  • Vue.js 3.0 “One Piece” will be released in September 2020
  • More than 2 years of development, 100+ contributors, 2600+ submissions, 600+ PR
  • Vue3 supports most of the features of VUE2
  • Better support for Typescript

You can use vuE2 in vuE3 with almost complete downward compatibility

Ts is fully supported in the VUe3 project, it just needs to be set when creating the project

Performance improvement

  • Package size reduced by 41%
  • First render is 55% faster and update render is 133% faster
  • Memory reduced by 54%
  • Use Proxy instead of defineProperty to implement data response
  • Rewrite the implementation of the virtual DOM and tree-shaking

This is the official data, but in practice it is actually faster than VUE2. In order to improve the speed of vuE3, it will remove the import that is not used. It is called tree-shaking

Create a project

Created using vue-cli

Documents: cli.vuejs.org/zh/guide/cr…

NPM install -g@vue /cli ## Ensure that vue CLI version is at least 4.5.0 vue --version ##Copy the code

The next step

  • Please pick a preset – selectionManually select features
  • Check the features needed for your project – SelectTypeScript“, especially note that the click on the space is to select and the click on the enter is the next step
  • Choose a version of vue.js that you want to start the project with – Choose3.x (Preview)
  • Use class-style component syntax –
  • Use Babel alongside TypeScript – Enter directly
  • Pick a linter/formatter config –
  • Use history mode for router? – Press Enter
  • Pick a linter/formatter config –
  • Pick Additional Lint Features – Press Enter
  • Where do you prefer placing config for Babel, ESLint, etc.? – Press Enter
  • Save this as a preset for future projects? – Press Enter

Simply select Manually Select Features for custom installation in the first step and ts in the second

Created using vite

  • Documents: v3.cn.vuejs.org/guide/insta…
  • Vite is a native ESM-driven Web development build tool. Based on browser-native ES Imports in the development environment
  • It did,Local rapid development startupIs packaged based on Rollup in production
  • Quick cold start, no need to wait for the packing operation;
  • Instant hot module updates, replacement performance and the decoupling of the number of modules to enable new ones to fly;
  • True on-demand compilation, instead of waiting for the entire application to compile, is a big change
npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev
Copy the code

Composition API(Common API)

1, the setup

  • The new option, where all combined API functions are used, is executed only once during initialization
  • Functions that return objects, properties or methods from objects, can be used directly in templates
  • The concept of VUE3 is functional development, with all functions and variables written in setup, including lifecycle functions
export default {
  /* Use the vue3 composition API */
  setup () {
    // Define a responsive data ref object
    const count = ref(1)
    // A function that updates responsive data
    function update () {
      count.value = count.value + 1
    }
    // Setup return specifies that variables or functions in an object can be used directly in a template
    return {
      count,
      update
    }
  }
}
Copy the code

2, ref

  • Function: Defines a response to data
  • Const XXX = ref(initValue):
  • Create a reference object that contains reactive data
  • The operation data in js needs to be taken from its value attribute: xxx.value
  • In a template, you can use it directly: no.value is required
  • Reactive data is usually used to define a basic type of data, but in practice, the next reactive data is usually used
  • Need to introduce when usingimport {reactive} from 'vue'
<template>
  <h2>{{count}}</h2>
  <hr>
  <button @click="update">update</button>
</template>
<script>
import {
  ref
} from 'vue'
export default {
  /* Data and Methods are still available in Vue3, but we recommend using their new syntax */
  // data () {
  // return {
  // count: 0
  / /}
  // },
  // methods: {
  // update () {
  // this.count++
  / /}
  // }
  /* Use the vue3 composition API */
  setup () {
    // Define a responsive data ref object
    const count = ref(1)
    console.log(count)
    // A function that updates responsive data
    function update () {
      // alert('update')
      count.value = count.value + 1
    }
    return {
      count,
      update
    }
  }
}
</script>
Copy the code

3, reactive

  • Function: to define the response of multiple data, is also the most commonly used way in actual combat
  • Const proxy = reactive(obj): a reactive proxy object that receives a common object and returns the common object
  • Responsive conversion is “deep” : will affect all nested properties inside the object, VUE will recurse to each layer become responsive, not vuE2 deep data not updated, completely get rid of the trouble of the $set (good (✿゚▽゚) blue)
  • Internal implementation based on ES6 Proxy, through the Proxy object operation source object internal data are responsive
  • The same as the REFimport {reactive} from 'vue'
<template>
  <h2>name: {{state.name}}</h2>
  <h2>age: {{state.age}}</h2>
  <h2>wife: {{state.wife}}</h2>
  <hr>
  <button @click="update">update</button>
</template>

<script>
Reactive (obj) = reactive(obj); reactive(obj) = reactive(obj); An object reactive transformation is "deep" : it affects all nested properties inside the object. Internal es6-based Proxy implementations, and the manipulation of data inside the source object through the Proxy object are reactive */
import {
  reactive,
} from 'vue'
export default {
  setup () {
    /* Define a reactive data object, which usually defines the data in the page in a state variable */
    const state = reactive({
      name: 'tom'.age: 25.wife: {
        name: 'marry'.age: 22}})console.log(state, state.wife)

    const update = () = > {
      state.name += The '-'
      state.age += 1
      state.wife.name += '+ +'
      state.wife.age += 2
    }

    return {
      state,
      update,
    }
  }
}
</script>
Copy the code