VUE3+VITE 常见问题解决

reactive解构最深的一层，失去响应性问题

pinia创建的store，使用结构失去响应性

reactive包裹后的对象重新赋值失去响应性

无法动态引入图片

在computed中传参数

vue3放弃了filter

reactive解构最深的一层，失去响应性问题

<script setup lang="ts">

let target = { a: { b: 1 } };

let target1 = { c: 1 };

const obj = reactive(target)

const obj1 = reactive(target1)

watch(obj, () => {

    console.log('obj', obj); // 有打印

})

watch(obj1, () => {

    console.log('obj1', obj); // 无打印

})

let { a } = obj

let { c } = obj1

a.b = 3

c = 3

</script>

看看解构后的数据

console.log(a); // Proxy(...)

console.log(c); // 3

由上可以看出，最深一层结构后是数值，所以没有响应性。

使用toRef改写

let { c } = obj1

let c = toRef(obj1, 'c')

c.value = 3

或是toRefs

let { c } = toRefs(obj1)

c.value = 3

：：：补充

reactive原理简易实现

function reactive(params) {

            return new Proxy(params, {

                get(target, p, receiver) {

                    if (typeof target[p] === 'object') {

                        reactive(target[p])

                    }

                    // track(target,p)

                    return Reflect.get(target, p, receiver)

                },

                set(target, p, newValue, receiver) {

                    // trigger(target,key)

                    return Reflect.set(target, p, newValue, receiver)

                }

            })

        }

reactive对对像属性做了深层代理。

解构原理大致是创建一个变量，从对象中匹配出与创建变量名相同的对象属性名，将这个属性的值（或是地址，对象的引用）复制给新的变量。

从reactive和解构原理可以看出，当reactive解构到最后一层，收集依赖的方法是

track(target,p)

，返回值是一个基本数据，此时都是正常的，问题是接下来，

基本数据的值复制给了一个新的变量，此时，响应被断开。

！！！！！！！！！！！！！！若有不对，请大佬指导！！！！！！！！！！！！！

pinia创建的store，使用结构失去响应性

如pinia文档介绍，store由reactive包裹，所以你可以直接访问state，getters，actions，但是也会因此，解构失去响应性。pinia给的解构保持响应性的方法，使用storeToRefs。

reactive包裹后的对象重新赋值失去响应性

Vue2中，实例会在初始化时对挂载到$data上的对象重写并赋值到 $data相同属性名上，当你直接给$data的属性重新赋值，监听器会认为是对 $data属性值的更改；

而Vue3 setup中，使用reactive工具函数对对象进行包裹（代理）实现监听并返回一个新对象，如果对这个新对象进行对象赋值，会直接替换掉上一步 reactive的包裹后的对象，所以失去了响应性，解决方法就是，reactive包裹的对象修改时，避免对象直接赋值的写法。

img标签无法动态引入图片

vite提供了静态资源处理方法：

function getImageUrl(name) {

  return new URL(`./dir/${name}.png`, import.meta.url).href

}

文档：

https://vitejs.cn/vite3-cn/guide/assets.html#importing-asset-as-url

在computed中传参数，动态依赖

利用 computed的依赖改变重新计算的特点，可以将一些复杂逻辑抽出来。在循环或是插槽中使用的时候，需要传入参数当作依赖，当这个参数（params）改变时会重新计算获取新的返回值。

let someAttr = computed(() => (params: any) => {

    return params //在这里添加逻辑

})

vue3放弃了filter

使用方法或是computed代替；

PPPPS：API中有个app.config.globalProperties可以全局挂载。