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,使用结构失去响应性
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可以全局挂载。
最新文章
- 「译」JUnit 5 系列:环境搭建
- Xamarin的不归路-ios模拟器调整窗口大小
- POJ2677 Tour[DP 状态规定]
- undefined reference to `_imp___ZN8QWebViewC1EP7QWidget&#39;
- canvas圆形进度条
- QQ网站如何检测对本地已经登录的qq用户
- [补] winpcap编程——EAP协议与EAPSOCKET实现
- JavaScript中的不同逻辑算法结合操作解决实际多重问题以及常用函数类型
- day04 流程控制
- 【漫画】程序员永远修不好的Bug——情人节
- spring 5.1.2 mvc RequestMappingHandlerMapping 源码初始化过程
- 改造kindeditor支持asp.net core mvc上传文件
- oracle 汉字转拼音
- go语言中goroute使用:=遇到的坑
- 【ASP.NET】 MVC下拉框联动
- Python学习笔记之——requests库
- Djang1.8+Python2.0迁移到Django2.0+Python3.6注意事项(转)
- SpringBoot与SpringCloud学习指南
- Python: 序列list:保持元素顺序同时消除重复值
- Spring Boot 2 实践记录之 MySQL + MyBatis 配置