律师网站建设品牌,wordpress禁止新建,沈阳网势科技有限公司怎么样,深圳专业网站设计制作文章目录 前言声明响应式状态创建独立的响应式值作为 refsRef 展开访问响应式对象响应式状态解构使用 readonly 防止更改响应式对象后言 前言 hello world欢迎来到前端的新世界 #x1f61c;当前文章系列专栏#xff1a;vue.js #x1f431;#x1f453;博主在前端领域还… 文章目录 前言声明响应式状态创建独立的响应式值作为 refsRef 展开访问响应式对象响应式状态解构使用 readonly 防止更改响应式对象后言 前言 hello world欢迎来到前端的新世界 当前文章系列专栏vue.js 博主在前端领域还有很多知识和技术需要掌握正在不断努力填补技术短板。(如果出现错误感谢大家指出) 感谢大家支持您的观看就是作者创作的动力 声明响应式状态
要为 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的渲染函数。
创建独立的响应式值作为 refs
想象一下我们有一个独立的原始值 (例如一个字符串)我们想让它变成响应式的。当然我们可以创建一个拥有相同字符串property的对象并将其传递给 reactive。Vue 为我们提供了一个可以做相同事情的方法 ——ref
import { ref } from vueconst count ref(0)ref 会返回一个可变的响应式对象该对象作为它的内部值——一个响应式的引用这就是名称的来源。此对象只包含一个名为value的 property
import { ref } from vueconst count ref(0)
console.log(count.value) // 0count.value
console.log(count.value) // 1Ref 展开
当 ref 作为渲染上下文 (从 setup() 中返回的对象) 上的 property 返回并可以在模板中被访问时它将自动展开为内部值。不需要在模板中追加 .value
templatedivspan{{ count }}/spanbutton clickcount Increment count/button/div
/templatescriptimport { ref } from vueexport default {setup() {const count ref(0)return {count}}}
/script访问响应式对象
当 ref 作为响应式对象的 property 被访问或更改时为使其行为类似于普通 property它会自动展开内部值
const count ref(0)
const state reactive({count
})console.log(state.count) // 0state.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) // 1Ref 展开仅发生在被响应式 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 vueconst 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 vueconst 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使用 readonly 防止更改响应式对象
有时我们想跟踪响应式对象 (ref 或 reactive) 的变化但我们也希望防止在应用程序的某个位置更改它。例如当我们有一个被 provide 的响应式对象时我们不想让它在注入的时候被改变。为此我们可以基于原始对象创建一个只读的Proxy对象
import { reactive, readonly } from vueconst original reactive({ count: 0 })const copy readonly(original)// 在copy上转换original 会触发侦听器依赖original.count// 转换copy 将导失败并导致警告
copy.count // 警告: Set operation on key count failed: target is readonly.后言 创作不易要是本文章对广大读者有那么一点点帮助 不妨三连支持一下您的鼓励就是博主创作的动力
