還不會(huì) Vue3 ？一篇筆記帶你快速入門
點(diǎn)擊下方星標(biāo)本公眾號(hào)，實(shí)用前端技術(shù)文章及時(shí)了解
前言
這篇文章是我之前學(xué)習(xí) Vue3 做的筆記，做筆記一方面讓自己更加理解和掌握新的特性這些知識(shí)點(diǎn)，另一方面也希望能讓大家入門Vue3，自己學(xué)到了才是賺到了，結(jié)語注明參考資料。
Vue3簡介
面臨的問題：隨著功能的增長，復(fù)雜組件的代碼變得難以維護(hù)，Vue3 就隨之而來，TypeScript 使用的越來越多，Vue3就是 TS 寫的所以能夠更好的支持 TypeScript
在這里介紹就這么簡單
vue2 的絕大多數(shù)的特性 在 Vue3 都能使用，畢竟 Vue 是漸進(jìn)式的
響應(yīng)式原理進(jìn)行使用 Proxy 實(shí)現(xiàn)，v-model 可以傳參了等等新特性
基礎(chǔ)工作
使用Vue3的話，那么必須通過使用構(gòu)建工具創(chuàng)建一個(gè) Vue3 項(xiàng)目
安裝 vue-cli
#?npm
npm?install?-g?@vue/cli
#?yarn
yarn?global?add?@vue/cli
創(chuàng)建一個(gè)項(xiàng)目
使用 create 命令行創(chuàng)建 或者 用 ui 可視化創(chuàng)建
大家用 Vue 都用了這么久，我就不一一說怎么去創(chuàng)建了
#?create
vue?create?項(xiàng)目名
#?可視化
vue?ui
當(dāng)然也可以選擇 vite ，vite 創(chuàng)建的速度比 上面的方法快了一些
npm?init?vite-app?項(xiàng)目名
cd?項(xiàng)目名
npm?install
npm?run?dev
Vue3入門
Composition API
Vue3提出了Composition API
在 Vue2.X 我們使用的是 OptionAPI 里面有我們熟悉的 data、computed、methods、watch...
在 Vue3 中，我們依舊可以使用 OptionAPI當(dāng)然不建議 和 Vue3 混用
在 Vue2 中，我們實(shí)現(xiàn)一個(gè)功能得分到不同的地方，把數(shù)據(jù)放在 data ,computed 方法放在 methods 里面，分開的太散亂了，幾個(gè)功能還好，幾十個(gè)上百個(gè)，那就有點(diǎn)...
所以 Vue3 提出了 Composition API ，它可以把 一個(gè)邏輯的代碼都收集在一起 單獨(dú)寫個(gè)hook,然后再引入，這樣就不到處分布，顯得很亂了
Fragment
在
template中不再需要一個(gè)根元素包裹
<template>
??<img?alt="Vue?logo"?src="./assets/logo.png"?/>
??<HelloWorld?msg="Welcome?to?Your?Vue.js?+?TypeScript?App"?/>
template>
實(shí)際上內(nèi)部會(huì)將多個(gè)標(biāo)簽包含在一個(gè)Fragment虛擬元素中
好處: 減少標(biāo)簽層級(jí), 減小內(nèi)存占用
script 差異
來看看
script和Vue2的區(qū)別
<kbd id="afajh"><form id="afajh"></form></kbd> <strong id="afajh"><dl id="afajh"></dl></strong>
<del id="afajh"><form id="afajh"></form></del>
<th id="afajh"><progress id="afajh"></progress></th>
<b id="afajh"><abbr id="afajh"></abbr></b>
<th id="afajh"><progress id="afajh"></progress></th>