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+vant实现购物车全选和反选功能
Nov 17 Vue.js
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
Vue多选列表组件深入详解
Mar 02 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
vue中axios封装使用的完整教程
Mar 03 Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
Vue的生命周期一起来看看
Feb 24 Vue.js
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
vue elementUI批量上传文件
Apr 26 Vue.js
VUE递归树形实现多级列表
Jul 15 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
使用GROUP BY的时候如何统计记录条数 COUNT(*) DISTINCT
2011/04/23 PHP
php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
PHP中怎样防止SQL注入分析
2014/10/23 PHP
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
PHP 实现重载
2021/03/09 PHP
window.open的功能全解析
2006/10/10 Javascript
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
可插入图片的TEXT文本框
2013/12/27 Javascript
Node.js的特点和应用场景介绍
2014/11/04 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
理解javascript中的严格模式
2016/02/01 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
微信小程序request请求后台接口php的实例详解
2017/09/20 Javascript
在vue中读取本地Json文件的方法
2018/09/06 Javascript
前端Electron新手入门教程详解
2019/06/21 Javascript
Python入门_浅谈for循环、while循环
2017/05/16 Python
itchat和matplotlib的结合使用爬取微信信息的实例
2017/08/25 Python
Python机器学习算法之k均值聚类(k-means)
2018/02/23 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
python+playwright微软自动化工具的使用
2021/02/02 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
求职毕业生自荐书
2014/02/08 职场文书
公司请假条范文
2014/04/11 职场文书
公司董事长岗位职责
2014/06/08 职场文书
2015年机关后勤工作总结
2015/05/26 职场文书
开学第一天的感想
2015/08/10 职场文书
学习党史心得体会2016
2016/01/23 职场文书
如何解决php-fpm启动不了问题
2021/11/17 PHP