介

我比較喜歡使用 Vue 來開發，所以有時會深入研究其功能和特性。通過這篇文章，向你們介紹十個很酷的竅門和技巧，以幫助大家成為更好的 Vue 開發者。

插槽語法更漂亮

隨著Vue 2.6的推出，已經引入了插槽的簡寫方式，之前簡寫可用于事件（例如，@click表示v-on:click事件）或冒號表示方式用于綁定（:src）。例如，如果有一個表格組件，則可以按以下方式使用此功能：

$on(‘hook:’)

如果要在created或mounted方法中定義自定義事件偵聽器或第三方插件，并且需要在beforeDestroy方法中將其刪除以免引起任何內存泄漏，則可以使用此功能。使用$on(‘hook:’)方法，我們可以僅使用一種生命周期方法（而不是兩種）來定義/刪除事件。

prop 驗證

你可能已經知道可以將props驗證為原始類型，例如字符串，數字甚至對象。我們還可以使用自定義驗證器，例如，如果要針對字符串列表進行驗證：

動態指令參數

Vue 2.6 的最酷功能之一是可以將指令參數動態傳遞給組件。假設有一個按鈕組件，并且在某些情況下想監聽單擊事件，而在其他情況下想監聽雙擊事件。這就是動態指令派上用場的地方了：

重用同一路由的組件

有時，我們不同路由共用某些時，如果在這些路由之間切換，則默認情況下，共享組件將不會重新渲染，因為Vue 出于性能原因會重用該組件。但是，如果我們仍然希望重新渲染這些組件，則可以通過在路由器視圖組件中提供:key屬性來實現重新渲染。

從父類到子類的所有 props

這是一個非常酷的功能，可將所有prop從父組件傳遞到子組件。如果我們有另一個組件的包裝器組件，這將特別方便。因為，我們不必一個一個將prop傳遞給子組件，而是一次傳遞所有prop：

上面的可以代替下面的做法

從父類到子類的所有事件偵聽器

如果子組件不在父組件的根目錄下，則可以將所有事件偵聽器從父組件傳遞到子組件，如下所示：

如果子組件位于其父組件的根目錄下，則默認情況下它將獲得那些組件，因此不需要此小技巧。

$createElement

默認情況下，每個Vue實例都可以訪問$createElement方法來創建和返回虛擬節點。例如，可以利用它在可以通過v-html指令傳遞的方法中使用標記。在函數組件中，可以將此方法作為渲染函數中的第一個參數訪問。

使用 JSX

由于Vue CLI 3默認支持使用JSX，因此現在（如果愿意）我們可以使用JSX編寫代碼（例如，可以方便地編寫函數組件）。如果尚未使用Vue CLI 3，則可以使用babel-plugin-transform-vue-jsx獲得JSX支持。

自定義 v-model

默認情況下，v-model是@input事件監聽器和:value props上的語法糖。但是，我們可以在Vue組件中指定一個模型屬性，以定義使用什么事件和值

總結

希望這些竅門和技巧對你有所幫助，如果你也知道哪些技巧，歡迎留言。

原文：https://www.telerik.com/blogs/12-tips-and-tricks-to-improve-your-vue-projects

blob轉成file

利用new File();

function blobToFile(blob, filename, type) {
	return new File([blob], filename, { type })
}

blobToFile('test info', 'test', 'text/plain' )

輸出如下

更進一步了解可閱讀MDN File - Web API 鎺ュ彛鍙傝€? | MDNMDN Web DocsMDN logoMozilla logo

Blob() - Web API 接口參考 | MDN講解

將file轉換成DataURL

利用URL.createObjectURL()

<input type="file" id="file">
<img id="img">

let img = document.getElementById('img')
let file = document.getElementById('file')
file.onchange = function () {
let imgFile = this.files[0]
img.src = URL.createObjectURL(imgFile)
	img.onload = function () {
		URL.revokeObjectURL(this.src)
	}
}

更進一步了解可閱讀 MDN URL.createObjectURL() - Web API 鎺ュ彛鍙傝€? | MDNMDN Web DocsMDN logoMozilla logo 講解

利用FileReader.readAsDataURL()

let img = document.getElementById('img')
let file = document.getElementById('file')
file.onchange = function (e) {
let imgFile = this.files[0]
let fileReader = new FileReader()
fileReader.readAsDataURL(imgFile)
  fileReader.onload = function () {
  	img.src = this.result
  }
}

更進一步了解可閱讀FileReader - Web API 鎺ュ彛鍙傝€? | MDNMDN Web DocsMDN logoMozilla logo簡介

將DataURL轉成file

function dataURLToFile (dataUrl, fileName) {
const dataArr = dataUrl.split(',')
const mime = dataArr[0].match(/:(.*);/)[1]
const originStr = atob(dataArr[1])
	return new File([originStr], fileName, { type: mime })
}
dataURLToFile('data:text/plain;base64,YWFhYWFhYQ==', '測試文件')
// File {name: '測試文件', lastModified: 1640784525620, lastModifiedDate: Wed Dec 29 2021 21:28:45 GMT+0800 (中國標準時間), webkitRelativePath: '', size: 7, …}

復雜處理方式如下

function dataURLToFile (dataUrl, filename) {
const dataArr = dataUrl.split(',')
const mime = dataArr[0].match(/:(.*);/)[1]
const originStr = atob(dataArr[1])
let n = originStr.length
const u8Arr = new Uint8Array(n)
  while (n--) {
  	u8Arr[n] = originStr.charCodeAt(n)
  }
return new File([u8Arr], filename, { type: mime })
}
dataURLToFile('data:text/plain;base64,YWFhYWFhYQ==', '測試文件')
console.log(dataURLToFile('data:text/plain;base64,YWFhYWFhYQ==','測試文件'));
// File {name: '測試文件', lastModified: 1640784866937, lastModifiedDate: Wed Dec 29 2021 21:34:26 GMT+0800 (中國標準時間), webkitRelativePath: '', size: 7, …}

將canvas轉成DataURL

利用canvas.toDataURL()

// html
<input type="file" accept="image/*" id="file">
// js
document.querySelector('#file').onchange = function () {
  canvasToDataURL(this.files[0]).then(res => console.log(res))
 }
function canvasToDataURL (file) {
return new Promise(resolve => {
    const img = document.createElement('img')
    img.src = URL.createObjectURL(file)
    img.onload = function () {
    const canvas = document.createElement('canvas')
    canvas.width = img.width
    canvas.height = img.height
    const ctx = canvas.getContext('2d')
    ctx.drawImage(img, 0, 0)
    resolve(canvas.toDataURL('image/png', 1))
    }
})
}

將DataURL轉成canvas

function dataUrlToCanvas (dataUrl) {
return new Promise(resolve => {
    const img = new Image()
    img.src = dataUrl
    img.onload = function () {
    const canvas = document.createElement('canvas')
    canvas.width = this.width
    canvas.height = this.height
    const ctx = canvas.getContext('2d')
    ctx.drawImage(this, 0, 0)
    resolve(canvas)
    }
})
}
const dataUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUh...'
dataUrlToCanvas(dataUrl)
.then(res => document.body.appendChild(res))

將canvas轉成blob

利用canvas.toBlob()

// html
<input type="file" accept="image/*" id="file">
// js
document.querySelector('#file').onchange = function () {
canvasToDataURL(this.files[0])
.then(res => console.log(res))
}
function canvasToDataURL (file) {
return new Promise(resolve => {
  const img = document.createElement('img')
  img.src = URL.createObjectURL(file)
  img.onload = function () {
  const canvas = document.createElement('canvas')
  canvas.width = img.width
  canvas.height = img.height
  const ctx = canvas.getContext('2d')
  ctx.drawImage(img, 0, 0)
  canvas.toBlob(function (e) {
  	resolve(e)
  }, 'image/png', 1)
}
})

將canvas轉成file

將canvas轉成Blob，然后將Blob轉成file即可，可看最開始的文件類型轉換流程圖。

或將canvas轉成dataURL，然后將dataURL轉成file即可，可看最開始的文件類型轉換流程圖。

blob轉arrayBuffer

利用FileReader.readAsArrayBuffer()

function blobToArrayBuffer (blob, callback) {
const reader = new FileReader()
reader.readAsArrayBuffer(blob)
reader.onload = function () {
	callback(this.result)
}
}
let blob = new Blob([1, 2, 3, 4, 5])
blobToArrayBuffer(blob, (arrayBuffer) => { console.log(arrayBuffer) })
// ArrayBuffer(5)

arrayBuffer轉blob

利用new Blob()

function arrayBufferToBlob (arrayBuffer, type) {
	return new Blob([arrayBuffer], { type })
}
blobToArrayBuffer(new Blob([1, 2, 3, 4, 5]), (arrayBuffer) => {
console.log(arrayBufferToBlob(arrayBuffer, 'text/plain'))
// Blob {size: 5, type: 'text/plain'}
})

————————————————

版權聲明：本文為CSDN博主「定栓」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/weixin_44116302/article/details/122064841