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