Vue3.0教程004：ref和reactive对比-3.4 ref创建基本类型的响应式数据

在script中引入ref

import {ref} from 'vue';

需要哪个数据是响应式的，就用ref包裹哪个数据：

// 数据
let name = ref('张三'); // 此时的name是响应式的
let age = ref(18); // 此时的age是响应式的

注意：这个时候通过方法修改name和age的值的时候，不能通过name='李四'和age += 实现，会报错，因为真实的值是存放在value中的，需要通过name.value和age.value来实现。但是模板中不需要通过{{name.value}}实现，因为模板会自动获取.value值。

修改name和age的方法

function changeName() {
    name.value = '李四';
}

function changeAge() {
    age.value += 1;
}

刷新浏览器，可以实现name和age的修改：

注意：这里强调的是基本类型响应式数据。

• 因为name='张三'和age=18都是基本类型。