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

Posted 欧阳呀

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了超级实用的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 劫持绑定,节省内存,提升性能
<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. 如果存在疑问,可以私信我

以上是关于超级实用的vue小技巧,用了之后直呼好棒~的主要内容,如果未能解决你的问题,请参考以下文章

提效小技巧——记录那些不常用的代码片段

2六大超级实用的成交策略,你用了吗?

技术:超级实用的电脑小技巧

开挂了!这5个Word技巧真的是超级实用,值得收藏!

一个超级实用的源码阅读小技巧

一个超级实用的源码阅读小技巧