av京东热,成人视频免费在线观看黄色视频 ,熟女在线视频,九七精品视频在线观看,www.欧美精品,污污污www精品国产网站,亚洲成人影片,午夜福利美女

（給前端大學(xué)加星標(biāo)，提升前端技能.）

作者: WahFung
https://juejin.im/post/5e8a9b1ae51d45470720bdfa

路由參數(shù)解耦

一般在組件內(nèi)使用路由參數(shù)，大多數(shù)人會(huì)這樣做：

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

在組件中使用 $route 會(huì)使之與其對(duì)應(yīng)路由形成高度耦合，從而使組件只能在某些特定的 URL 上使用，限制了其靈活性。

正確的做法是通過 props 解耦

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

將路由的 props 屬性設(shè)置為 true 后，組件內(nèi)可通過 props 接收到 params 參數(shù)

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

另外你還可以通過函數(shù)模式來返回 props

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

文檔：https://router.vuejs.org/zh/guide/essentials/passing-props.html

函數(shù)式組件

函數(shù)式組件是無狀態(tài)，它無法實(shí)例化，沒有任何的生命周期和方法。創(chuàng)建函數(shù)式組件也很簡單，只需要在模板添加 functional 聲明即可。一般適合只依賴于外部數(shù)據(jù)的變化而變化的組件，因其輕量，渲染性能也會(huì)有所提高。

組件需要的一切都是通過 context 參數(shù)傳遞。它是一個(gè)上下文對(duì)象，具體屬性查看文檔。這里 props 是一個(gè)包含所有綁定屬性的對(duì)象。

函數(shù)式組件

父組件使用

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

文檔：https://cn.vuejs.org/v2/guide/render-function.html#函數(shù)式組件

樣式穿透

在開發(fā)中修改第三方組件樣式是很常見，但由于 scoped 屬性的樣式隔離，可能需要去除 scoped 或是另起一個(gè) style 。這些做法都會(huì)帶來副作用（組件樣式污染、不夠優(yōu)雅），樣式穿透在css預(yù)處理器中使用才生效。

我們可以使用 >>> 或 /deep/ 解決這一問題:

watch高階使用

立即執(zhí)行

watch 是在監(jiān)聽屬性改變時(shí)才會(huì)觸發(fā)，有些時(shí)候，我們希望在組件創(chuàng)建后 watch 能夠立即執(zhí)行

可能想到的的方法就是在 create 生命周期中調(diào)用一次，但這樣的寫法不優(yōu)雅，或許我們可以使用這樣的方法

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

深度監(jiān)聽

在監(jiān)聽對(duì)象時(shí)，對(duì)象內(nèi)部的屬性被改變時(shí)無法觸發(fā) watch ，我們可以為其設(shè)置深度監(jiān)聽

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

觸發(fā)監(jiān)聽執(zhí)行多個(gè)方法

使用數(shù)組可以設(shè)置多項(xiàng)，形式包括字符串、函數(shù)、對(duì)象

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)
        }
    }
}

文檔：https://cn.vuejs.org/v2/api/#watch

watch監(jiān)聽多個(gè)變量

watch本身無法監(jiān)聽多個(gè)變量。但我們可以將需要監(jiān)聽的多個(gè)變量通過計(jì)算屬性返回對(duì)象，再監(jiān)聽這個(gè)對(duì)象來實(shí)現(xiàn)“監(jiān)聽多個(gè)變量”

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

事件參數(shù)$event

$event 是事件對(duì)象的特殊變量，在一些場(chǎng)景能給我們實(shí)現(xiàn)復(fù)雜功能提供更多可用的參數(shù)

原生事件

在原生事件中表現(xiàn)和默認(rèn)的事件對(duì)象相同

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

自定義事件

在自定義事件中表現(xiàn)為捕獲從子組件拋出的值

my-item.vue :

export default {
    methods: {
        customEvent() {
            this.$emit('custom-event', 'some value')
        }
    }
}
復(fù)制代碼

App.vue

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

文檔：https://cn.vuejs.org/v2/guide/events.html#內(nèi)聯(lián)處理器中的方法

https://cn.vuejs.org/v2/guide/components.html#使用事件拋出一個(gè)值

自定義組件雙向綁定

組件 model 選項(xiàng):

允許一個(gè)自定義組件在使用 v-model 時(shí)定制 prop 和 event。默認(rèn)情況下，一個(gè)組件上的 v-model 會(huì)把 value 用作 prop 且把 input 用作 event，但是一些輸入類型比如單選框和復(fù)選框按鈕可能想使用 value prop 來達(dá)到不同的目的。使用 model 選項(xiàng)可以回避這些情況產(chǎn)生的沖突。

input 默認(rèn)作為雙向綁定的更新事件，通過 $emit 可以更新綁定的值

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

修改組件的 model 選項(xiàng)，自定義綁定的變量和事件

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

文檔：https://cn.vuejs.org/v2/api/#model

監(jiān)聽組件生命周期

通常我們監(jiān)聽組件生命周期會(huì)使用 $emit ，父組件接收事件來進(jìn)行通知

子組件

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

父組件

其實(shí)還有一種簡潔的方法，使用 @hook 即可監(jiān)聽組件生命周期，組件內(nèi)無需做任何改變。同樣的， created 、 updated 等也可以使用此方法。

程序化的事件偵聽器

比如，在頁面掛載時(shí)定義計(jì)時(shí)器，需要在頁面銷毀時(shí)清除定時(shí)器。這看起來沒什么問題。但仔細(xì)一看 this.timer 唯一的作用只是為了能夠在 beforeDestroy 內(nèi)取到計(jì)時(shí)器序號(hào)，除此之外沒有任何用處。

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

如果可以的話最好只有生命周期鉤子可以訪問到它。這并不算嚴(yán)重的問題，但是它可以被視為雜物。

我們可以通過 $on 或 $once 監(jiān)聽頁面生命周期銷毀來解決這個(gè)問題：

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)
        })
    }
}

使用這個(gè)方法后，即使我們同時(shí)創(chuàng)建多個(gè)計(jì)時(shí)器，也不影響效果。因?yàn)樗鼈儠?huì)在頁面銷毀后程序化的自主清除。

文檔：https://cn.vuejs.org/v2/guide/components-edge-cases.html#程序化的事件偵聽器

手動(dòng)掛載組件

在一些需求中，手動(dòng)掛載組件能夠讓我們實(shí)現(xiàn)起來更加優(yōu)雅。比如一個(gè)彈窗組件，最理想的用法是通過命令式調(diào)用，就像 elementUI 的 this.$message 。而不是在模板中通過狀態(tài)切換，這種實(shí)現(xiàn)真的很糟糕。

先來個(gè)最簡單的例子：

import Vue from 'vue'
import Message from './Message.vue'

// 構(gòu)造子類
let MessageConstructor = Vue.extend(Message)
// 實(shí)例化組件
let messageInstance = new MessageConstructor()
// $mount可以傳入選擇器字符串，表示掛載到該選擇器
// 如果不傳入選擇器，將渲染為文檔之外的的元素，你可以想象成 document.createElement()在內(nèi)存中生成dom
messageInstance.$mount()
// messageInstance.$el獲取的是dom元素
document.body.appendChild(messageInstance.$el)

下面實(shí)現(xiàn)一個(gè)簡易的 message 彈窗組件

Message/index.vue

// 默認(rèn)選項(xiàng)
const DefaultOptions = {
    duration: 1500,
    type: 'info',
    content: '這是一條提示信息！',
}
let mid = 0
export default {
    data() {
        return {
            notices: []
        }
    },
    methods: {
        add(notice = {}) {
            // name標(biāo)識(shí) 用于移除彈窗
            let _name = this.getName()
            // 合并選項(xiàng)
            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 函數(shù) 用于 Vue.use 注冊(cè)
    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
})

文檔：https://cn.vuejs.org/v2/api/#vm-mount

注：周末快樂呀！以上10個(gè)技巧，你都會(huì)了嗎？

歡迎下方留言區(qū)討論交流~~~

分享前端好文，點(diǎn)亮?在看?

10個(gè)Vue開發(fā)技巧助力成為更好的工程師

立即執(zhí)行

深度監(jiān)聽

觸發(fā)監(jiān)聽執(zhí)行多個(gè)方法

原生事件

自定義事件