Vue3.0响应式原理是一种框架,它可以让开发者在不改变代码的情况下,自动监测数据的变化,并且能够自动更新UI。它是基于Object.defineProperty()方法来实现的,这个方法允许开发者在对象上定义新属性或修改现有属性,并且能够监测到数据的变化。
Vue3.0响应式原理的核心是通过Object.defineProperty()方法来实现对数据的监测。当我们在Vue中声明一个data对象时,Vue会使用Object.defineProperty()方法来遍历data对象中的所有属性,并将其添加到Vue实例中。当我们修改data对象中的属性时,Object.defineProperty()会监测到这些变化,并将其更新到Vue实例中。
此外,Vue3.0还使用了Proxy API来实现响应式原理。Proxy API允许开发者在不修改代码的情况下直接监测数据的变化。当我们声明一个data对象时,Vue会使用Proxy API将data对象封装成一个代理对象。当我们修改data对象中的属性时,Proxy API会直接监测到这些变化,并将其更新到Vue实例中。
因此,通过Object.defineProperty()方法和Proxy API来实现Vue3.0响应式原理是非常有效的。不仅能够减少代码量,而且能够有效地减少额外工作量。同时也能够带来很好的用户体验,因为用户界面会随着数据变化而即时更新。
要为 JavaScript 对象创建响应式状态,可以使用 reactive
方法:
import { reactive } from "vue"
// 响应式状态
const state = reactive({
count: 0
})
reactive
相当于 Vue 2.x 中的 Vue.observable()
API ,为避免与 RxJS 中的 observables 混淆因此对其重命名。该 API 返回一个响应式的对象状态。该响应式转换是“深度转换”——它会影响嵌套对象传递的所有 property。
Vue 中响应式状态的基本用例是我们可以在渲染期间使用它。因为依赖跟踪的关系,当响应式状态改变时视图会自动更新。
这就是 Vue 响应性系统的本质。当从组件中的 data()
返回一个对象时,它在内部交由 reactive()
使其成为响应式对象。模板会被编译成能够使用这些响应式 property 的渲染函数。
在响应性基础 API 章节你可以学习更多关于 reactive
的内容。
refs
想象一下,我们有一个独立的原始值 (例如,一个字符串),我们想让它变成响应式的。当然,我们可以创建一个拥有相同字符串 property 的对象,并将其传递给 reactive
。Vue 为我们提供了一个可以做相同事情的方法 ——ref
:
import { ref } from "vue"
const count = ref(0)
ref
会返回一个可变的响应式对象,该对象作为它的内部值——一个响应式的引用,这就是名称的来源。此对象只包含一个名为 value
的 property :
import { ref } from "vue"
const count = ref(0)
console.log(count.value) // 0
count.value++
console.log(count.value) // 1
当 ref 作为渲染上下文 (从 setup() 中返回的对象) 上的 property 返回并可以在模板中被访问时,它将自动展开为内部值。不需要在模板中追加 .value
:
<template>
<div>
<span>{{ count }}</span>
<button @click="count ++">Increment count</button>
</div>
</template>
<script>
import { ref } from "vue"
export default {
setup() {
const count = ref(0)
return {
count
}
}
}
</script>
当 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 的 property,将会替换旧的 ref:
const otherCount = ref(2)
state.count = otherCount
console.log(state.count) // 2
console.log(count.value) // 1
Ref 展开仅发生在被响应式 Object
嵌套的时候。当从 Array
或原生集合类型如 Map
访问 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)
当我们想使用大型响应式对象的一些 property 时,可能很想使用 ES6 解构来获取我们想要的 property:
import { reactive } from "vue"
const book = reactive({
author: "Vue Team",
year: "2020",
title: "Vue 3 Guide",
description: "You are reading this book right now ;)",
price: "free"
})
let { author, title } = book
遗憾的是,使用解构的两个 property 的响应性都会丢失。对于这种情况,我们需要将我们的响应式对象转换为一组 ref。这些 ref 将保留与源对象的响应式关联:
import { reactive, toRefs } from "vue"
const book = reactive({
author: "Vue Team",
year: "2020",
title: "Vue 3 Guide",
description: "You are reading this book right now ;)",
price: "free"
})
let { author, title } = toRefs(book)
title.value = "Vue 3 Detailed Guide" // 我们需要使用 .value 作为标题,现在是 ref
console.log(book.title) // "Vue 3 Detailed Guide"
你可以在 Refs API 部分中了解更多有关 refs
的信息
readonly
防止更改响应式对象
有时我们想跟踪响应式对象 (ref
或 reactive
) 的变化,但我们也希望防止在应用程序的某个位置更改它。例如,当我们有一个被 provide 的响应式对象时,我们不想让它在注入的时候被改变。为此,我们可以基于原始对象创建一个只读的 Proxy 对象:
import { reactive, readonly } from "vue"
const original = reactive({ count: 0 })
const copy = readonly(original)
// 在copy上转换original 会触发侦听器依赖
original.count++
// 转换copy 将导失败并导致警告
copy.count++ // 警告: "Set operation on key "count" failed: target is readonly."
#介绍虽然 Vue.js 本身并不支持移动应用开发,但是有很多解决方案可以用 Vue.js 创建原生 iOS 和 Android 应用。#混合应用开发#C...
#概览非兼容:data 组件选项声明不再接收纯 JavaScript object,而需要 function 声明。当合并来自 mixin 或 extend 的多个 data...
#概览就变化而言,属于高等级内容:在 3.x 中,函数式组件 2.x 的性能提升可以忽略不计,因此我们建议只使用有状态的组件函数式...
#name类型:string详细:允许组件模板递归地调用自身。注意,组件在全局用 Vue.createApp({}).component({}) 注册时,全局 ID 自...
提示已经了解 Vue 2,只想了解 Vue 3 的新功能可以参阅迁移指南!#Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建...