如果想要响应式的数据变量，不能直接定义，如下面这个例子：

我们直接定义了变量num1，使用定时器使他每一秒+1，我们理想的状态是num1的值为多少，插值表达式中的值就为多少。

但是我们会发现num1的值一直在改变，而页面上的差值表达式一直是num1的初值，没有我们想要的响应式的效果。

使用ref定义响应式变量

import {ref} from 'vue';

let 变量名 = ref(值);

我们只需要用ref对数据稍加修饰，就可以得到响应式的变量。 

 

这里需要注意一下ref变量的值，如果我们输出num2，就会得到如下的对象：

因此我们在Script中想要对变量进行修改，应该用 变量名.value 的形式，而在差值表达式中不需要加上 .value ,这点很容易忘记。

此外，我们还可以使用ref去定义其他数据类型的变量：

不需要纠结哪些数据类型用ref，哪些数据类型用reactive,所有变量都可以使用ref来进行定义。