响应式基础

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 }}

{{ count }}

请注意，仅当ref是模板渲染上下文的顶层属性时才适用自动“解包”，访问深层级的ref则不会解包：

js
const object = { foo: ref(1) }

template
{{ object.foo + 1 }} 

foo是顶层属性，但object.foo不是。上面的表达式，不会像预期的那样工作。

渲染的结果会是一个[object Object]，因为object.foo是一个ref对象。我们可以通过让foo成为顶层 property 来解决这个问题：

js
const object = { foo: ref(1) }
const { foo } = object

template
{{ foo + 1 }} 

需要注意的是，如果一个ref是文本插值（即一个{{}}符号）计算的最终值，它也将被解包。因此下面的渲染结果将为1：

{{ object.foo }}

这只是文本插值的一个方便功能，相当于{{object.foo.value}}。

ref 在响应式对象中的解包

当一个ref作为一个响应式对象的 property 被访问或更改时，它会自动解包，因此会表现得和一般的 property 一样：

const count = ref(0)
const state = reactive({
  count
})

console.log(state.count)   // 0

state.count = 1
console.log(count.value)   // 1

如果将一个新的ref赋值给响应式对象某个已经为ref的属性，那么它会替换掉旧的ref：

const otherCount = ref(2)

state.count = otherCount
console.log(state.count)   // 2

// 原来的 ref 现在已经和 state.count 脱去联系
console.log(count.value)   // 1

只有当嵌套在一个深层响应式对象内时，才会发生ref解包。当起作为浅层响应式对象的属性被访问时不会解包。

数组和集合类型的 ref 解包

跟响应式对象不同，当 ref 作为响应式数组或像 Map 这种原生集合类型的元素被访问时，不会进行解包。

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)

响应性语法糖

不得不对ref使用.value是一个受限于 JavaScript 语言限制的缺点。不过在编译期间，自动在合适的位置上添加上.value可以改进开发体验。Vue 提供了一个语法糖，可以在编译时作相应转换，使得我们可以像这样书写上面的计数器示例：

 {{ count }} 

请注意它仍处于实验性阶段，在最终提案落地前仍可能发生改动。

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com