02. reactive、ref函数

vue3中，使用reactive和ref函数来创建响应式数据

reactive

reactive只能创建非基本数据类型的响应式变量

<template>
  <div id="app">
    <ul>
      <li>{{ number }}</li>
      <li>{{ data }}</li>
      <li>{{ arr }}</li>
    </ul>
  </div>
</template>
<script setup>
import { reactive } from "vue";

// 定义基本数据类型
const number = reactive(100)

// 定义object
const data = reactive({
  name: 'tom',
  age: 15
})

// 定义数组
const arr = reactive([1,2,3])
</script>

这里我们用reactive创建了一个基本数据类型number，虽然程序没报错，但是打开控制台会有一个警告

value cannot be made reactive: 100

虽然能用，但是不建议这样使用。如果要定义响应式的基本数据类型，你应该使用ref函数创建

ref

ref函数可以创建任何数据类型

<template>
  <div id="app">
    <ul>
      <li>{{ number }}</li>
      <li>{{ data }}</li>
      <li>{{ arr }}</li>
    </ul>
  </div>
</template>
<script setup>
import { ref } from "vue";

// 定义基本数据类型
const number = ref(100)

// 定义object
const data = ref({
  name: 'tom',
  age: 15
})

// 定义数组
const arr = ref([1,2,3])
</script>

需要注意的是，在js中访问ref所创建的响应式变量，需要这样访问 ：

console.log(number.value) // 加上.value
console.log(data.value)
console.log(arr.value)

之所以要加上.value是因为ref所创建的响应式变量被vue3定义成了一个RefImpl的对象，该对象的value属性就是我们看到的100。我们可以直接打印number的值来看看

console.log(number);

reactive和ref区别

1、reactive只能创建对象类型，ref能创建任何数据类型
2、ref创建的变量，需要用.value来访问

定义非响应式变量

如果你不想定义响应式变量，你可以像下面这样定义变量

<template>
  <div id="app">
    <ul>
      <li>{{ number }}</li>
      <li>{{ data }}</li>
      <li>{{ arr }}</li>
    </ul>
  </div>
</template>
<script setup>
// 定义基本数据类型
const number = 100

// 定义object
const data = {
  name: 'tom',
  age: 15
}

// 定义数组
const arr = [1,2,3]

setTimeout(()=> {
  arr.push(4)
  console.log(arr)
}, 2000);
</script>

运行结果

虽然往arr数据添加了一个4，但是模板的数据并没有更新