ref和reactive
一,前言1.ref和reactive是vue3基于组合式api模式下,在setup中用于声明的具有响应式的数据的方法。二,ref1.ref用于声明基础类型响应式数据。import {ref} from 'vue'const age =ref(10) //声明响应式数据2.ref返回的是被包装过的响应式对象,在setup中访问和修改ref需要使用.value属性age.value=213.在模板中使
一,前言
1.ref
和reactive
是vue3
基于组合式api
模式下,在setup
中用于声明的具有响应式的数据的方法。
二,ref
1.ref
通常用于声明基础类型响应式数据。
import { ref } from 'vue'
const age =ref(10) //声明响应式数据
2.ref
返回的是被包装过的响应式对象,在setup
中访问和修改ref
需要使用.value
属性
age.value=21
3.在模板中使用ref
时vue3
会自动将ref
对象拆解为原始值(setup
里ref
对象的value
属性值),一定要知道模板上的ref
不在是对象,没有.value
属
<div>{{age}}</div>
4.上面的自动解包只在顶级属性中生效,当我们使用了hook
的设计时,返回的ref
不会自动解包
const object = { foo: ref(1) } //foo不是顶级元素,在template中使用object.foo 不会自动解包
三,reactive
1.reactive
用于声明复杂类型响应式数据。
import {reactive} from 'vue'
const man=ref({name:'jolin',age:21}) //声明响应式数据
2.reactive
返回的是被包装过的响应式对象,在setup
中访问和修改直接使用属性即可
man.age=20
3.声明时未定义,动态添加的属性也会是响应式的
man.weight = '50kg' //weight具有响应性
4.在模板中使用属性的形式
<div>{{man.name}}</div>
四,注意事项
1.注意不能解构reactive
数据,解构出的数据会失去响应式。
2.在任何地方访问响应式数据都能拿到最新的。
3.同vue2
的data
,只有数据被应用到模板中时,数据的改变才会触发updated
生命周期,否则即使数据被修改了,也不会触发updated
生命周期,导致视图不更新。
五,使用typescript
为ref
和reactive
标注类型
1.如果不使用typescript
可忽略
2.可以使用泛型参数为ref
标注类型,注意指定了一个泛型参数但没有给出初始值,那么最后得到的就将是一个包含 undefined
的联合类型
const ins = ref<number>(1)
const ins1 = ref<string>() // ins 是 string | undefined
3.使用接口为reactive
标注类型
interface Table{
total:number,
data:any[] | []
}
const table:Table = reactive({
total:100,
data:[{...}...]
})
六,标注一个ref
和reactive
类型
1.除了为ref
和reactive
里的数据标注类型之外,本身ref
和reactive
在vue3
中也是一种类型,
2.标注一个ref
类型
import type { Ref } from 'vue'
const a=ref<number>(1)
const b:Ref<number> = a
3.标注一个reactive
类型
import { reactive} from 'vue'
const a=reactive({})
const b:ReturnType<typeof reactive<Record<string,any>>> = a
更多推荐
所有评论(0)