Vue3中的reactive的用法（基础）

1. Vue3优点：

• 最火框架，它是国内最火的前端框架之一，官方文档 中文文档
• 性能提升，运行速度事vue2.x的1.5倍左右
• 体积更小，按需编译体积比vue2.x要更小
• 类型推断，更好的支持Ts（typescript）这个也是趋势（js的超集）
• 高级给予，暴露了更底层的API和提供更先进的内置组件 而其中的reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据。 下面是vue3中reactive的基础用法

<template>
  <div>Vue3基础-关于数据的响应式</div>
  <div>{{info.msg}}</div>
  <div>{{info.abc}}</div>
  <button @click='handleClick'>点击</button>
</template>
<script>
// 如下写代码的方式称之为选项API
import { reactive } from 'vue'
export default {
  name: 'App',
  setup () {
    // 之前模板数据由data选项提供，现在由setup的返回值提供
    // 定义的普通变量，不具备响应式能力
    // let msg = 'hello'
    // 采用reactive包裹的对象数据就具备了响应式能力
    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>