Vue3 理解 ref 和 reactive 的用法、区别

Vue3 新出的这俩属性 ref / reative 跟 Vue2 中的 data 一样是用来定义数据的，使用了这两个后， data 基本就用不到了，下面是笔者对这两个属性的一个总结：

• ref 常用于基本类型：Boolean / Number / String / ...
• reactive 常用于引用类型：Object / Array ....

用法如下：

<template>
  <div v-if="show">
    {{ greet }}, {{ info.name }}，手机号是： {{ info.phone }}
  </div>
</template>

<script>
import { ref, reactive } from 'vue' // 引入这两个
export default {
  setup() {
    const show = ref(true) // 定义布尔值
    const greet = ref('Hello') // 定义字符串
    const info = reactive({ // 定义对象
      name: '张三',
      phone: 10086
    })
  
    // 注意：在 setup 里面访问 ref 定义的值必须要带上 .value
    // 而在 template 模板里直接像 Vue2 往常那样访问即可。
    console.log(show.value) 
    
    return {
      show,
      greet,
      info
    }
  }
}
</script>