Vue開發技巧有哪些

Vue開發技巧有哪些，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

路由參數解耦

一般在組件內使用路由參數，大多數人會這樣做：

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

文檔：router.vuejs.org/zh/guide/es…

函數式組件

函數式組件是無狀態，它無法實例化，沒有任何的生命周期和方法。創建函數式組件也很簡單，只需要在模板添加 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: ''         }     } }

文檔：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高階使用

1. 立即執行

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

2. 觸發監聽

執行多個方法使用數組可以設置多項，形式包括字符串、函數、對象：

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

文檔：cn.vuejs.org/v2/api/#wat…

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 是事件對象的特殊變量，在一些場景能給我們實現復雜功能提供更多可用的參數

1. 原生事件

在原生事件中表現和默認的事件對象相同：

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

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

2. 自定義事件

在自定義事件中表現為捕獲從子組件拋出的值

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 選項：

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

使用這個方法后，即使我們同時創建多個計時器，也不影響效果。因為它們會在頁面銷毀后程序化的自主清除。

文檔：cn.vuejs.org/v2/guide/co…

手動掛載組件

在一些需求中，手動掛載組件能夠讓我們實現起來更加優雅。比如一個彈窗組件，最理想的用法是通過命令式調用，就像 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 })

文檔：cn.vuejs.org/v2/api/#vm-…

看完上述內容，你們掌握Vue開發技巧有哪些的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！