超级实用的vue小技巧，用了之后直呼好棒~

Posted 2021-08-13 欧阳呀

实用的vue小技巧，来源于真实企业实战 —— 记得收藏~

• • 1. 原型注入
  • 2. 对象冻结
  • 3.img 加载失败
  • 4. 递归组件
  • 5. 解决繁乱的template —— render函数
  • 6. 延迟更新 —— Vue.nextTick()
  • 7. 自定义指令

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 劫持绑定，节省内存，提升性能

<script>
import * as Api from "@/common/apiNew.js";
export default {
  data() {
    return {
      dataList: Object.freeze(this.list),
    };
  },
  methods: {},
};
</script>

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>
  <div class="hello">
    <h1>解救繁乱的template ———— render()</h1>
    <!-- 一值多判断 -->
    <div v-if="value === 1">
      <button>按钮1</button>
    </div>
    <div v-else-if="value === 2">
      <button>按钮2</button>
    </div>
    <div v-else-if="value === 3">
      <button>按钮3</button>
    </div>
    <div v-else>
      <button>按钮4</button>
    </div>
  </div>
</template>

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

<script>
export default {
    props: {
        type: {
            type: String,
            default: 'normal'
        },
        text: {
            type: String,
            default: 'normal'
        }
    },
    render(h){
        // h: createElement()
        return h('button', {
            // v-bind:class
            class: {
                btn: true,
                'btn-success': this.type === 'success',
                'btn-danger': this.type === 'error',
                'btn-warning': this.type === 'warning',
                'normal': !this.type
            },

            // dom属性
            domProps:{
                innerText: this.text || '默认按钮'
            },
            // v-on 事件可以绑定在这里
            on:{

            } 
        })
            
        
    }
}
</script>
<style scoped>
.btn{
    width: 100px;
    height: 40px;
    color: white;
    transition: all .5s;
}
.btn:hover{
    background: chartreuse;
    cursor: pointer;
}
.btn-success{
    background: green;
}
.btn-danger{
    background: red;
}
.btn-warning{
    background: orange;
}

.normal{
    background: blue;
}

</style>

• 调用

// 1. 引入
import Button from '../views/button.vue';
// 2. 在components中注册
components:{
	Button
}
// 3. 就可以在模板使用了，传入对应的值
<Button
	:type = "type"
	:text = "text">
</Button>

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

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

//因为 mounted 阶段 dom 并未渲染完毕,所以需要$nextTick
mounted(){ 
  this.$nextTick(() => {
  	// 通过 $refs 获取dom 并绑定 send 方法
    this.$refs.msg.send('浙江温州江南皮革厂') 
  })
}

7. 自定义指令

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

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

• 使用

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

1. 希望本文能对大家有所帮助，如有错误，敬请指出

2. 原创不易，还请各位客官动动发财的小手支持一波（关注、评论、点赞、收藏）
3. 拜谢各位！后续将继续奉献优质好文
4. 如果存在疑问，可以私信我