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

古城微笑少年丶 2022-10-19 08:26 147阅读 0赞

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

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

![在这里插入图片描述][20210710213800525.png]

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

![在这里插入图片描述][2021071021354358.png]

## 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>

![在这里插入图片描述][20210710213503916.png]

## 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组件**
 *  只需要传值，就可以得到不同类型的按钮，非常方便

*  调用

// 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();
            }
        })

*  使用

> **1. 希望本文能对大家有所帮助，如有错误，敬请指出**
> 
> **2. 原创不易，还请各位客官动动发财的小手支持一波（关注、评论、点赞、收藏）**  
> **3. 拜谢各位！后续将继续奉献优质好文**  
> **4. 如果存在疑问，可以私信我**

![在这里插入图片描述][20210710213359459.png]

[20210710213800525.png]: /images/20221005/43a9e37e26aa439d8e231836840652c5.png
[2021071021354358.png]: /images/20221005/5587d1aff116490fa0c12b094caede15.png
[20210710213503916.png]: /images/20221005/1c6497a3073e40b9b2176e673e6e395a.png
[20210710213359459.png]: /images/20221005/e6925707435a46f0b0712ff39b5849e3.png