Vue开发中常见的套路和技巧总结


Posted in Vue.js onNovember 24, 2020

属性排放

export default {
 name: '名称',
 components: { // 组件挂载a},
 created(){} // 数据获取
 beforeMount() {}, // 数据获取
 data: () => ({}), //响应式数据
 computed: {} // 计算属性集合
 methods: {} // 方法集合
 ... // 销毁页面不要的资源
}

管理请求加载状态

async beforeMount(){
 // 开始加载
 this.loading = true
 try {
 const data = await getUserInfo()
 } catch (error) {
 console.log(error)
 } finally {
 // 停止加载
 this.loading = false
 }
}

Proxy跨域

proxy: {
 "/api": {
 target: 'http://.......',
 changeOrigin: true, // 是否改变域名
 ws: true, // socket
 pathRewrite: {
 // 路径重写
 "/api": '' // 对拼接内容进行重写
 }
 },
 ....
}

对developer和build的打包进行不同配置

大部分开发者都喜欢将Vue的config写在一个文件中,看起来是没有问题,但是随着环境的变化,项目优化,WebPack插件,等等具有针对性的配置进来后,就会显得稍微杂乱了,这个时候就可以考虑做单独的配置,通过process.dev分别对不同的环境进行一个config的引入,下面贴出我的配置方式。我在项目根目录下新建了一个config目录,里面将公共的方法进行拆包成一个public.js其他的根据生产环境和线下环境进行一个区分的编译。

-- config
--- dev.js
--- build.js
--- public.js
vue.config.js

# 代码 vue.config.js
const devConfig = require('./config/dev')
const buildConfig = require('./config/build')
module.exports = process.env.NODE_ENV === 'development' ? devConfig : buildConfig

计算属性实用

// 计算属性
computed: {
 filterList: function () {
 return this.showData.filter(function (data) {
 // 返回需要显示的数据
 return data.isShow
 })
}
 
// DOM
 
<ul>
 <li v-for="item in filterList" :key="item.id">
 {{ item.name }}
 </li>
</ul>

集合方法

tableFactory(action) {
 switch (action) {
 case 'update':
 ...
 break;
 
 case 'create':
 ...
 break;
 
 case 'delete':
 ...
 break;
 
 default:
 // ...默认获取列表
 break;
 }
}

保持对Props的数据验证规范

props: {
 test: {
  type: String,
  default: ''
 },
 test2: {
  type: [Number, String],
  default: 1
 },
 test3: {
  required: false,
  type: Object
 }
}

组件名称使用

大多时候,我们在组件中定义的name都是作为在template模板中使用的名称,这里建议使用驼峰命名,因为在vue中对驼峰命名做出了很好的解析。

// GanMessage.vue组件
export default {
 name: 'GanMessage'
 .....
}

// 引入后使用
components: {
 [GanMessage.name]: GanMessage
}

// 模板中使用
<template>
 <gan-message/>
</template>

模板引擎调试

大多数时候,在template上面写一些逻辑非常难调试,都是直接看效果的,对于一些值来说,变得无法掌控,所以说在开发环境中,我都会在原型上挂一个全局的console.log方法进行调试

vue.prototype.$logs = window.console.log;

// 使用
<template>
 {{$logs('1111')}}
</template>

获取数据的生命周期

对于数据的获取一直都是又存在争议的,大部分同学都是在created中获取的吧,我个人是在beforeMount中进行后台数据请求获取的

async beforeMount(){
 const data = await getUserInfo();
}

使用async 和 await

大多数时候,在使用Promise的时候都是通过.then,.catch,.finally来进行处理的。但其实我更加的推荐使用async异步函数的方式来进行Pormise的处理,我们只需要进行数据的获取就好了,通过try异常捕获可以快速的对错误进行一个好的排查和抛出。参考上面获取数据的生命周期可以看到

async beforeMount(){
 try {
  const data = await getUserInfo()
 } catch (error) {
  console.log(error)
 } finally {}
}

watch

watch: {
 obj: {
  handler(newName, oldName) {
   console.log('obj.a changed');
  },
  immediate: true,
  deep:true
 },
 'obj.a': {
 handler(newName, oldName) {
  console.log('obj.a changed');
 },
 immediate: true,
 // deep: true
 }
 
 }

在自定义事件中,该值是从其子组件中捕获的值

<!-- Child -->
<template>
 <input type="text" @input="$emit('custom-event', 'hello')" />
</template>

<!-- Parent -->
<template>
 <Child @custom-event="handleCustomevent" />
</template>

<script>
export default {
 methods: {
 handleCustomevent (value) {
  console.log(value) // hello
 }
 }
}
</script>

总结

到此这篇关于Vue开发中常见的套路和技巧总结的文章就介绍到这了,更多相关Vue开发常见套路和技巧内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue在图片上传的时候压缩图片
Nov 18 Vue.js
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 Vue.js
Vue——前端生成二维码的示例
Dec 19 Vue.js
vue实现树状表格效果
Dec 29 Vue.js
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
详解实现vue的数据响应式原理
Jan 20 Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
vue 数据双向绑定的实现方法
Mar 04 Vue.js
vue-cropper组件实现图片切割上传
May 27 Vue.js
vue中data里面的数据相互使用方式
Jun 05 Vue.js
浅析VUE防抖与节流
Nov 24 #Vue.js
解决vue页面刷新,数据丢失的问题
Nov 24 #Vue.js
Vue 的 v-model用法实例
Nov 23 #Vue.js
VUE+Element实现增删改查的示例源码
Nov 23 #Vue.js
Vue实现购物小球抛物线的方法实例
Nov 22 #Vue.js
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 #Vue.js
详解vue 组件注册
Nov 20 #Vue.js
You might like
PHP 判断变量类型实现代码
2009/10/23 PHP
php增删改查示例自己写的demo
2013/09/04 PHP
php获取远程图片体积大小的实例
2013/11/12 PHP
PHP Cookie学习笔记
2016/08/23 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
Nigma vs Liquid BO3 第一场2.13
2021/03/10 DOTA
jQuery UI Datepicker length为空或不是对象错误的解决方法
2010/12/19 Javascript
统计jQuery中各字符串出现次数的工具
2012/05/03 Javascript
js jquery获取随机生成id的服务器控件的三种方法
2013/07/11 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
jquery实现清新实用的网页菜单效果
2015/08/28 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
Bootstrap实现的表格合并单元格示例
2018/02/06 Javascript
Vue中computed与methods的区别详解
2018/03/24 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
el-form 多层级表单的实现示例
2020/09/10 Javascript
Python 字符串定义
2009/09/25 Python
Python开发实例分享bt种子爬虫程序和种子解析
2014/05/21 Python
Python正则简单实例分析
2017/03/21 Python
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
Python实现代码统计工具
2019/09/19 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
详解Html5中video标签那些属性和方法
2019/07/01 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
美容师的职业规划书
2013/12/27 职场文书
对公司合理化的建议书
2014/03/12 职场文书
经济管理毕业生求职信
2014/03/15 职场文书
连带责任保证书
2014/04/29 职场文书
服务理念标语
2014/06/18 职场文书
对象析构函数__del__在Python中何时使用
2022/03/22 Python