简介：随着前端的范畴逐渐扩大，深度逐渐下沉，富前端必然带来的一个问题就是性能。特别是在大型复杂项目中，重前端业务可能因为一个小小的数据依赖，导致整个页面卡顿甚至崩溃。本文基于Quick BI（数据可视化分析平台）历年架构变迁中性能的排查、解决和总结出的“个性”问题，尝试总结整个前端层面相对“共性”的问题，提供一些前端性能解决思路。
computed计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时，Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能非常强大，它可以让你的代码更加声明式、数据驱动并且易于维护。
watch监听的是你定义的变量,当你定义的变量的值发生变化时，调用对应的方法。
就好在div写一个表达式name，data里写入num和lastname,firstname,在watch里当num的值发生变化时，就会调用num的方法，方法里面的形参对应的是num的新值和旧值，
而计算属性computed,计算的是Name依赖的值,它不能计算在data中已经定义过的变量。
导航钩子有：a/全局钩子和组件内独享的钩子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave
参数：有to（去的那个路由）、from（离开的路由）、next（一定要用这个函数才能去到下一个路由，如果不用就拦截） 利用导航钩子判断登录验证
if (!ignore.includes(to.name)) { next() return false } if (!store.getters['user/isLogin']) { store.dispatch('checkLogin').then(data => { if (data) next() else next({ name: 'login' }) }) } else next() })省市区三级联动选择，通常与弹出层组件配合使用。要初始化一个 Area 组件，你需要传入一个 area-list 属性，数据格式具体可看下面数据格式章节。 省市区列表数据格式 整体是一个 object，包含 province_list, city_list, county_list 三个 key。 每项以省市区编码作为 key，省市区名字作为 value。编码为 6 位数字，前两位代表省份，中间两位代表城市，后两位代表区县，以 0 补足 6 位。如北京编码为 11，以零补足 6 位，为 110000。 AreaList具体格式如下： 常见问题 在桌面端无法操作组件？
import areaList from '@/areaList.js' const getAreaCode = name => { let areaCode = '' const countyList = areaList.county_list for (const [key, value] of Object.entries(countyList)) { if (value === name) areaCode = String(key) } return areaCode }底部选项卡，点击 tab 会切换显示的页面。依赖 tab-item 组件。 引入
import { Tabbar, TabItem } from 'mint-ui'; Vue.component(Tabbar.name, Tabbar); Vue.component(TabItem.name, TabItem);例子 搭配 tab-container 组件使用
<mt-tabbar v-model="selected"> <div class="mui-tab-item" @click="$router.push('/path')"> <img slot="icon" src="../assets/100x100.png"> 外卖 </mt-tab-item> <mt-tab-item id="订单"> <img slot="icon" src="../assets/100x100.png"> 订单 watch: { $route (to, from) { <mt-header fixed :title="$route.meta.title"> <span slot="left" @click="goBack" v-show="showBack"> <mt-button icon="back">返回</mt-button> </mt-tabbar> import { mapGetters } from 'vuex' export default { computed: { ...mapGetters('car', ['address'], 'from2': ['addressMore'], ) showBack () { const ignore = ['home'] return (!ignore.includes(this.$route.name)) } } .mui-bar * { touch-action: none; }