Vue3快速上手（四）ref之基本类型响应式数据

一、ref之基本类型响应式数据

1.1 基本语法

import { ref } from 'vue'

let x = ref('初始值')

console.log('xxx --> ', x.value);

x为一个RefImpl对象，该对象的value属性为实际值，在script里需要操作x.value来改变数据的值，在页面里则可以直接使用{{x}}来展示数据

1.2 简单示例

<script lang='ts' setup name="PersonCom">
// 引入ref
import { ref } from 'vue'

// 此时，ref包裹的数据即为响应式数据
let name = ref("李四") 
// 非响应式数据（只做一次展示，无需修改的数据）
let age = 99 
console.log('name --> ', name); // RefImpl
console.log('age --> ', age);

// 对非响应式数据直接赋值修改是在方法里生效的，但在页面里的不生效的
function updatePersonName() {
    console.log('调用修改name方法');
    // js里，操作ref包裹的响应式数据，必须给其value赋值，而不能直接给属性赋值
    name.value = "王五"
    console.log('改之后name: ', name.value);// 王五
}
</script>

输出如下：

页面点击修改后，数据发生了变化：

二、简单总结

1. 需要引入ref才可以使用；
2. ref包裹的数据即为响应式数据,返回一个RefImpl对象实例；
3. script标签里，操作ref包裹的响应式基本类型数据，必须给其value属性赋值，而不能直接给数据对象赋值。

END