It has been about seven months since the official version of VUe3.0 was released, and the community ecology has been gradually improved

Currently, vuE3 UI component library is supported
  • ant-design-vue

Antdv.com/docs/vue/in… Ant-design-vue is a VUE implementation of Ant Design, and the style of the components keeps pace with Ant Design

  • element-plus

IO /#/ zh-cn Element Plus, a desktop component library for developers, designers, and product managers based on Vue 3.0

  • vant

Vant – contrib. Gitee. IO/vant/v3 / # / z… Vue 3.0 is a lightweight and reliable Vue component library for mobile terminals. At present, Vant has completed the adaptation of Vue 3.0 and released Vant 3.0 version

  • VueUse

Vueuse.org a common collection based on the Composition API

Vue3 brings new changes
  1. Performance improvement
  • Faster first render
  • The Diff algorithm is faster
  • Less memory footprint
  • Smaller packing volume
  1. Better Typescript support
  2. Composition API
reading
  1. Vue3 Chinese document vue3js.cn/docs/zh/
  2. Vue3 design concept vue3js.cn/vue-composi…

A composite API is different from an OptionAPI

<template>
  <div>
    <! -- Function 1 template -->
    <button @click="show">According to</button>
    <button @click="hide">hidden</button>
    <div v-if="showDiv">A div that is controlled to be hidden</div>
  </div>
  <div>
    <! -- Function 2 Template -->
    <button @click="changeRed">red</button>
    <button @click="changeYellow">blue</button>
    <div :style="`color:${fontColor}`">A div that controls the font color</div>
  </div>
</template>
Copy the code

Vue2.0 writing

<script>
export default {
  name: 'App'.data() {
    return {
      showDiv: true.// Function one data
      fontColor: ' ' // Function two data}},methods: {
    // Function one method
    show() {
      this.showDiv = true
    },
    hide() {
      this.showDiv = false
    },
    // Function 2
    changeRed() {
      this.fontColor = 'red'
    },
    changeYellow() {
      this.fontColor = 'blue'
    }
  }
}
</script>
Copy the code

Vue2 features: easy to understand, specific options have a specific location for storage

Downside: When code gets big, you have to dig around

Vue3.0 writing
//- 1, the amount of code increases will also be difficult to find
<script>
import { ref } from 'vue'
export default {
  name: 'App'.setup() {
    / / function
    const showDivFlag = ref(true)
    function show() {
      showDivFlag.value = true
    }
    function hide() {
      showDivFlag.value = false
    }
    2 / / function
    const fontColor = ref(' ')
    function changeRed() {
      fontColor.value = 'red'
    }
    function changeBlue() {
      fontColor.value = 'blue'
    }
    return { showDivFlag, show, hide, fontColor, changeRed, changeBlue }
  }
}
</script>

/ / - writing 2
<script>
import { ref } from 'vue'
function useShow() {
  const showDivFlag = ref(true)
  function show() {
    showDivFlag.value = true
  }
  function hide() {
    showDivFlag.value = false
  }
  return { showDivFlag, show, hide }
}
function useColor() {
  const fontColor = ref(' ')
  function changeRed() {
    fontColor.value = 'red'
  }
  function changeBlue() {
    fontColor.value = 'blue'
  }
  return { fontColor, changeRed, changeBlue }
}
export default {
  name: 'App'.setup() {
    / / function
    const { showDivFlag, show, hide } = useShow()
    2 / / function
    const { fontColor, changeRed, changeBlue } = useColor()
    return { showDivFlag, show, hide, fontColor, changeRed, changeBlue }
  }
}
</script>
Copy the code

Vue3 features: Data and methods related to specific functions can be maintained together, and can be logically broken down