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 函数的用法、作用

Logo

前往低代码交流专区

更多推荐