Vue实战代码

1. 首次加载更快的路由懒加载

路由懒加载可以让我们的包不需要一次把所有的页面的加载进来，只加载当前页面的路由组件就行。

举个🌰，如果这样写，加载的时候会全部都加载进来。

const router = new VueRouter({
  routes:[
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

懒加载写法,结合 webpack 的 import：

const router = new VueRouter({
  routes:[
    {
      path: '/',
      name: 'Home',
      component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
    },
    {
      path: '/about',
      name: 'About',
      component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    }
  ]
})

2. Object.freeze

vue 初始化的时候会将 data 里面的数据都搞成响应式数据吧。但是，我们在写业务逻辑的时候会有些数据一初始化就永远不会改变，它根本就不需要被 vue 做成响应式数据，因此我们应该将这些不用改变的数据通过 Object.freeze 方法冻结它，避免 vue 初始化的时候，做一些无用的操作。

export default {
  data:()=>({
    list: Object.freeze([{title:'我永远不需要改变，我不需要响应式'}]);
  })
}

3. 在computed中使用this

在 computed 属性中通过 this.xxx 去拿 data 里面的数据，和 methods 里面的方法，或许还会通过 this.$store 去拿 vuex 的 state，和 commit 等，甚至，还会通过 this.$route 去获取路由里面的数据吧。其实，我们可以避免这些丑陋的 this,它甚至会给我们带来看不见的性能问题。实现上，我们通过 this 能访问到的数据，在 computed 的第一个参数上都能解构出来。

export default {
   haha({ $attrs,$route,$store,$listeners,$ref }){
     // 还能解构很多属性，可自行打印
     return xxx;
   }
}

4. v-if和v-for一起使用

<template v-if="status" >
	<h3 v-for="item in 100" :key="item">{{item}}</h3>
</template>

5. .sync修饰符

如果你想要在父组件控制一个子组件的显示隐藏，是不是还在传一个 prop 和一个自定义方法，这样会很麻烦，不妨试一试 sync 修饰符。

// 父组件
<template>
 <div>
  <Toggle :show.sync = 'show'></Toggle>
 </div>
</template>

//Toggle 组件
<template>
  <div>
    <div v-if="show">
    展示和隐藏组件
  	</div>
  	<button @click="test">隐藏组件</button>
  </div>
</template>
<script>
export default {
  props:['show'],
  methods: {
    test(){
      this.$emit('update:show', false)
    }
  }
}
</script>

6. 在子组件上定义的原生事件不生效

有时候我们想在子组件上面监听一些事件，比如click，但是不论你怎么点，它都没反应，为什么呢？

<template>
    <div>
        <Child @click="test"></Child>
    </div>
</template>
<script>
    methods:{
        test(){}
    }
</script>

因为这样写 vue 会认为，你自定义了一个click事件，要在子组件通过 $emit('click') 触发才行。如果我就是要在父组件触发呢？那就要用到 native 修饰符了。

<template>
    <div>
        <Child @click.native="test"></Child>
    </div>
</template>
<script>
    methods:{
        test(){}
    }
</script>

7. 用keep-alive缓存一下你的页面状态

keep-alive 可以帮助我们在切换组件的时候，保留上一个组件不被销毁，它在管理后台系统中比较常用。

<keep-alive>
    <router-view></router-view>
</keep-alive>

8. 修改当页面的标题

利用 vue-router 的属性信息进行修改：

const title = this.$route.meta.title;
if (title) {
	document.title = this.$t(title);
}

9. 引用外部文件

// .vue
import demo from './demo.js';
import $ from 'jquery';
import './api.js';
import './css';
window.$ = $;

// .js
const $ = require( "jquery" );

10. 监听浏览器变化

mounted() {
    this.getWindowSize();
    // 监听浏览器被重置大小，并使用防抖函数减少性能损耗
    window.onresize = debounce(this.getWindowSize, 100);
}

getWindowSize() {
    // 当前窗口的宽度
    const bodyWidth = document.body.clientWidth || document.documentElement.clientWidth;
    // 当前窗口的高度
    const bodyHeight = document.body.clientHeight || document.documentElement.clientHeight;
    
    const windowSize = { bodyWidth, bodyHeight };
    this.$store.commit('homeConfig/setWindowSize', windowSize);
}

// 监听浏览器滚动条距头部高度，窗口滚动距离
window.addEventListener('scroll', (event) => {
    const scrollY = document.documentElement.scrollTop || document.body.scrollTop;
    this.$store.commit('homeConfig/changeScrollY', scrollY);
})

11. 组件库回调参数使用

@change="handleChange(v, o, record)" // error
@change="(v, o) => handleChange(v, o, record)" // success