江门移动网站建设报价,大连网站网站搭建制作,中山商城网站建设,网站推广优化网址目录#x1f31f;前言#x1f31f;能让你首次加载更快的路由懒加载#xff0c;怎么能忘#xff1f;#x1f31f;你是否还记得有一个叫Object.freeze的方法#xff1f;#x1f31f;异步组件那么强#xff0c;你是不是没用过#xff1f;#x1f31f;你是不是还在comput…
目录前言能让你首次加载更快的路由懒加载怎么能忘你是否还记得有一个叫Object.freeze的方法异步组件那么强你是不是没用过你是不是还在computed中使用this如何避免 v-if 和 v-for 一起使用那么强的.sync修饰符你为什么不用?v-model还有这么好的修饰符其他的修饰符你是否知道v-model还能自定义属性你还在用浏览器的scrollTop滚动你的页面吗你在子组件上定义的原生事件不生效Vuex 页面刷新数据丢失怎么解决写在最后JSON包里写函数关注博主不迷路前言 大家好上一期给大家总结了一些常见的Vue报错并如何解决的一些方法私下也收到了好多小伙伴的补充小伙伴们实在是太强啦和大家一起共同学习进步真的很开心。今天博主就为大家总结一些实战中的经常用到的Vue小魔法可以使你的开发也包括项目性能得到很大的提升接下来让我们一起来看看吧。 能让你首次加载更快的路由懒加载怎么能忘 路由懒加载可以让我们的包不需要一次把所有的页面的加载进来只加载当前页面的路由组件就行。 举个如果这样写加载的时候会全部都加载进来。 const router new VueRouter({routes:[{path: /,name: Home,component: Home},{path: /about,name: About,component: About}]
})所以应该避免上面的写法尽量使用懒加载 懒加载写法,结合webpack的import使用 const router new VueRouter({routes:[{path: /,name: Home,component: () import(/* webpackChunkName: home */ ../views/Home.vue)},{path: /about,name: About,component: () import(/* webpackChunkName: about */ ../views/About.vue)}]
})你是否还记得有一个叫Object.freeze的方法 应该所有同学都知道vue初始化的时候会将data里面的数据都搞成响应式数据吧。但是我们在写业务逻辑的时候会有些数据一初始化就永远不会改变它根本就不需要被vue做成响应式数据因此我们应该将这些不用改变的数据通过Object.freeze方法冻结它避免vue初始化的时候做一些无用的操作。 举个
export default {data:()({list:Object.freeze([{title:我永远不需要改变我不需要响应式}])})
}异步组件那么强你是不是没用过 异步组件可以让我们在需要一些组件时才将它加载进来而不是一初始化就加载进来这跟路由懒加载时一个概念。 举个
export default {components:{AsyncComponent:()import(/* webpackChunkName: AsyncComponent */ ./Async)}
}异步组件还有一种比较完善的写法 举个
export default {components:{AsyncComponent:()({component:import(/* webpackChunkName: AsyncComponent */ ./Async),delay:200, // 延迟几毫秒默认200timeout:3000, // 加载几毫米之后就超时触发error组件loading:LoadingComponent, // 组件未加载回来前显示error:ErrorComponent // 组件超时时显示})}
}你是不是还在computed中使用this 我猜还有很多同学在computed属性中通过this.xxx去拿data里面的数据和methods里面的方法吧或许还会通过this.route去获取路由里面的数据吧。其实我们可以避免这些丑陋的this,它甚至会给我们带来看不见的性能问题。实现上我们通过this能访问到的数据在computed的第一个参数上都能解构出来。 举个
export default {haha({$attrs,$route,$store,$listeners,$ref}){// 还能结构很多属性可自行打印康康return }
}如何避免 v-if 和 v-for 一起使用 为什么要避免v-if和v-for在同一个元素上同时使用呢因为在vue的源码中有一段代码时对指令的优先级的处理这段代码是先处理v-for再处理v-if的。所以如果我们在同一层中一起使用两个指令会出现一些不必要的性能问题比如这个列表有一百条数据再某种情况下它们都不需要显示当vue还是会循环这个100条数据显示再去判断v-if因此我们应该避免这种情况的出现。 不好的
h3 v-ifstatus v-foritem in 100 :keyitem{{item}}/h3好的
template v-ifstatus h3 v-foritem in 100 :keyitem{{item}}/h3
/templatev-if 与 v-for 为什么不建议一起使用 v-for 和 v-if 不要在同一个标签中使用,因为解析时先解析 v-for 再解析 v-if。如果遇到需要同时使用时可以考虑上诉写法或者写成计算属性的方式。 那么强的.sync修饰符你为什么不用? 如果你想要在父组件控制一个子组件的显示隐藏是不是还在传一个prop和一个自定义方法这样会很麻烦不妨试一试sync修饰符。 举个
// 父组件templatedivToggle :show.sync show/Toggle/div
/template//Toggle 组件templatedivdiv v-ifshow展示和隐藏组件/divbutton clicktest隐藏组件/button/div
/template
scriptexport default {props:[show],methods: {test(){this.$emit(update:show,false)}}
}
/scriptv-model还有这么好的修饰符 v-model上有3个比较好用的修饰符不知到大家有没有用过一个是lazy,一个是number,一个是trim。 lazy:可以将input事件变成blur事件number只能输入数字值 trim:清空两边的空格 举个 //lazyinput v-model.lazymsg ///numberinput v-model.numbermsg ///triminput v-model.trimmsg /其他的修饰符 事件修饰符 .stop 阻止事件继续传播.prevent 阻止浏览器或标签默认行为.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理然后才交由内部元素进行处理.self 只当在 event.target 是当前元素自身时触发处理函数.once 事件将只会触发一次.passive 告诉浏览器你不想阻止事件的默认行为。 键盘事件的修饰符 .enter(捕获“回车”键).tab(捕获“缩进”键).delete (捕获“删除”和“退格”键).esc(捕获“退出”键).space(捕获“空格”键).up(捕获“上”键).down(捕获“下”键).left(捕获“左”键).right(捕获“右”键) 鼠标按钮修饰符 .left.right.middle
你是否知道v-model还能自定义属性 如果想在一个自定义的Input组件上使用v-model那么就要在子组件介绍一个value和触发input事件v-model的默认语法糖就是这两个东西的组合。 举个
// 父组件
templatedivCustomInput v-modelmsg //div
/template//CustomInputtemplatedivinput typetext :valuevalue inputtest/div
/template
script
export default {props:[value],methods: {test(e){this.$emit(input,e.target.value)}},
}
/script但是如果组件里面不是input,而是一个checkbox或者一个radio呢?我不想接受一个value和input事件我想接收一个更加语义化的checked和change事件那该怎么办 举个
// 父组件不需改变
...
//CustomInput
templatedivinput typecheckbox :checkedchecked changetest/div
/template
scriptprops:[checked],model:{props:checked,event:change},methods: {test(e){this.$emit(change,e.target.checked)}}
}
/script你还在用浏览器的scrollTop滚动你的页面吗 有些时候我们在操作一下页面的滚动行为那么我们第一时间就会想到scrollTop。其实我们还有第二个选择就是VueRouter给我们提供的scrollBehavior钩子。 举个
const router new VueRouter({routes:[...] ,scrollBehavior(to,from,position){// position参数可自行打印康康点击浏览器左右箭头会触发return{// 这里可以返回很多参数下面简单列就几个详情自己康康官网x:100,y:100,selector:#app,offset:200,//等等}}
})你在子组件上定义的原生事件不生效 有时候我们想在子组件上面监听一些事件比如click但是不论你怎么点它都没反应为什么呢 举个
templatedivChild clicktest/Child/div
/template
scriptmethods:{test(){}}
/script因为这样写vue会认为你自定义了一个click事件要在子组件通过$emit(‘click’)触发才行。如果我就是要在父组件触发呢那就要用到native修饰符了。 举个
templatedivChild click.nativetest/Child/div
/template
scriptmethods:{test(){}}
/scriptVuex 页面刷新数据丢失怎么解决 需要做 vuex 数据持久化 一般使用本地存储的方案来保存数据 可以自己设计存储方案 也可以使用第三方插件 推荐使用 vuex-persist 插件它就是为 Vuex 持久化存储而生的一个插件。不需要你手动存取 storage 而是直接将状态保存至 cookie 或者 localStorage 中 写在最后
这篇文章分析那个了一些vue开发比较常见的报错你是否也经历过呢后续会为小伙伴们持续更新Vue的一些实战小魔法各位小伙伴让我们 let’s be prepared at all times
JSON包里写函数关注博主不迷路 ✨原创不易还希望各位大佬支持一下 点赞你的认可是我创作的动力 ⭐️ 收藏你的青睐是我努力的方向 ✏️ 评论你的意见是我进步的财富
