現在，Vue.js已成為前端開發的熱門框架。有很多工程師利用Vue.js的便利性和強大功能。但是，我們完成的某些解決方案可能未遵循最佳做法。好吧，讓我們看一下那些必備的Vue技術。

1. 函數組件

函數組件 是無狀態的，沒有生命周期或方法，因此無法實例化

創建一個函數組件非常容易，你需要做的就是在SFC中添加一個 functional: true 屬性，或者在模板中添加 functional。由于它像函數一樣輕巧，沒有實例引用，所以渲染性能提高了不少。

函數組件依賴于上下文，并隨著其中給定的數據而突變。

<template functional><div class="book">{{props.book.name}} {{props.book.price}}</div> </template><script> Vue.component('book', {functional: true,props: {book: {type: () => ({}),required: true}},render: function (createElement, context) {return createElement('div',{attrs: {class: 'book'}},[context.props.book])} }) </script>

2.深層選擇器

有時，你需要修改第三方組件的CSS，這些都是 scoped 樣式，移除 scope 或打開一個新的樣式是不可能的。

現在，深層選擇器 >>> /deep/ ::v-deep 可以幫助你。

<style scoped> >>> .scoped-third-party-class {color: gray; } </style><style scoped> /deep/ .scoped-third-party-class {color: gray; } </style><style scoped> ::v-deep .scoped-third-party-class {color: gray; } </style>

3.高級“watcher”

立即執行

當被監控的prop發生突變時，watch handler就會觸發。但有時，它是在組件被創建后才出現的。

是的，有一個簡單的解決方案：在 created 的鉤子中調用處理程序，但這看起來并不優雅，同時也增加了復雜性。

或者，你可以向觀察者添加 immediate 屬性：

watch: {value: {handler: 'printValue',immediate: true} }, methods : {printValue () {console.log(this.value)} }

深度監聽

有時，watch 屬性是一個對象，但是其屬性突變無法觸發 wacher 處理程序。在這種情況下，為觀察者添加 deep:true 可以使其屬性的突變可檢測到。

請注意，當對象具有多個層時，深層可能會導致一些嚴重的性能問題。最好考慮使用更扁平的數據結構。

data () {return {value: {one: {two: {three: 3}}}} }, watch: {value: {handler: 'printValue',deep: true} }, methods : {printValue () {console.log(this.value)} }

多個handlers

實際上，watch 可以設置為數組，支持的類型為 String、Function、Object。觸發后，注冊的watch處理程序將被一一調用。

watch: {value: ['printValue',function (val, oldVal) {console.log(val)},{handler: 'printValue',deep: true}] }, methods : {printValue () {console.log(this.value)} }

訂閱多個變量突變

watcher 不能監聽多個變量，但我們可以將目標組合在一起作為一個新的 computed，并監視這個新的 "變量"。

computed: {multipleValues () {return {value1: this.value1,value2: this.value2,}} }, watch: {multipleValues (val, oldVal) {console.log(val)} }

4.事件參數：$event

$event 是事件對象的一個特殊變量。它在某些場景下為復雜的功能提供了更多的可選參數。

原生事件

在原生事件中，該值與默認事件（DOM事件或窗口事件）相同。

<template><input type="text" @input="handleInput('hello', $event)" /> </template><script> export default {methods: {handleInput (val, e) {console.log(e.target.value) // hello}} } </script>

自定義事件

在自定義事件中，該值是從其子組件中捕獲的值。

<!-- Child --> <template><input type="text" @input="$emit('custom-event', 'hello')" /> </template><!-- Parent --> <template><Child @custom-event="handleCustomevent" /> </template><script> export default {methods: {handleCustomevent (value) {console.log(value) // hello}} } </script>

5.路由器參數解耦

我相信這是大多數人處理組件中路由器參數的方式：

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

在組件內部使用 $route 會對某個URL產生強耦合，這限制了組件的靈活性。

正確的解決方案是向路由器添加props。

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

這樣，組件可以直接從props獲取 params。

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

此外，你還可以傳入函數以返回自定義 props。

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

6.自定義組件的雙向綁定

允許自定義組件在使用 v-model 時自定義使props和event。默認情況下，組件上的v-model使用value作為屬性，Input作為事件，但一些輸入類型，如復選框和單選按鈕可能希望使用value屬性來實現不同的目的。在這種情況下，使用model選項可以避免沖突。

v-model 是眾所周知的雙向綁定。input 是默認的更新事件。可以通過 $emit 更新該值。唯一的限制是該組件需要<input> 標記才能與 value 屬性綁定。

<my-checkbox v-model="val"></my-checkbox><template><input type="checkbox" :value="value" @input="handleInputChange(value)" /> </template><script> export default {props: {value: {type: Boolean,default: false}},methods: {handleInputChange (val) {console.log(val)}} } </script>

雙向綁定還有另一種解決方案，即 sync 修飾符。與 v-model 不同的是，它不需要你的組件有一個 <input> 標簽并將值綁定到它上面。它僅觸發 update:<your_prop> 通過事件系統對屬性進行突變。

<custom-component :value.sync="value" />

7.組件生命周期 Hook

通常，你可以像這樣監聽子組件的生命周期（例如 mounted）

<!-- Child --> <script> export default {mounted () {this.$emit('onMounted')} } </script><!-- Parent --> <template><Child @onMounted="handleOnMounted" /> </template>

還有另一種簡單的解決方案，你可以改用 @hook:mount 在Vue內部系統中使用。

<!-- Parent --> <template><Child @hook:mounted="handleOnMounted" /> </template>

8.事件監聽APIs

比如，在頁面掛載時增加一個定時器，但銷毀時需要清除定時器。這看起來不錯。

坦白地說，只有在 beforeDestroy 中使用 this.timer 來獲取計時器ID才有意義。并非刻薄，而是變量越少，性能越好。

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

使其只能在生命周期鉤子內訪問。使用 $once 來放棄不必要的東西。

export default {mounted () {let timer = nulltimer = setInterval(() => {console.log(Date.now())}, 1000)this.$once('hook:beforeDestroy', () => {clearInterval(timer)})} }

9.以編程方式掛載組件

在某些情況下，以編程方式加載組件要優雅得多。例如，可以通過全局上下文 $popup() 或 $modal.open() 打開彈出窗口或模態窗口。

import Vue from 'vue' import Popup from './popup'const PopupCtor = Vue.extend(Popup)const PopupIns = new PopupCtr()PopupIns.$mount()document.body.append(PopupIns.$el)Vue.prototype.$popup = Vue.$popup = function () {PopupIns.open() }

Element UI 實現了結構良好的模式組件，該組件允許使用自定義API來控制實例的生命周期。該理論與我上面演示的幾乎相同。

這是有關Vue 2.x的9種技術，希望在本文中你可以對使用框架有更好的了解。如果你認為本文很棒，請在其他社交網絡上分享。

---

原文：https://medium.com/dev-genius
作者：Yanze Dai
翻譯：公眾號《前端全棧開發者》

總結

以上是生活随笔為你收集整理的input js 离开事件_听说你熟练使用Vue.js，这9种Vue技术你掌握了吗？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。