Vue
.
留奇
52lkk.eth
52lkk.arb
展开
-
IntersectionObserver实现滚动加载
实际上,因为 document.querySelector 如果元素不存在就会返回 null ,而当 element 传递给 sectionObserver.observe() 时,如果 element 是 null ,就会抛出上述异常发生 Failed to execute ‘observe’ on ‘IntersectionObserver’: parameter 1 is not of type ‘Element’ ,所以请确保 document.querySelector 选择的元素必须存在。原创 2022-10-20 13:02:35 · 1100 阅读 · 0 评论 -
Object.freeze()冻结响应式数据提升性能
真实项目中从服务器中拿到大量数据,并将数据呈现在页面当中,再从服务器拿到新数据将旧数据整体替换掉后再更新。若无修改数据当中某一个细节小项需求,此时对于数据当中的每一项无必要监听(但默认监听影响性能)。Vue2中通过defineproperty通过深度递归将数据中每一个字段get()、set()实现响应式数据,Vue3中通过Proxy代理整个对象,同时也做深度递归。深层递归做监听是有好处的,当数据当中某一项中的某一个字段修改后组件也会重新渲染。原创 2022-09-19 19:35:20 · 1164 阅读 · 0 评论 -
Vue项目中动态绑定的src路径不能用相对地址
在template中动态绑定相对地址时,由于webpack不参与打包编译script下js文件(script中值是啥用啥),生成的源代码文件下不会包含img文件夹及对应图片,即webpack整体打包后的目录结构不是项目src对应的目录结构,因而打包文件找不到对应图片地址。非动态绑定时使用相对地址,webpack的vue-template-compile-loader插件打包编译template和style,将其中地址编译后将图片整体打包到img文件夹下,图片格式保存为xxx.hash.jpg。原创 2022-09-13 17:36:39 · 680 阅读 · 0 评论 -
rem响应式布局
根据Vant3文档postcss-pxtorem:我们在开发的时候写的是px单位,webpack编译时会将其变为rem【需要设置一个基准值】lib-flexible:用于设置基准值Vant组件库按375px设计稿,则其基准值37.5px;若设计稿750px,则其基准值75px...原创 2022-06-30 14:07:48 · 137 阅读 · 0 评论 -
Suspense示例
父组件导入子组件:suspense在异步请求数据载入的2s中进行过渡显示loading:使用实例loading.io网站搜索合适的载入等待(付费的)右键检查元素,Edit as html,复制后单独成组件Loading.vueHome组件中导入子组件模板使用suspense实现异步请求等待过程的载入等待效果。...原创 2022-06-17 23:29:32 · 283 阅读 · 0 评论 -
Vue3使用Swiper
vue版本:C:\Users\boxin>vue -V@vue/cli 5.0.4Swiper版本:"swiper": "^6.5.6",1.安装Swiper,指定版本npm install swiper@6.5.6 --saveSwiper部分独立成子组件,新建swiperCom.vue下2.引入swiper组件// Import Swiper Vue.js componentsimport { Swiper, SwiperSlide } from "swiper/vue"原创 2022-04-14 15:34:15 · 13762 阅读 · 7 评论 -
跨域请求配置示例
新建文件夹store,其中新建文件index.js定义store为响应式对象:const store={ state:reactive({ message:'hello lkk', duanziList:[] }), setMessage(value){ this.state.message=value }, setDzList(list){ this.state.duanziList=list原创 2022-04-07 17:15:35 · 451 阅读 · 0 评论 -
webpack运行报错
当下版本(并不匹配):后续安装一系列包…package.json中进行相关配置:报错:npm ls --depth 0可见包版本不匹配:查询相关资料,卸载项目相关不匹配版本包后安装匹配包版本:此时报如下错:更换vue-loader版本:此时报如下错:根据提示换包版本:打包成功:运行失败(粗心大意,- -hot):。。。。。。如此生活三十年。。。直到大厦崩塌。。。编译成功:运行成功:查阅相关资料并总结,版本号问题。webpack运行报错原创 2022-03-02 22:54:54 · 1641 阅读 · 0 评论 -
async vs defer attributes
转载 2022-01-25 17:52:39 · 80 阅读 · 0 评论