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>

看完本篇后，笔者建议你按照顺序阅读下一篇：
Vue3 理解 toRef 和 toRefs 的作用、用法、区别

上一篇是：Vu3 setup 函数的用法、作用