vue webpack实用技巧总结

1. watch 与 computed 的巧妙结合 如上图,一个简单的列表页面. 你可能会这么做: created(){ this.fetchData() }, watch: { keyword(){ this.fetchData() } } 如果参数比较多,比如上图 关键字筛选, 区域筛选, 设备ID筛选, 分页数, 每页几条数据, 可能会是这样: data(){ return { keyword:'', region:'', deviceId:'', page:1 } }, methods:

getter和setter getter 是一种获得属性值的方法,setter是一种设置属性值的方法. 属性被赋值 a = 1的时候, a 的原型内的setter就会被触发: 而 console.log(a) 的时候,a 的原型内的getter就会被触发. 实现getter和setter 我们不能直接给变量的setter和getter 绑定事件函数,为了实现绑定我们要借助Object对象来构造带有setter和getter的属性. 这里有前辈总结的 几种实现getter和setter的方法,而且

这个系列记录我在一年vue开发中总结的一些经验和技巧. 利用Object.freeze()提升性能 Object.freeze()是ES5新增的特性,可以冻结一个对象,防止对象被修改. vue 1.0.18+对其提供了支持,对于data或vuex里使用freeze冻结了的对象,vue不会做getter和setter的转换. 如果你有一个巨大的数组或Object,并且确信数据不会修改,使用Object.freeze()可以让性能大幅提升.在我的实际开发中,这种提升大约有5~10倍,倍数随着数据量递

在vue的使用过程中会遇到各种场景,当普通使用时觉得没什么,但是或许优化一下可以更高效更优美的进行开发.下面有一些我在日常开发的时候用到的小技巧,在下将不定期更新~ 1. 多图表resize事件去中心化 1.1 一般情况 有时候我们会遇到这样的场景,一个组件中有几个图表,在浏览器resize的时候我们希望图表也进行resize,因此我们会在父容器组件中写: mounted() { setTimeout(() => window.onresize = () => { this.$refs.cha

前言 临近毕业,写了个简单个人博客,项目地址是点我访问项目地址(顺便求star),本篇是系列总结第一篇.接下来会一步一步模仿一个低配版的Element 的对话框和弹框组件. 正文 Vue 单文件组件开发 当使用vue-cli初始化一个项目的时候,会发现src/components文件夹下有一个HelloWorld.vue文件,这便是单文件组件的基本开发模式. // 注册 Vue.component('my-component', { template: '<div>A custom compo

前言 最近碰到了比较多的关于vue的eventBus的问题,之前定技术选型的时候也被问到了,vuex和eventBus的使用范围.所以简单的写一下.同时有一种特殊的实现方案. 有这么几种数据传递方式,vuex.props.eventBus和特殊的eventBus. vuex 不介绍,数据量和复杂度达不到不用它你才会向下看. props demo 父子组件传值,官方api,只写个demo. 1.父组件 <son :info="info" @update="updateHa

利用 webpack 给生产环境和发布环境配置不同的接口地址 在开发时,前后端分离同时进行开发.前端调用后端给的接口也是在局域网内部的.但是,当项目推到线上的时候,会从真实服务器上获取接口,在测试接口和真实接口之间频繁切换,让人十分恶心. 第一步,在webpack配置文件中,分别设置不同的接口地址 打开dev.en.js文件.修改如下: var merge = require('webpack-merge') var prodEnv = require('./prod.env') module.

目录 前言 1. 使用 $attrs 和 $listeners 进行多层级的数据和事件传递 2. 实现数据的双向绑定,方便维护数据 使用 .sync 实现 Prop 的"双向绑定" 使用 model 选项 3. 使用 Mixins 4. 使用动态组件去懒加载组件 5. 在组件作用域内的 CSS 中使用 ::v-deep  修改组件样式 6. 使用装饰器优化代码 7. 利用 require.context 去获取项目目录信息 总结 引用 前言 在 Vue 项目开发中,很容易产生一些问题,

目录 前言 透传 Attribute 透传 slot 普通slot 动态插槽名 作用域插槽 封装组件存在的问题 组件实例属性和方法的调用 总结 前言 在开发Vue项目我们一般使用第三方UI组件库进行开发,如element-plus, @arco-design/web-Vue, naive-ui等, 但是这些组件提供的接口并不一定满足我们的需求,这时我们可以通过对组件库组件的二次封装,来满足我们特殊的需求. 对于封装组件有一个大原则就是我们应该尽量保持原有组件的接口,除了我们需要封装的功能外,我们

1.第一例 const Home = resolve => { import("@/components/home/home.vue").then( module => { resolve(module) } } 注:(上面import的时候可以不写后缀) export default [{ path: '/home', name:'home', component: Home, meta: { requireAuth: true, // 添加该属性可以判断出该页面是否需要

目录 webpack优化很有必要 构建时间优化 thread-loader cache-loader 开启热更新 exclude & include 构建区分环境 提升webpack版本 打包体积优化 CSS代码压缩 JS代码压缩 tree-shaking source-map类型 打包体积分析 用户体验优化 模块懒加载 Gzip 小图片转base64 合理配置hash webpack优化很有必要 上一篇文章给大家讲解了简单搭建一个Vuecli,但是只是基本搭建,而没有进行进一步的优化. 而使用