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
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
关于Vue Router的10条高级技巧总结
May 06 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
详解Vue3使用axios的配置教程
Apr 29 Vue.js
vue使用watch监听属性变化
Apr 30 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
记录mysql性能查询过程的使用方法
2013/05/02 PHP
php实现mysql事务处理的方法
2014/12/25 PHP
微信公众号判断用户是否已关注php代码解析
2016/06/24 PHP
PHP定时任务获取微信access_token的方法
2016/10/10 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
JavaScript中Math对象使用说明
2008/01/16 Javascript
javascript写的一个链表实现代码
2009/10/25 Javascript
JS 图片缩放效果代码
2010/06/09 Javascript
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
IE下JS读取xml文件示例代码
2013/08/05 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
JS实现的页面自定义滚动条效果
2015/10/26 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
2017/02/28 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
Js中async/await的执行顺序详解
2017/09/22 Javascript
Vue之mixin全局的用法详解
2018/08/22 Javascript
对angularjs框架下controller间的传值方法详解
2018/10/08 Javascript
详解vue中的父子传值双向绑定及数据更新问题
2019/06/13 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
对python dataframe逻辑取值的方法详解
2019/01/30 Python
pywinauto自动化操作记事本
2019/08/26 Python
Python3 读取Word文件方式
2020/02/13 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
耐克波兰官方网站:Nike波兰
2019/09/03 全球购物
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
测量JavaScript函数的性能各种方式对比
2021/04/27 Javascript
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python