路由参数解耦

通常在组件内使用路由参数，大多数人会这样作：css

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

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

正确的作法是经过 props 解耦vue

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

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

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 声明便可。通常适合只依赖于外部数据的变化而变化的组件，因其轻量，渲染性能也会有所提升。app

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

函数式组件ide

<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: '' } } }

文档：cn.vuejs.org/v2/guide/re…性能

样式穿透

在开发中修改第三方组件样式是很常见，但因为 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' }
    }
}

文档：cn.vuejs.org/v2/guide/ev…

cn.vuejs.org/v2/guide/co…

自定义组件双向绑定

组件 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++)
        }
    }
}

文档：cn.vuejs.org/v2/api/#mod…

监听组件生命周期

一般咱们监听组件生命周期会使用 $emit ，父组件接收事件来进行通知

子组件

export default {
    mounted() {
        this.$emit('listenMounted')
    }
}

父组件

<template>
    <div>
        <List @listenMounted="listenMounted" />
    </div>
</template>

其实还有一种简洁的方法，使用 @hook 便可监听组件生命周期，组件内无需作任何改变。一样的， created 、 updated 等也可使用此方法。

<template>
    <List @hook:mounted="listenMounted" />
</template>

程序化的事件侦听器

好比，在页面挂载时定义计时器，须要在页面销毁时清除定时器。这看起来没什么问题。但仔细一看 this.timer 惟一的做用只是为了可以在 beforeDestroy 内取到计时器序号，除此以外没有任何用处。

export default {
    mounted() {
        this.timer = setInterval(() => { console.log(Date.now()) }, 1000) }, beforeDestroy() { clearInterval(this.timer) } }

若是能够的话最好只有生命周期钩子能够访问到它。这并不算严重的问题，可是它能够被视为杂物。

咱们能够经过 $on 或 $once 监听页面生命周期销毁来解决这个问题：

export default {
    mounted() {
        this.creatInterval('hello')
        this.creatInterval('world')
    },
    creatInterval(msg) {
        let timer = setInterval(() => { console.log(msg) }, 1000) this.$once('hook:beforeDestroy', function() { clearInterval(timer) }) } }

使用这个方法后，即便咱们同时建立多个计时器，也不影响效果。由于它们会在页面销毁后程序化的自主清除。

手动挂载组件

在一些需求中，手动挂载组件可以让咱们实现起来更加优雅。好比一个弹窗组件，最理想的用法是经过命令式调用，就像 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 })

收集整理：10个Vue开发技巧