文章目录
- 1. reactive
- 1.1. `reactive`函数创建一个响应式对象
- 1.2. 修改`reactive`创建的响应式对象的属性
- 2. readOnly
- 2.1. 使用 `readonly` 函数创建一个只读的响应式对象
- 2.2. 如何修改嵌套在只读响应式对象中的对象?
- 3. shallowReactive
- 3.1. 使用 `shallowReactive` 函数创建一个浅层响应式对象
- 3.2. 如何修改嵌套在浅层响应式对象中的对象?
1. reactive
- 实现
引用类型
数据的响应式,如数组、对象
等 - 上一章说到的
ref
去创建引用类型的响应式,其实内部也是调用了reactive
reactive
创建的响应式对象,调用时不用.value
在Vue3中,
reactive
函数是用于创建响应式对象的函数。它接收一个普通对象作为参数,返回一个代理对象。这个代理对象可以拦截对象的get
和se
t操作,并在其中实现响应式的逻辑。当我们读取代理对象的属性时,会触发依赖收集;当我们修改代理对象的属性时,会触发相应的依赖更新。在调用reactive
函数时,Vue3会使用Proxy
对象对传入的对象进行代理,从而实现响应式的特性。
1.1. reactive
函数创建一个响应式对象
import { reactive } from 'vue'const state = reactive({count: 0,name: 'Tom'
})console.log(state.count) // 输出 0state.count++console.log(state.count) // 输出 1
在这个例子中,我们使用
reactive
函数创建了一个响应式对象state
,它包含两个属性count
和name
。我们可以直接读取和修改state
的属性,不需要使用.value
。当我们读取或修改state
的属性时,会触发相应的依赖更新。
1.2. 修改reactive
创建的响应式对象的属性
import { reactive } from 'vue'const state = reactive({user: {name: 'Tom',age: 18}
})console.log(state.user.name) // 输出 Tomstate.user.name = 'Jerry'console.log(state.user.name) // 输出 Jerry
在这个例子中,我们修改了
state
对象中嵌套的user
对象的name
属性。这个修改会触发相应的依赖更新,从而实现了响应式的特性。
2. readOnly
在 Vue 3 中,可以使用 readonly
函数创建一个只读的响应式对象。它接收一个普通对象作为参数,返回一个只读的代理对象。这个代理对象只能读取属性的值,不能修改属性的值。当我们读取代理对象的属性时,会触发依赖收集;当我们尝试修改代理对象的属性时,会输出警告信息,不会触发相应的依赖更新。在调用 readonly
函数时,Vue 3 会使用 Proxy
对象对传入的对象进行代理,从而实现只读的响应式特性。
2.1. 使用 readonly
函数创建一个只读的响应式对象
import { readonly, reactive } from 'vue'const 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 'vue'const 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 'vue'const state = shallowReactive({user: {name: 'Tom',age: 18}
})console.log(state.user.name) // 输出 Tomstate.user.name = 'Jerry'console.log(state.user.name) // 输出 Jerrystate.user = {name: 'Lucy',age: 20
}console.log(state.user.name) // 输出 Lucystate.user.name = 'Lily'console.log(state.user.name) // 输出 Lily
在这个例子中,我们使用
shallowReactive
函数创建了一个浅层响应式对象state
,包含一个属性user
,它是一个普通对象。当我们修改state
的user
属性时,会触发相应的依赖更新;当我们修改user
对象的属性时,不会触发相应的依赖更新。
3.2. 如何修改嵌套在浅层响应式对象中的对象?
- 可以直接修改,但是只更新值,不更新视图
import { shallowReactive } from 'vue'const state = shallowReactive({user: {profile: {name: 'Tom',age: 18}}
})console.log(state.user.profile.name) // 输出 Tomstate.user.profile.name = 'Jerry'console.log(state.user.profile.name) // 输出 Jerry
在这个例子中,我们尝试修改浅层响应式对象
state
中嵌套的user
对象的profile
属性中的name
属性。这个修改不会触发相应的依赖更新,从而实现了浅层响应式的特性。
总结:这篇文章介绍了Vue3中用于创建响应式对象的三个函数:
reactive
、readonly
和shallowReactive
。reactive
函数用于创建深层响应式对象,readonly
函数用于创建深层只读响应式对象,shallowReactive
函数用于创建浅层响应式对象。这些函数可以帮助我们快速创建响应式数据,实现数据的自动更新。