1. Vue3 advantages:
  • The most popular framework, it is one of the most popular front-end frameworks in China, official documentation Chinese documentation
  • The performance is improved, and the running speed is about 1.5 times that of VUe2. X
  • Smaller, on-demand compilation volume is smaller than vue2. X
  • Type inference, better support for Ts (typescript) this is a trend (js superset)
  • Advanced giving exposes lower-level apis and provides more advanced built-in components

Reactive is a function that defines a complex data type as reactive data. Here are the basic uses of Reactive in VUe3

<template>
  <div>Vue3 Basics - Responses to data</div>
  <div>{{info.msg}}</div>
  <div>{{info.abc}}</div>
  <button @click='handleClick'>Click on the</button>
</template>
<script>
// The following way of writing code is called option API
import { reactive } from 'vue'
export default {
  name: 'App',
  setup () {
    // Template data, previously provided by the data option, is now provided by the return value of setup
    // Define a common variable that does not have responsiveness
    // let msg = 'hello'
    // Object data wrapped in Reactive is responsive
    const info = reactive({
      msg: 'hello'.abc: 'hi'
    })
    const handleClick = () = > {
      // console.log(msg)
      // msg = 'nihao'
      // console.log(msg)
      // -----------------------
      info.msg = 'nihao'
      info.abc = 'coniqiwa'
    }

    return { info, handleClick }
  }
}
</script>
Copy the code