网站项目计划书模板范文,网站如何留住客户,中国十大门户网站,wordpress 内容字段文章目录1. reactive1.1. reactive函数创建一个响应式对象1.2. 修改reactive创建的响应式对象的属性2. readOnly2.1. 使用 readonly 函数创建一个只读的响应式对象2.2. 如何修改嵌套在只读响应式对象中的对象?3. shallowReactive3.1. 使用 shallowReactive 函数创建一个浅层响…
文章目录1. reactive1.1. reactive函数创建一个响应式对象1.2. 修改reactive创建的响应式对象的属性2. readOnly2.1. 使用 readonly 函数创建一个只读的响应式对象2.2. 如何修改嵌套在只读响应式对象中的对象?3. shallowReactive3.1. 使用 shallowReactive 函数创建一个浅层响应式对象3.2. 如何修改嵌套在浅层响应式对象中的对象?1. reactive
实现引用类型数据的响应式如数组、对象等上一章说到的ref去创建引用类型的响应式其实内部也是调用了reactivereactive创建的响应式对象调用时不用.value 在Vue3中reactive函数是用于创建响应式对象的函数。它接收一个普通对象作为参数返回一个代理对象。这个代理对象可以拦截对象的get和set操作并在其中实现响应式的逻辑。当我们读取代理对象的属性时会触发依赖收集当我们修改代理对象的属性时会触发相应的依赖更新。在调用reactive函数时Vue3会使用Proxy对象对传入的对象进行代理从而实现响应式的特性。 1.1. reactive函数创建一个响应式对象
import { reactive } from vueconst state reactive({count: 0,name: Tom
})console.log(state.count) // 输出 0state.countconsole.log(state.count) // 输出 1 在这个例子中我们使用reactive函数创建了一个响应式对象state它包含两个属性count和name。我们可以直接读取和修改state的属性不需要使用.value。当我们读取或修改state的属性时会触发相应的依赖更新。 1.2. 修改reactive创建的响应式对象的属性
import { reactive } from vueconst state reactive({user: {name: Tom,age: 18}
})console.log(state.user.name) // 输出 Tomstate.user.name Jerryconsole.log(state.user.name) // 输出 Jerry 在这个例子中我们修改了state对象中嵌套的user对象的name属性。这个修改会触发相应的依赖更新从而实现了响应式的特性。 2. readOnly
在 Vue 3 中可以使用 readonly 函数创建一个只读的响应式对象。它接收一个普通对象作为参数返回一个只读的代理对象。这个代理对象只能读取属性的值不能修改属性的值。当我们读取代理对象的属性时会触发依赖收集当我们尝试修改代理对象的属性时会输出警告信息不会触发相应的依赖更新。在调用 readonly 函数时Vue 3 会使用 Proxy 对象对传入的对象进行代理从而实现只读的响应式特性。
2.1. 使用 readonly 函数创建一个只读的响应式对象
import { readonly, reactive } from vueconst state readonly(reactive({count: 0,name: Tom
}))console.log(state.count) // 输出 0state.count // 输出警告信息不会触发依赖更新console.log(state.count) // 输出 0
注意使用 readonly 函数创建的只读响应式对象是深层只读的。也就是说当我们尝试修改嵌套在只读响应式对象中的对象时会输出警告信息不会触发相应的依赖更新。
2.2. 如何修改嵌套在只读响应式对象中的对象?
使用readOnly函数创建的只读对象内部的属性无法修改
import { readonly, reactive } from vueconst state readonly(reactive({user: {name: Tom,age: 18}
}))console.log(state.user.name) // 输出 Tomstate.user.name Jerry // 输出警告信息不会触发依赖更新console.log(state.user.name) // 输出 Tom 在这个例子中我们尝试修改只读响应式对象 state 中嵌套的 user 对象的 name 属性。这个修改会输出警告信息不会触发相应的依赖更新从而实现了只读响应式的特性。在实际开发中readonly 函数是非常有用的一个函数可以帮助我们创建只读的响应式数据。 3. shallowReactive
创建浅层的响应式对象修改内部属性时只改变值不更新视图 在 Vue 3 中可以使用 shallowReactive 函数创建一个浅层响应式对象。它接收一个普通对象作为参数返回一个浅层响应式代理对象。这个代理对象只能处理对象的一级属性不能处理嵌套在对象中的属性的响应式更新。当我们读取代理对象的属性时会触发依赖收集当我们修改代理对象的属性时会触发相应的依赖更新。在调用 shallowReactive 函数时Vue 3 会使用 Proxy 对象对传入的对象进行代理从而实现浅层响应式特性。 3.1. 使用 shallowReactive 函数创建一个浅层响应式对象
import { shallowReactive } from vueconst state shallowReactive({user: {name: Tom,age: 18}
})console.log(state.user.name) // 输出 Tomstate.user.name Jerryconsole.log(state.user.name) // 输出 Jerrystate.user {name: Lucy,age: 20
}console.log(state.user.name) // 输出 Lucystate.user.name Lilyconsole.log(state.user.name) // 输出 Lily 在这个例子中我们使用 shallowReactive 函数创建了一个浅层响应式对象 state包含一个属性 user它是一个普通对象。当我们修改 state 的 user 属性时会触发相应的依赖更新当我们修改 user 对象的属性时不会触发相应的依赖更新。 3.2. 如何修改嵌套在浅层响应式对象中的对象?
可以直接修改但是只更新值不更新视图
import { shallowReactive } from vueconst state shallowReactive({user: {profile: {name: Tom,age: 18}}
})console.log(state.user.profile.name) // 输出 Tomstate.user.profile.name Jerryconsole.log(state.user.profile.name) // 输出 Jerry 在这个例子中我们尝试修改浅层响应式对象 state 中嵌套的 user 对象的 profile 属性中的 name 属性。这个修改不会触发相应的依赖更新从而实现了浅层响应式的特性。 总结这篇文章介绍了Vue3中用于创建响应式对象的三个函数reactive、readonly和shallowReactive。reactive函数用于创建深层响应式对象readonly函数用于创建深层只读响应式对象shallowReactive函数用于创建浅层响应式对象。这些函数可以帮助我们快速创建响应式数据实现数据的自动更新。
