Vue学习记录03

标签：count 03 Vue const 记录对象 value reactive ref

响应式基础

声明响应式状态

ref()

在组合式API中，推荐使用ref()函数来声明响应式状态：

import { ref } from 'vue'

const count = ref(0)

ref()接收参数，并将其包裹在一个带有.value属性的ref对象中返回：

const count = ref(0)

console.log(count) // { value: 0 }
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

要在组件模板中访问 ref，请从组件的setup()函数中声明并返回它们：

import { ref } from 'vue'

export default {
  // `setup` 是一个特殊的钩子，专门用于组合式 API。
  setup() {
    const count = ref(0)

    // 将 ref 暴露给模板
    return {
      count
    }
  }
}

(注意，在模板中使用 ref 时，我们不需要附加.value为了方便起见，当在模板中使用时，ref 会自动解包。)

你也可以直接在事件监听器中改变一个 ref：

<button @click="count++">
  {{ count }}
</button>

对于更复杂的逻辑，我们可以在同一作用域内声明更改 ref 的函数，并将它们作为方法与状态一起公开：

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    function increment() {
      // 在 JavaScript 中需要 .value
      count.value++
    }

    // 不要忘记同时暴露 increment 函数
    return {
      count,
      increment
    }
  }
}

然后，暴露的方法可以被用作事件监听器：

<button @click="increment">
  {{ count }}
</button>

以上例子没有使用任何构建工具。

`<script setup>`

在setup()函数中手动暴露大量的状态和方法非常繁琐。幸运的是，我们可以通过使用单文件组件（SFC)来避免这种情况。我们可以使用<script setup>来大幅度地简化代码：

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">
    {{ count }}
  </button>
</template>

深层响应式

Ref 可以持有任何类型的值，包括深层嵌套的对象、数组或者 JavaScript 内置的数据结构，比如Map。

Ref 会使它的值具有深层响应性。这意味着即使改变嵌套对象或数组时，变化也会被检测到：

import { ref } from 'vue'

const obj = ref({
  nested: { count: 0 },
  arr: ['foo', 'bar']
})

function mutateDeeply() {
  // 以下都会按照期望工作
  obj.value.nested.count++
  obj.value.arr.push('baz')
}

Dom更新时机

当你修改了响应式状态时，DOM 会被自动更新。但是需要注意的是，DOM 更新不是同步的。Vue 会在“next tick”更新周期中缓冲所有状态的修改，以确保不管你进行了多少次状态修改，每个组件都只会被更新一次。

要等待 DOM 更新完成后再执行额外的代码，可以使用nextTick() 全局 API：

import { nextTick } from 'vue'

async function increment() {
  count.value++
  await nextTick()
  // 现在 DOM 已经更新了
}

reactive()

还有另一种声明响应式状态的方式，即使用reactive()API。与将内部值包装在特殊对象中的 ref 不同,reactive() 将使对象本身具有响应性：

import { reactive } from 'vue'

const state = reactive({ count: 0 })

<button @click="state.count++">
  {{ state.count }}
</button>

响应式对象是JavaScript,其行为就和普通对象一样。不同的是，Vue 能够拦截对响应式对象所有属性的访问和修改，以便进行依赖追踪和触发更新。

reactive()将深层地转换对象：当访问嵌套对象时，它们也会被reactive()包装。当 ref 的值是一个对象时,ref()也会在内部调用它。

值得注意的是，reactive() 返回的是一个原始对象的Proxy，它和原始对象是不相等的：

const raw = {}
const proxy = reactive(raw)

// 代理对象和原始对象不是全等的
console.log(proxy === raw) // false

只有代理对象是响应式的，更改原始对象不会触发更新。因此，使用 Vue 的响应式系统的最佳实践是仅使用你声明对象的代理版本。

为保证访问代理的一致性，对同一个原始对象调用reactive()会总是返回同样的代理对象，而对一个已存在的代理对象调用reactive()会返回其本身：

// 在同一个对象上调用 reactive() 会返回相同的代理
console.log(reactive(raw) === proxy) // true

// 在一个代理上调用 reactive() 会返回它自己
console.log(reactive(proxy) === proxy) // true

reactive()的局限性

reactive()API有一些局限性：

1.有限的值类型：它只能用于对象类型（对象、数组和如Map、Set这样的集合类型）。他不能持有如string、number、或boolean这样的原始类型。

2.不能替换整个对象：由于 Vue 的响应式跟踪是通过属性访问实现的，因此我们必须始终保持对响应式对象的相同引用。这意味着我们不能轻易地“替换”响应式对象，因为这样的话与第一个引用的响应性连接将丢失。

3.对结构操作不友好：当我们将响应式对象的原始类型属性解构为本地变量时，或者将该属性传递给函数时，我们将丢失响应性连接。

由于这些限制，建议使用ref()作为声明响应式状态的主要 API。

在模板中解包的注意事项

在模板渲染上下文中，只有顶级的 ref 属性才会被解包。

在下面的例子中，const和object是顶级属性，但object.id不是：

const count = ref(0)
const object = { id: ref(1) }

因此，会出现object.id + 1不按照预期工作。

渲染的结果是[object Object]1，因为在计算表达式时object.id没有被解包，仍然是一个ref对象。为了解决这个问题，可以将id解构为一个顶级属性：

const { id } = object

{{ id + 1 }}

另一个需要注意的点是，如果 ref 是文本插值的最终计算值（即{{ }}标签),那么它将被解包，因此一下内容将被渲染为1:

{{ object.id }}

该特性仅仅是文本插值的一个便利特性，等价于{{ object.id.value }}。

标签：count,03,Vue,const,记录,对象,value,reactive,ref
From： https://blog.csdn.net/cwtlw/article/details/143757313