Vue开发宝典：分享平时收藏的一些Vue开发的小技巧

在日常开发过程中，建议童鞋们收藏一些开发的小技巧，这样便于我们在开发项目的时候能够用到，可以节约时间成本。

今天小编给大家分享一些平时收藏的Vue开发小技巧，往下看吧！

状态共享

随着组件的细化，就会遇到多组件状态共享的状况，Vuex固然能够解决这类问题，不过就像Vuex官方文档所说的，若是应用不够大，为避免代码繁琐冗余，最好不要使用它，今天咱们介绍的是vue.js 2.6新增长的Observable API ，经过使用这个api咱们能够应对一些简单的跨组件数据状态共享的状况。

以下这个例子，咱们将在组件外建立一个store，而后在App.vue组件里面使用store.js提供的store和mutation方法，同理其它组件也能够这样使用，从而实现多个组件共享数据状态。

首先建立一个store.js，包含一个store和一个mutations，分别用来指向数据和处理方法。

import Vue from"vue";export const store = Vue.observable({ count: 0 });export const mutations = {
  setCount(count) {
    store.count = count;
  }
};

而后在App.vue里面引入这个store.js，在组件里面使用引入的数据和方法。

长列表性能优化

咱们应该都知道vue会经过object.defineProperty对数据进行劫持，来实现视图响应数据的变化，然而有些时候咱们的组件就是纯粹的数据展现，不会有任何改变，咱们就不须要vue来劫持咱们的数据，在大量数据展现的状况下，这可以很明显的减小组件初始化的时间，那如何禁止vue劫持咱们的数据呢？能够经过object.freeze方法来冻结一个对象，一旦被冻结的对象就不再能被修改了。

export default {
  data: () => ({
    users: {}
  }),
  async created() {
    const users = await axios.get("/api/users");
    this.users = Object.freeze(users);
  }
};

另外须要说明的是，这里只是冻结了users的值，引用不会被冻结，当咱们须要reactive数据的时候，咱们能够从新给users赋值。

export default {
  data: () => ({
    users: {}
  }),
  async created() {
    const users = await axios.get("/api/users");
    this.users = Object.freeze(users);
  },
  methods:{
    // 改變值不會觸發視圖響應this.data.users[0] = newValue
    // 改變引用依然會觸發視圖響應this.data.users = newArray
  }
};

去除多余的样式

随着项目愈来愈大，书写的不注意，不天然的就会产生一些多余的css，小项目还好，一旦项目大了之后，多余的css会愈来愈多，致使包愈来愈大，从而影响项目运行性能，因此有必要在正式环境去除掉这些多余的css，这里推荐一个库purgecss，支持CLI、JavascriptApi、Webpack等多种方式使用，经过这个库，咱们能够很容易的去除掉多余的css。

<h1>Hello Vanilla!</h1><div>
  We use Parcel to bundle this sandbox, you can find more info about Parcel
  <ahref="https://parceljs.org"target="_blank"rel="noopener noreferrer">here</a>.
</div>

body {
  font-family: sans-serif;
}
a {
  color: red;
}
ul {
  li {
    list-style: none;
  }
}


import Purgecss from"purgecss";
const purgecss = new Purgecss({
  content: ["**/*.html"],
  css: ["**/*.css"]
});
const purgec***esult = purgecss.purge();

监听组件的生命周期

好比有父组件Parent和子组件Child，若是父组件监听到子组件挂载mounted就作一些逻辑处理，常规的写法可能以下：

// Parent.vue
<Child @mounted="doSomething"/>

// Child.vue
mounted() {
  this.$emit("mounted");
}

这里提供一种特别简单的方式，子组件不须要任何处理，只须要在父组件引用的时候经过@hook来监听便可，代码重写以下：

<Child @hook:mounted="doSomething"/>
<Child @hook:updated="doSomething"/>

固然这里不只仅是能够监听mounted，其它的生命周期事件，例如：created，updated等均可以，是否是特别方便~

再好比平时的绑定卸载事件：

window.addEventListener('resize',this.handleResize)
this.$on('hook:destroyed',() => {
    window.removeventListener('resize',this.handleResize)
})

Watch的初始当即执行

当 watch 一个变量的时候，初始化时并不会执行，以下面的例子，你须要在created的时候手动调用一次。

created() {
  this.fetchUserList();
},
watch: {
  searchText: 'fetchUserList',
}

上面这样的作法可使用，但很麻烦，咱们能够添加immediate属性，这样初始化的时候就会自动触发(不用再写created去调用了)，而后上面的代码就能简化为：

watch: {
  searchText: {
    handler: 'fetchUserList',
    immediate: true
  }
}

路由参数解耦

一般在组件内使用路由参数，大多数人会这样做：

export default {
    methods: {
        getParamsId() {
            return this.$route.params.id
        }
    }
}

在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。

正确的做法是通过 props 解耦

const router = new VueRouter({
    routes: [{
        path: '/user/:id',
        component: User,
        props: true
    }]
})

将路由的 props 属性设置为 true 后，组件内可通过 props 接收到 params 参数。

export default {
    props: ['id'],
    methods: {
        getParamsId() {
            return this.id
        }
    }
}

外你还可以通过函数模式来返回 props。

const router = new VueRouter({
    routes: [{
        path: '/user/:id',
        component: User,
        props: (route) => ({
            id: route.query.id
        })
    }]
})

函数式组件

函数式组件是无状态，它无法实例化，没有任何的生命周期和方法。创建函数式组件也很简单，只需要在模板添加 functional 声明即可。一般适合只依赖于外部数据的变化而变化的组件，因其轻量，渲染性能也会有所提高。

组件需要的一切都是通过 context 参数传递。它是一个上下文对象，具体属性查看文档。这里 props 是一个包含所有绑定属性的对象。

函数式组件

<template functional>
    <div class="list">
        <div class="item" v-for="item in props.list" :key="item.id" @click="props.itemClick(item)">
            <p>{{item.title}}</p>
            <p>{{item.content}}</p>
        </div>
    </div>
</template>

父组件使用

<template>
    <div>
        <List :list="list" :itemClick="item => (currentItem = item)" />
    </div>
</template>

import List from '@/components/List.vue'
export default {
    components: {
        List
    },
    data() {
        return {
            list: [{
                title: 'title',
                content: 'content'
            }],
            currentItem: ''
        }
    }
}

样式穿透

在开发中修改第三方组件样式是很常见，但由于 scoped 属性的样式隔离，可能需要去除 scoped 或是另起一个 style 。这些做法都会带来副作用（组件样式污染、不够优雅），样式穿透在css预处理器中使用才生效。

我们可以使用 >>> 或 /deep/ 解决这一问题：

<style scoped>
外层 >>> .el-checkbox {
  display: block;
  font-size: 26px;
 
  .el-checkbox__label {
    font-size: 16px;
  }
}
</style>

<style scoped>
/deep/ .el-checkbox {
  display: block;
  font-size: 26px;
 
  .el-checkbox__label {
    font-size: 16px;
  }
}
</style>

watch高阶使用

立即执行

watch 是在监听属性改变时才会触发，有些时候，我们希望在组件创建后 watch 能够立即执行。

可能想到的的方法就是在 create 生命周期中调用一次，但这样的写法不优雅，或许我们可以使用这样的方法。

export default {
    data() {
        return {
            name: 'Joe'
        }
    },
    watch: {
        name: {
            handler: 'sayName',
            immediate: true
        }
    },
    methods: {
        sayName() {
            console.log(this.name)
        }
    }
}

深度监听

在监听对象时，对象内部的属性被改变时无法触发 watch ，我们可以为其设置深度监听。

export default {
    data: {
        studen: {
            name: 'Joe',
            skill: {
                run: {
                    speed: 'fast'
                }
            }
        }
    },
    watch: {
        studen: {
            handler: 'sayName',
            deep: true
        }
    },
    methods: {
        sayName() {
            console.log(this.studen)
        }
    }
}

触发监听执行多个方法

使用数组可以设置多项，形式包括字符串、函数、对象。

export default {
    data: {
        name: 'Joe'
    },
    watch: {
        name: [
            'sayName1',
            function(newVal, oldVal) {
                this.sayName2()
            },
            {
                handler: 'sayName3',
                immaediate: true
            }
        ]
    },
    methods: {
        sayName1() {
            console.log('sayName1==>', this.name)
        },
        sayName2() {
            console.log('sayName2==>', this.name)
        },
        sayName3() {
            console.log('sayName3==>', this.name)
        }
    }
}

watch监听多个变量

watch本身无法监听多个变量。但我们可以将需要监听的多个变量通过计算属性返回对象，再监听这个对象来实现“监听多个变量”。

export default {
    data() {
        return {
            msg1: 'apple',
            msg2: 'banana'
        }
    },
    compouted: {
        msgObj() {
            const { msg1, msg2 } = this
            return {
                msg1,
                msg2
            }
        }
    },
    watch: {
        msgObj: {
            handler(newVal, oldVal) {
                if (newVal.msg1 != oldVal.msg1) {
                    console.log('msg1 is change')
                }
                if (newVal.msg2 != oldVal.msg2) {
                    console.log('msg2 is change')
                }
            },
            deep: true
        }
    }
}

事件参数$event

$event 是事件对象的特殊变量，在一些场景能给我们实现复杂功能提供更多可用的参数。

原生事件

在原生事件中表现和默认的事件对象相同。

<template>
    <div>
        <input type="text" @input="inputHandler('hello', $event)" />
    </div>
</template>

export default {
    methods: {
        inputHandler(msg, e) {
            console.log(e.target.value)
        }
    }
}

自定义事件

在自定义事件中表现为捕获从子组件抛出的值

my-item.vue：

export default {
    methods: {
        customEvent() {
            this.$emit('custom-event', 'some value')
        }
    }
}

App.vue：

<template>
    <div>
        <my-item v-for="(item, index) in list" @custom-event="customEvent(index, $event)">
            </my-list>
    </div>
</template>

export default {
    methods: {
        customEvent(index, e) {
            console.log(e) // 'some value'
        }
    }
}

自定义组件双向绑定

组件 model 选项：

允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

input 默认作为双向绑定的更新事件，通过 $emit 可以更新绑定的值。

<my-switch v-model="val"></my-switch>

export default {
    props: {
        value: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        switchChange(val) {
            this.$emit('input', val)
        }
    }
}

修改组件的 model 选项，自定义绑定的变量和事件。

<my-switch v-model="num" value="some value"></my-switch>

export default {
    model: {
        prop: 'num',
        event: 'update'
    },
    props: {
        value: {
            type: String,
            default: ''
        },
        num: {
            type: Number,
            default: 0
        }
    },
    methods: {
        numChange() {
            this.$emit('update', this.num++)
        }
    }
}

手动挂载组件

在一些需求中，手动挂载组件能够让我们实现起来更加优雅。比如一个弹窗组件，最理想的用法是通过命令式调用，就像 elementUI 的 this.$message 。而不是在模板中通过状态切换，这种实现真的很糟糕。

先来个最简单的例子：

import Vue from 'vue'
import Message from './Message.vue'
 
// 构造子类
let MessageConstructor = Vue.extend(Message)
// 实例化组件
let messageInstance = new MessageConstructor()
// $mount可以传入选择器字符串，表示挂载到该选择器
// 如果不传入选择器，将渲染为文档之外的的元素，你可以想象成 document.createElement()在内存中生成dom
messageInstance.$mount()
// messageInstance.$el获取的是dom元素
document.body.appendChild(messageInstance.$el)

下面实现一个简易的 message 弹窗组件

Message/index.vue

<template>
    <div class="wrap">
        <div class="message" :class="item.type" v-for="item in notices" :key="item._name">
            <div class="content">{{item.content}}</div>
        </div>
    </div>
</template>

// 默认选项
const DefaultOptions = {
    duration: 1500,
    type: 'info',
    content: '这是一条提示信息！',
}
let mid = 0
export default {
    data() {
        return {
            notices: []
        }
    },
    methods: {
        add(notice = {}) {
            // name标识 用于移除弹窗
            let _name = this.getName()
            // 合并选项
            notice = Object.assign({
                _name
            }, DefaultOptions, notice)
 
            this.notices.push(notice)
 
            setTimeout(() => {
                this.removeNotice(_name)
            }, notice.duration)
        },
        getName() {
            return 'msg_' + (mid++)
        },
        removeNotice(_name) {
            let index = this.notices.findIndex(item => item._name === _name)
            this.notices.splice(index, 1)
        }
    }
}

.wrap {
    position: fixed;
    top: 50px;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateX(-50%);
}
 
.message {
    --borderWidth: 3px;
    min-width: 240px;
    max-width: 500px;
    margin-bottom: 10px;
    border-radius: 3px;
    box-shadow: 0 0 8px #ddd;
    overflow: hidden;
}
 
.content {
    padding: 8px;
    line-height: 1.3;
}
 
.message.info {
    border-left: var(--borderWidth) solid #909399;
    background: #F4F4F5;
}
 
.message.success {
    border-left: var(--borderWidth) solid #67C23A;
    background: #F0F9EB;
}
 
.message.error {
    border-left: var(--borderWidth) solid #F56C6C;
    background: #FEF0F0;
}
 
.message.warning {
    border-left: var(--borderWidth) solid #E6A23C;
    background: #FDF6EC;
}

Message/index.js

import Vue from 'vue'
import Index from './index.vue'
 
let messageInstance = null
let MessageConstructor = Vue.extend(Index)
 
let init = () => {
    messageInstance = new MessageConstructor()
    messageInstance.$mount()
    document.body.appendChild(messageInstance.$el)
}
 
let caller = (options) => {
    if (!messageInstance) {
        init(options)
    }
    messageInstance.add(options)
}
 
export default {
    // 返回 install 函数 用于 Vue.use 注册
    install(vue) {
        vue.prototype.$message = caller
    }
}

main.js

import Message from '@/components/Message/index.js'
 
Vue.use(Message)

使用

this.$message({
    type: 'success',
    content: '成功信息提示',
    duration: 3000
})

总结

好啦，本次分享的Vue开发小技巧就这么多了，后面还会继续分享，请关注Web前端之家哟！如果您有想知道的问题，都可以留言或者加Q群讨论。