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

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

3.img 加载失败

• 添加默认图片

  <img :src=“imgUrl” @error=“handleError” alt="">

4. 递归组件

• tree 组件常用

• 层级是根据后台数据决定的，不知道是多少级

• 当前场景需要用到动态组件
  概念

• 组件在它的模板内可以递归的调用自己，只要给组件设置name组件就可

• 必须给一个条件来限制数量，否则会抛出错误: max stack size exceeded

• 组件递归用来开发一些具体有未知层级关系的独立组件（比如常见的：联级选择器和树形控件 ）

  子组件，当前层级值： {{index}}
  

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

• 代码中偶尔会有这种一值多判断的问题

  解救繁乱的template ———— render()

  按钮1

  按钮2

  按钮3

  按钮4

• 这么写是没错的，但是看起来很不文雅，代码冗余

• 我们可以使用 render()函数封装一个button组件

• 只需要传值，就可以得到不同类型的按钮，非常方便

• 调用

  // 1. 引入
  import Button from ‘…/views/button.vue’;
  // 2. 在components中注册
  components:{
  Button
  }
  // 3. 就可以在模板使用了，传入对应的值
  
  

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

• 在下次 DOM 更新循环结束之后执行延迟回调

• 在修改数据之后立即使用这个方法，获取更新后的 DOM

• 一般用于，父组件调用子组件的方法时，需要等其更新完毕

  //因为 mounted 阶段 dom 并未渲染完毕,所以需要KaTeX parse error: Expected '}', got 'EOF' at end of input: …ted(){ this.nextTick(() => {
  // 通过 $refs获取dom并绑定send方法this.$refs.msg.send(‘浙江温州江南皮革厂’)
  })
  }

7. 自定义指令

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

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

• 使用

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

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