10個Vue開發的技巧

来源:https://www.cnblogs.com/coderhf/archive/2020/05/21/12931012.html
-Advertisement-
Play Games

路由參數解耦 一般在組件內使用路由參數，大多數人會這樣做： export default { methods: { getParamsId() { return this.$route.params.id } } } 在組件中使用 $route 會使之與其對應路由形成高度耦合，從而使組件只能在某些特 ...


路由參數解耦

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

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

 

為此，為了學習前端，學習vue，創建了一個學習交流裙，能夠與大家一起學習、交流。大家免費領取面試題，電子書籍，特效項目源碼等乾貨。

 

先奉上一些資料圖：

 

 

 

 

 

觸發監聽執行多個方法

使用數組可以設置多項，形式包括字元串、函數、對象

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

監聽組件生命周期

通常我們監聽組件生命周期會使用 $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
})

“大清亡於閉關鎖國，學習技術需要交流和資料”。 在這裡我給大家準備了很多的學習資料免費獲取,包括但不限於技術乾貨、大廠面試題系列、技術動向、職業生涯等一切有關程式員的分享.

web前端小白進階方法筆記,學習資料,面試題和視頻,項目源碼免費領取（持續更新）

 

img

 

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • webpack系列-webpack初識與構建工具發展（一）
    為什麼需要構建工具？ 轉換 ES6 語法 轉換 JSX CSS 首碼補全/預處理理器器 壓縮混淆 圖⽚片壓縮 前端構建演變之路 ant + YUI Tool grunt gulp、fis3 webpack、rollup、parcel 為什麽選擇 webpack? 社區⽣生態豐富 配置靈活和插件化擴展 ...
  • CSS position定位
    static 預設屬性，當position為預設值時會忽視top，left，right，bottom和z index的設置 relative 相對定位，相對正常位置進行偏離，通過top，left，right，bottom和z index設置元素的位置及層級，元素懸浮，脫離位置偏移，==但其在文本流里 ...
  • 2020前端練習 —— 圖書館書籍管理系統
    【參考資料】 Bootstrap 中文文檔 ·——Bootstrap 是世界上最流行的、移動設備優先的、響應式前端開發框架。 https://v3.bootcss.com/ 全局 CSS 樣式 · Bootstrap v3 中文文檔 【CSS】 https://v3.bootcss.com/css/ ...
  • 【2020Python修煉記】前端開發之 前端框架Bootstrap
    一、簡介 該框架已經幫你寫好了很多頁面樣式，你如果需要使用，只需要下載它對應文件，之後直接cv拷貝即可 在使用Bootstrap的時候所有的頁面樣式都只需要你通過class來調節即可 版本選擇建議使用v3版本：https://v3.bootcss.com/ 【註意】 bootstrap的js代碼是依 ...
  • JS實現PC端URL跳轉到對應移動端URL
    在做移動端網站時，有時因技術問題或其他原因無法製作響應式版面，而移動端頁面只能放到子目錄下，但是手機端通過搜索引擎進入網站電腦端子頁面，無法匹配到移動端頁面，使得用戶體驗很不好，即影響排名也影響轉化。這裡有一個js代碼可以實現用戶使用手機訪問電腦端，自動跳轉到對應手機頁面。舉例：一個pc頁面http ...
  • 【2020Python修煉記】前端開發之 jQuery 動畫、插件機制
    動畫 參考閱讀： https://www.cnblogs.com/xiaoyuanqujing/articles/11670140.html 插件機制（乾貨滿滿） 參考閱讀： https://www.cnblogs.com/xiaoyuanqujing/articles/11670482.html ...
  • Vue SSR 即時編譯技術
    當我們在服務端渲染 Vue 應用時，無論伺服器執行多少次渲染，大部分 VNode 渲染出的字元串是不變的，它們有一些來自於模板的靜態 html，另一些則來自模板動態渲染的節點（雖然在客戶端動態節點有可能會變化，但是在服務端它們是不變的）。將這兩種類型的節點提取出來，僅在服務端渲染真正動態的節點（se ...
  • 用正則匹配富文本中的文本，並替換其內容
    問題描述： 有這樣的一段字元串： "<p class='test' id='wise'>123 456 789<br>hello<span title='hello' style='width: 200px;height:100px;' src='//www.wisewrong.com/img/12 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類