【整理分享】8 個實用Vue開發技巧

本篇文章整理分享8 個很棒的 Vue 開發技巧，包括路由引數解耦、功能元件、樣式範圍、watch的高階使用、watch監聽多個變數等，希望對大家有所幫助！

1.路由引數解耦

通常在元件中使用路由引數，大多數人會做以下事情。

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
        }
    }
}
登入後複製

您還可以通過功能模式返回道具。

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

2.功能元件

功能元件是無狀態的，它不能被範例化，也沒有任何生命週期或方法。建立功能元件也很簡單，只需在模板中新增功能宣告即可。它一般適用於只依賴於外部資料變化的元件，並且由於其輕量級而提高了渲染效能。元件需要的一切都通過上下文引數傳遞。它是一個上下文物件，具體屬性見檔案。這裡的 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:
        }
    }
}
登入後複製

3.樣式範圍

開發中修改第三方元件樣式很常見，但是由於scoped屬性的樣式隔離，可能需要去掉scoped或者另起一個樣式。這些做法有副作用（元件樣式汙染，缺乏優雅），在css前處理器中使用樣式滲透來生效。我們可以使用 >>> 或者 /deep/ 來解決這個問題：

<style scoped>
Outer layer >>> .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>
登入後複製

4.watch的高階使用

watch 在監聽器屬性發生變化時觸發，有時我們希望 watch 在元件建立後立即執行。可能想到的方式是在建立生命週期中呼叫它一次，但這不是一種優雅的編寫方式，所以也許我們可以使用這樣的東西。

export default {
    data() {
        return {
            name:  Joe
        }
    },
    watch: {
        name: {
            handler:  sayName ,
            immediate: true
        }
    },
    methods: {
        sayName() {
            console.log(this.name)
        }
    }
}
登入後複製

Deep Listening

監聽一個物件時，當物件內部的屬性發生變化時，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)
        }
    }
}
登入後複製

5.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
        }
    }
}
登入後複製

6.事件引數$event

$event 是事件物件的一個特殊變數，它在某些場景下為我們提供了更多的可用引數來實現複雜的功能。本機事件：與本機事件中的預設事件物件行為相同。

<template>
    <div>
        <input type="text" @input="inputHandler( hello , $event)" />
    </div>
</template>
登入後複製

export default {
    methods: {
        inputHandler(msg, e) {
            console.log(e.target.value)
        }
    }
}
登入後複製

自定義事件：在自定義事件中表示為捕獲從子元件丟擲的值。

export default {
    methods: {
        customEvent() {
            this.$emit( custom-event ,  some value )
        }
    }
}
登入後複製

<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
        }
    }
}
登入後複製

7.程式化事件監聽器

例如，在頁面掛載時定義一個定時器，需要在頁面銷燬時清除定時器。這似乎不是問題。但仔細觀察，this.timer 的唯一目的是能夠在 beforeDestroy 中獲取計時器編號，否則是無用的。

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

如果可能，最好只存取生命週期掛鉤。這不是一個嚴重的問題，但可以認為是混亂。我們可以通過使用或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)
        })
    }
}
登入後複製

使用這種方法，即使我們同時建立多個定時器，也不影響效果。這是因為它們將在頁面被銷燬後以程式設計方式自動清除。8.監聽元件生命週期通常我們使用 $emit 監聽元件生命週期，父元件接收事件進行通知。

子元件

export default {
    mounted() {
        this.$emit( listenMounted )
    }
}
登入後複製

父元件

<template>
    <div>
        <List @listenMounted="listenMounted" />
    </div>
</template>
登入後複製

其實有一種簡單的方法就是使用@hook 來監聽元件的生命週期，而不需要在元件內部做任何改動。同樣，建立、更新等也可以使用這個方法。

<template>
    <List @hook:mounted="listenMounted" />
</template>
登入後複製

（學習視訊分享：、）

以上就是【整理分享】8 個實用Vue開發技巧的詳細內容，更多請關注TW511.COM其它相關文章！