包含Echarts的模块多处引用导致显示异常问题的解决方案业务场景：一个Echarts图表组件individual-monitoring-arc.vue，需要在一个大型项目上引用两次但只有首次引用的该组件显示正常，后面引用的组件不会显示Echarts图表，且会影响首次引用的组件显示两处Echarts图表数据传输没问题问题原因：多次引用在同一个大型项目中，会导致id为myChart的Echarts图

tailwind自适应原理，常用class，常见坑以及个人补充功能文章目录tailwind自适应原理，常用class，常见坑以及个人补充功能自适应：常用：圆角：input focus默认样式去除：阴影：字体大小：width:height:taildind坑：补充：首行缩进2字符单行文本溢出省略：多行文本溢出省略：绝对定位居中：自适应：通过添加md:flex实用程序，它会出现display: fle

vite + vue3 + ts

Vue性能优化方案——个人经验总结谨慎使用深度监听善于使用\props与emit验证减小项目体积provide和inject善用异步加载“慎用”Vuex功能重用仅传递必要的数据设计模块分类SSR/SSGv-for优化善用v-once列表虚拟化非反应性减少组件谨慎使用深度监听这在用于大型数据结构时性能消耗较大，仅在必要时使用。export default {watch: {someObject: {

目录Vue中数组的响应式原理解析实现思路拦截器将拦截器挂载到数组上收集依赖总结Vue中数组的响应式原理解析为何Vue中对象与数组的侦测方式不同？因为数组的一些方法如push、pop等不会触发getter/setter。为何这些方法不会触发getter/setter？因为这些方法是Array的原型上的方法，并没有在Array本身上面。如何做？使用拦截器覆盖Array.prototype上的方法，在执

js如何判断点击元素是否是某一父元素的子元素解决办法：parentNode.contains(childNode)举例：vue中，判断当前点击的元素是否为this.$refs.nabiation的子元素document.addEventListener('click', (event) => {console.log(this.$refs.naviation !== event.target

Vue监听vuex中对象属性变化的方法需求分析：store中有一个空对象monitorGetTargetList页面上有多个按钮，每个按钮都有一个id点击某个按钮之后，每隔一秒计算出一个数据，需要传到store的monitorGetTargetList中，并放到对应按钮的id中解决方法：普通的vuex监听不能监听到对象中的属性以及属性值的变化，所以需要借助Object.assign()来实现注：O

Vue3解决ref赋值为require(’’)时数据无法响应问题问题代码：const useIcon = () => {let iconSrc = ref('');let setupModelShow = ref(false);iconSrc = require('../assets/img/url.png');const handleServe = () => {iconSrc =

Property ‘$store’ does not exist on type 'CreateComponentPublicInstance的解决办法项目：vue3 + Typescriyt + Vuex问题原因：Vuex不提供开箱即用的this.$store属性类型。与TypeScript一起使用时，必须声明自己的模块扩充。解决办法：在src文件夹下新建文件夹vue.d.ts，内容为：// v

Vue3 + Typescript + Cesium项目换进搭建1 安装vue3脚手架npm i -g @vue/cli2 创建项目并启动vue create myappcd myappyarn myapp3 安装cesiumyarn add cesium4 去node_modules中找到cesium/Biuld/Cesium文件夹，复制到public中5 在index.html中引入本地ces