- reactive 对象直接替换丢失响应式
如果想替换,使用 object.assign- const obj = reactive ({ a:2 })
- obj = {c: 1} ❌
- object.assign(obj, {c: 1}) ✅
复制代码
- reactive 解构失效
传统解构 会失效,需要使用 toRefs
- const obj = reactive ({ a : 1 })
- const { a } = obj // ❌ a 不再是响应式,而是一个新的地址保存了一个a的值
- const { a } = toRefs(obj) // ✅
- 这个a 就是响应式的,且和reactive 里的 a 是同一个内存地址
复制代码 toRef 是解构响应式对象的 单个数据
- const obj = reactive ({ a : 1, b : 2 })
- const b = toRef(obj, 'b')
复制代码 toRef 从响应式数据解构单个
toRefs 从响应式数据解构所有
- reactive 中的 ref 会自动拆包
- const obj = reactive({
- a: 1,
- b: ref(2)
- })
- obj.a = 1
- obj.b.value ❌ 报错
- obj.b = 2 ✅ 不需要 .value ,会自动拆包
复制代码
- computed 盘算属性修改
默认是只读的
但通过 get 和 set ,可对盘算属性的依赖源,间接修改
- const firstName = ref('John')
- const lastName = ref('Doe')
- // 定义可写的计算属性
- const fullName = computed({
- get() {
- return `${firstName.value} ${lastName.value}`
- },
- set(newValue) {
- const [first, last] = newValue.split(' ')
- firstName.value = first // 对上方源数据修改
- lastName.value = last || '' // 对上方源数据修改
- }
- })
复制代码
- 监督ref 的基本范例 数据。
- const a = ref(0)
- const stopWatch = watch(a, () => {}) // 不需要 a.value
- stopWatch() // 停止监视
复制代码 - 监督 ref 的对象范例 数据。
默认 监督的是整个对象的地址,而不是内里的数据
- const obj = ref({
- a: 1,
- b: 2
- })
- watch(obj, () => {}) // 修改obj.a = 10, 回调不会执行、
- watch(obj, () => {}, {deep: true} ) // 修改obj.a = 10, 回调会执行
复制代码 - 监督 reactive 对象 ,默认开启深度监听
- 监督 reactive 对象的某个属性
- const obj = reactive({
- a: 1,
- b: 2,
- c: {
- ca: 'xx',
- cb: 'xxx'
- }
- })
- 1. 监视的属性为 基本类型
- watch(obj.a, () => {}) // ❌ 报错,vue不支持这个写法
- watch(() => obj.a, () => {}) // ✅ vue规定要放在一个函数里返回
- 2. 监视的属性为 对象类型
- watch(obj.c, () => {}) // ✅ 可以,但不推荐
- watch(() => obj.c, () => {}) // ✅ vue官方推荐写法
复制代码 - 监督 多个数据
- watch([ ()=obj.a, ()=>obj.b ], () => {} )
复制代码
理解为watch 的自动化, 不需要手动指定监督源,用到的自动监督, 实行回调
js watchEffect(() =>{ if(obj.a > 10) { fetch() } })
一种 将路由参数(如 params 或 query)解耦,直接作为组件的 props 通报的机制。
这种设计可以让组件不依赖 $route 对象
- 布尔模式
将路由的 params 自动映射为组件的 props(仅实用于 params)。- // 路由配置
- {
- path: '/user/:id/:age',
- component: User,
- props: true // 自动将 `:id` 映射为组件的props 的 `id`
- }
- // 组件
- defineProps([id, age])
复制代码 - 函数模式
动态生成 props,可组合 params、query 或路由上下文- // 路由配置
- {
- path: '/search',
- component: Search,
- props: (route) => ({
- keyword: route.query.q, // 从 query 中获取 q
- page: parseInt(route.query.page) || 1 // 转换数据类型
- })
- }
- // 组件
- defineProps([keyword, page])
复制代码
|