响应式基础 - reative()、ref() - vue 基础
响应式基础
reactive()
我们可以使用reactive()
函数创建一个响应式对象或数组:
import { reactive } from 'vue' const state = reactive({ count: 0 })
响应式对象,其实是JavaScript Proxy
,其行为表现与一般对象相似。不同之处:Vue 能够跟踪响应式对象属性的访问与更改操作。
要在组件模板中使用响应式状态,请在setup()
函数中定义并返回。
import { reactive } from 'vue' export default { // `setup` 是一个专门用于组合式 API 的特殊钩子 setup() { const state = reactive({ count: 0 }) // 暴露 state 到模板 return { state } } }
template{{ state.count }}
我们也可以,在同一个作用域下,定义一个更新state的函数,并作为一个方法与state一起暴露出去:
import { reactive } from 'vue' export default { setup() { const state = reactive({ count: 0 }) function increment() { state.count++ } // 不要忘了同时暴露 increment 函数 return { state, increment } } }
暴露的方法,通常会被用作事件监听器:
{{ state.count }}
{{ state.count }}
请注意,仅当ref是模板渲染上下文的顶层属性时才适用自动“解包”,访问深层级的ref则不会解包: foo是顶层属性,但object.foo不是。上面的表达式,不会像预期的那样工作。 渲染的结果会是一个 需要注意的是,如果一个ref是文本插值(即一个 这只是文本插值的一个方便功能,相当于 当一个ref作为一个响应式对象的 property 被访问或更改时,它会自动解包,因此会表现得和一般的 property 一样: 如果将一个新的ref赋值给响应式对象某个已经为ref的属性,那么它会替换掉旧的ref: 只有当嵌套在一个深层响应式对象内时,才会发生ref解包。当起作为浅层响应式对象的属性被访问时不会解包。 跟响应式对象不同,当 ref 作为响应式数组或像 Map 这种原生集合类型的元素被访问时,不会进行解包。 不得不对ref使用.value是一个受限于 JavaScript 语言限制的缺点。不过在编译期间,自动在合适的位置上添加上.value可以改进开发体验。Vue 提供了一个语法糖,可以在编译时作相应转换,使得我们可以像这样书写上面的计数器示例: 请注意它仍处于实验性阶段,在最终提案落地前仍可能发生改动。 {{ count }}
js
const object = { foo: ref(1) }
template
{{ object.foo + 1 }}
[object Object]
,因为object.foo
是一个ref对象。我们可以通过让foo成为顶层 property 来解决这个问题:js
const object = { foo: ref(1) }
const { foo } = object
template
{{ foo + 1 }}
{{}}
符号)计算的最终值,它也将被解包。因此下面的渲染结果将为1
:{{ object.foo }}
{{object.foo.value}}
。ref 在响应式对象中的解包
const count = ref(0)
const state = reactive({
count
})
console.log(state.count) // 0
state.count = 1
console.log(count.value) // 1
const otherCount = ref(2)
state.count = otherCount
console.log(state.count) // 2
// 原来的 ref 现在已经和 state.count 脱去联系
console.log(count.value) // 1
数组和集合类型的 ref 解包
const books = reactive([ref('Vue 3 Guide')])
// 这里需要 .value
console.log(books[0].value)
const map = reactive(new Map([['count', ref(0)]]))
// 这里需要 .value
console.log(map.get('count').value)
响应性语法糖
{{ count }}
鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com
图片声明:本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!