定义变量

1.ref()

1.1 作用

ref()函数用来定义变量，一般用来定义一个基本数据类型的变量

ref()也可以定义复杂数据类型，但是内部也会reactive()转化为响应式对象

1.2 语法

接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value。

function ref<T>(value: T): Ref<UnwrapRef<T>>

interface Ref<T> {
  value: T
}

使用语法如下：

Js

import {ref} from 'vue'

// 定义基本数据类型
const num=ref(123)
const str=ref('你好')
const bool=ref(true)
const none=ref(null)
const no=ref(undefined)

// 定义复杂数据类型
const obj=ref({
    num:123
})


const arr=ref([1,2,3,4,5])

Ts

import {ref} from 'vue'

// 定义基本数据类型
const num=ref<number>(123)
const str=ref<string>('你好')
const bool=ref<boolean>(true)
const none=ref<null>(null)
const no=ref<undefined>(undefined)

// 定义复杂数据类型
interface Item{
    num:number
}
const obj=ref<Item>({
    num:123
})


const arr=ref<Array<number>>([1,2,3,4,5])

1.3 使用

ref()返回一个Ref对象，其中有一个value属性存储着我们定义的值

也就是说ref()定义的数据都需要以.value的方式使用

const num=ref(123)
console.log(num.value) // 123

const str=ref('你好')
console.log(str.value) // '你好'

const obj=ref({
    num:123
})
console.log(obj.value.num) // 123

const obj=ref([1,2,3])
console.log(obj.value[0]) // 1

1.4 ref引用

ref除了可以定义数据，也可以用来获取dom或者一个组件的引用，实现步奏主要有以下几步

1. 给dom元素或者组件添加ref属性，值为一个字符串
2. 定义ref变量，变量名要和dom或组件中ref属性的值一致
3. 通过.value获取dom或组件实例

<template>
    <div ref="boxRef"></div>
    <Child ref="childRef"/>
<template/>

<script setup>
    import {ref,onMounted} from 'vue'
    const boxRef=ref(null)
    const childRef=ref(null)
    
    onMounted(()=>{
        console.log(boxRef.value)		// dom元素
        console.log(childRef.value)		// 
    })
</script>

TIP

需要在dom挂载完毕后才能获取到ref引用的值

2.reactive()

2.1 作用

返回一个对象的响应式代理。Vue3用来定义复杂数据类型，注意不可以定义基本数据类型

function reactive<T extends object>(target: T): UnwrapNestedRefs<T>

2.2 语法

使用reactive()定义对象如下所示

Js

import { reactive } from 'vue'

const obj=reactive({
    name:'坤坤'
})

const arr=reactive([1,2,3])

Ts

import { reactive } from 'vue'

interface Item{
    name:string
}
const obj=reactive<Item>({
    name:'坤坤'
})

const arr=reactive<Array<number>>([1,2,3])

2.3 使用

使用reactive()定义的数据不需要像ref()一样.value才能获取到值，reactive()定义的数据可以直接使用

const obj=reactive({
    name:'坤坤'
})
console.log(obj.name) // 坤坤

const arr=reactive([1,2,3])
console.log(arr[0]) // 1

3.readonly()

接受一个对象 (不论是响应式还是普通的) 或是一个ref，返回一个原值的只读代理。

类型

function readonly<T extends object>(
  target: T
): DeepReadonly<UnwrapNestedRefs<T>>

详细信息

只读代理是深层的：对任何嵌套属性的访问都将是只读的。它的 ref 解包行为与 reactive() 相同，但解包得到的值是只读的。

要避免深层级的转换行为，请使用 shallowReadonly()作替代。

示例

const original = reactive({ count: 0 })

const copy = readonly(original)

watchEffect(() => {
  // 用来做响应性追踪
  console.log(copy.count)
})

// 更改源属性会触发其依赖的侦听器
original.count++

// 更改该只读副本将会失败，并会得到一个警告
copy.count++ // warning!