Vue实战中的一些小技巧

1.原型注入

• 全局属性和方法可以这么定义
• 方便调用和获取
• 一般不定义很多（会污染原型，每次实例Vue都会带上）

// main.js入口文件内 
import Vue from "vue"; 
import router from "./router"; 
import store from "./store"; 
import dayjs from "dayjs"; 
import App from "./App"; 

// 将dayjs注入到Vue原型上，方便vue组件内进行this.dayjs获取 
Vue.prototype.dayjs = dayjs; 
// 任意组件内 this.fn() 调用即可 
Vue.prototype.fn = function(){ 
    // do something 
};

new Vue({ 
    router, 
    store, 
    render: (h) => h(App), 
}).$mount("#app");

2.对象冻结

• 用于纯列表渲染，数据无交互的情况，可以禁止 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.img 加载失败

• 添加默认图片

<img :src="imgUrl" @error="handleError" alt=""> 
<script> 
export default{ 
    data(){ 
        return{ imgUrl:'' }
     },
     methods:{
         handleError(e){
         e.target.src = reqiure('图片路径') 
         } 
       } 
     } 
</script>

4. 递归组件

• tree 组件常用
• 层级是根据后台数据决定的，不知道是多少级
• 当前场景需要用到动态组件 概念
• 组件在它的模板内可以递归的调用自己，只要给组件设置name组件就可
• 必须给一个条件来限制数量，否则会抛出错误: max stack size exceeded
• 组件递归用来开发一些具体有未知层级关系的独立组件（比如常见的：联级选择器和树形控件 ）

<template>
  <div v-for="(item,index) in treeArr">
      子组件，当前层级值： {{index}} <br/>
      <!-- 递归调用自身, 后台判断是否不存在改值 -->
      <tree :item="item.arr" v-if="item.flag"></tree>
  </div>
</template>
<script>
export default {
  // 必须定义name，组件内部才能递归调用
  name: 'tree',
  data(){
    return {}
  },
  // 接收外部传入的值
  props: {
     item: {
      type:Array,
      default: () => []
    }
  }
}
</script>

5. 解决繁乱的template —— render函数

• template 里存在一值多判断
• 代码冗亲，代码杂乱

<template>
  <div>
    <h1 v-if="level === 1">
      <slot></slot>
    </h1>
    <h2 v-else-if="level === 2">
      <slot></slot>
    </h2>
    <h3 v-else-if="level === 3">
      <slot></slot>
    </h3>
    <h4 v-else-if="level === 4">
      <slot></slot>
    </h4>
    <h5 v-else-if="level === 5">
      <slot></slot>
    </h5>
    <h6 v-else-if="level === 6">
      <slot></slot>
    </h6>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: {
    level: {
      type: Number,
      required: true,
    },
  },
}
</script>

• 这么写是没错的，但是看起来很不文雅，代码冗余
• 我们可以使用 render()函数封装一个button组件
• 只需要传值，就可以得到不同类型的按钮，非常方便 现在使用 render 函数重写上面的例子：

<script>
  export default {
    props: {
      level: {
        require: true,
        type: Number,
      }
    },
    render(createElement) {
      return createElement('h' + this.level, this.$slots.default);
    }
  };
</script>

template与render函数对比

相同之处：
render 函数 跟 template 一样都是创建 html 模板
不同之处：
Template适合逻辑简单，render适合复杂逻辑。
使用者template理解起来相对容易，但灵活性不足；自定义render函数灵活性高，但对使用者要求较高。
render的性能较高，template性能较低。 我们通过vue组件渲染流程图知道，使用render函数渲染没有编译过程，相当于使用者直接将代码给程序。所以，使用它对使用者要求高，且易出现错误
Render 函数的优先级要比template的级别要高，但是要注意的是Mustache(双花括号)语法就不能再次使用

6. 延迟更新 —— Vue.nextTick()

• 在下次 DOM 更新循环结束之后执行延迟回调
• 在修改数据之后立即使用这个方法，获取更新后的 DOM
• 一般用于，父组件调用子组件的方法时，需要等其更新完毕

//因为 mounted 阶段 dom 并未渲染完毕,所以需要$nextTick
mounted(){ 
  this.$nextTick(() => {
  	// 通过 $refs 获取dom 并绑定 send 方法
    this.$refs.msg.send('这里可以更新data中的数据引起视图的变化') 
  })
}

7.高精度权限控制–自定义指令 directive

我们通常给一个元素添加 v-if / v-show，来判断该用户是否有权限，但如果判断条件繁琐且多个地方需要判断，这种方式的代码不仅不优雅而且冗余。针对这种情况，我们可以封装了一个指令权限，能简单快速的实现按钮级别的权限判断。

• 我们先在新建个 array.js 文件，用于存放与权限相关的全局函数

// array.js
export function checkArray(key) {
  let arr = ['admin', 'editor']
  let index = arr.indexOf(key)
  if (index > -1) {
    return true // 有权限
  } else {
    return false // 无权限
  }
}

• 然后在将 array 文件挂载到全局中

// main.js
import { checkArray } from './common/array'
Vue.config.productionTip = false
Vue.directive('permission', {
  inserted(el, binding) {
    let permission = binding.value // 获取到 v-permission的值
    if (permission) {
      let hasPermission = checkArray(permission)
      if (!hasPermission) {
        // 没有权限 移除Dom元素
        el.parentNode && el.parentNode.removeChild(el)
      }
    }
  },
})

• 最后我们在页面中就可以通过自定义指令 v-permission 来判断：

<div class="btns">
  <button v-permission="'admin'">权限按钮1</button> // 会显示
  <button v-permission="'visitor'">权限按钮2</button> //无显示
  <button v-permission="'editor'">权限按钮3</button> // 会显示
</div>

• 也可以自定义一个指令，让页面上的input框自动获取焦点

Vue.directive('focus', {
    inserted: function(el){
        el.focus();
    }
})

• 使用

<input placeholder="请输入你的电话" v-model="tel" v-focus />

8. 动态指令参数

• Vue 2.6 的最酷功能之一是可以将指令参数动态传递给组件。我们可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：

<a v-bind:[attributeName]="url"> 这是个链接 </a>

• 这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。
• 同样地，你可以使用动态参数为一个动态的事件名绑定处理函数：

<a v-on:[eventName]="doSomething"> 这是个链接 </a>

• 接下来我们看个例子：假设你有一个按钮，在某些情况下想监听单击事件，在某些情况下想监听双击事件。这时动态指令参数派上用场：

<template>
  <div>
    <aButton @[someEvent]="handleSomeEvent()" />
  </div>
</template>
<script>
export default {
  data () {
    return {
      someEvent: someCondition ? "click" : "dbclick"
    }
  },
  methods: {
    handleSomeEvent () {
      // handle some event
    }
  }
}
</script>

9. 过滤器让数据处理更便利

Vue.js 允许你自定义过滤器，它的用法其实是很简单，但是可能有些朋友没有用过，接下来我们介绍下：

1.理解过滤器

• 功能：对要显示的数据进行特定格式化后再显示。
• 注意：过滤器并没有改变原本的数据，需要对展现的数据进行包装。
• 使用场景：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。

2.定义过滤器
可以在一个组件的选项中定义本地的过滤器：

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

也可以在创建 Vue 实例之前全局定义过滤器：

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

3.使用过滤器
使用方法也简单，即在双花括号中使用管道符(pipeline) |隔开

<!-- 在双花括号中 -->
<div>{{ myData| filterName}}</div>
<div>{{ myData| filterName(arg)}}</div>
<!-- 在 v-bind 中 -->
<div v-bind:id="rawId | formatId"></div>

过滤器可以串联：

{{ message | filterA | filterB }}

在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。
接下来我们看个如何使用过滤器格式化日期的例子：

 <div>
    <h2>显示格式化的日期时间</h2>
    <p>{{ date }}</p>
    <p>{{ date | filterDate }}</p>
    <p>年月日: {{ date | filterDate("YYYY-MM-DD") }}</p>
 </div>
 ......
  filters: {
    filterDate(value, format = "YYYY-MM-DD HH:mm:ss") {
      console.log(this)//undefined 过滤器没有this指向的
      return moment(value).format(format);
    }
  },
  data() {
    return {
      date: new Date()
    };
  }

10. 你是不是还在computed中使用this？

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

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

11. 如何避免v-if和v-for一起使用？

为什么要避免v-if和v-for在同一个元素上同时使用呢？因为在vue的源码中有一段代码时对指令的优先级的处理，这段代码是先处理v-for再处理v-if的。所以如果我们在同一层中一起使用两个指令，会出现一些不必要的性能问题，比如这个列表有一百条数据，再某种情况下，它们都不需要显示，当vue还是会循环这个100条数据显示，再去判断v-if，因此，我们应该避免这种情况的出现。

>不好的例子

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

>好的例子

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

12. 那么强的.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>

13. attr和listeners让你封装组件如鱼得水！

attr和listeners可能很多同学没怎么去使用，其实它们让我们对一些组件库的组件二次封装，非常好用的。 简单介绍一下它们两个：
attr里面。
listeners里面。
这里举一个对ElementUI的Tabel组件简单的二次封装的例子

<el-table 
   v-bind="$attrs"
   v-on="$listeners">
   <template v-for="item in column">
    <el-table-column v-bind="item" />
   </template>
</el-table>
<script>
export default {
  props:{
      column:{
        type:Array,
        required:true
      }
   }
}
<script>

14. v-model还有这么好的修饰符！

v-model上有3个比较好用的修饰符不知到大家有没有用过，一个是lazy,一个是number,一个是trim。
lazy:可以将@input事件变成@blur事件
number：只能输入数字值
trim:清空两边的空格

   //lazy
   <input v-model.lazy="msg" />
   //number
   <input v-model.number="msg" />
   //trim
   <input v-model.trim="msg" />

你是否知道v-model还能自定义属性？
如果想在一个自定义的Input组件上使用v-model，那么就要在子组件，介绍一个value，和触发input事件，v-model的默认语法糖就是这两个东西的组合。

// 父组件
<template>
  <div>
    <CustomInput v-model='msg' />
  </div>
</template>

//CustomInput

<template>
  <div>
    <input type="text" :value="value" @input="test">
  </div>
</template>
<script>
export default {
  props:['value'],
  methods: {
    test(e){
      this.$emit('input',e.target.value)
    }
  },
}
</script>

但是，如果组件里面不是input,而是一个checkbox或者一个radio呢?我不想接受一个value和input事件，我想接收一个更加语义化的checked和change事件，那该怎么办？

父组件不需改变

//CustomInput
<template>
  <div>
    <input type="checkbox" :checked="checked" @change="test">
  </div>
</template>
<script>
 props:['checked'],
 model:{
    props:'checked',
    event:'change'
  },
  methods: {
    test(e){
      this.$emit('change',e.target.checked)
    }
  }
}
</script>

15. 你还在用浏览器的scrollTop滚动你的页面吗？

有些时候我们在操作一下页面的滚动行为，那么我们第一时间就会想到scrollTop。其实我们还有第二个选择就是VueRouter给我们提供的scrollBehavior钩子。

const router = new VueRouter({
  routes:[...] ,
  scrollBehavior(to,from,position){
      // position参数可自行打印康康，点击浏览器左右箭头会触发
      return{
          // 这里可以返回很多参数，下面简单列就几个，详情自己康康官网
          x:100,
          y:100,
          selector:#app,
          offset:200,
          //等等
      }
  }
})

你在子组件上定义的原生事件不生效？
有时候我们想在子组件上面监听一些事件，比如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>

16.异步组件

异步组件那么强，你是不是没用过？ 异步组件可以让我们在需要一些组件时才将它加载进来，而不是一初始化就加载进来，这跟路由懒加载时一个概念。

export default {
  components:{
    AsyncComponent:()=>import(/* webpackChunkName: "AsyncComponent" */ './Async')
  }
}

异步组件还有一种比较完善的写法

export default {
  components:{
    AsyncComponent:()=>({
      component:import(/* webpackChunkName: "AsyncComponent" */ './Async'),
      delay:200, // 延迟几毫秒，默认200
      timeout:3000, // 加载几毫米之后就超时，触发error组件
      loading:LoadingComponent, // 组件未加载回来前显示
      error:ErrorComponent // 组件超时时显示
    })
  }
}

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

写到这里为止，目前这是我觉得基本上在开发过程中确确实实能帮助开发者减轻工作量，构建编程思维，做为一个有追求的开发我觉得不仅要学会业务开发还要懂有艺术的开发，这里我把它比作为“偷懒的艺术”，代码更加简洁方便，通俗易懂这是我的追求希望不足之处大家多多包涵，有什么不懂需要请教的，欢迎评论区留言，大家一起讨论，共同进步。最后，这里为大家送上一句个人比较喜欢的格言大家一起努力呀！
不要吹灭你的灵感和你的想象力; 不要成为你的模型的奴隶。 ——文森特・梵高