01：實用至上主義的VUE3 - 單擊計數(shù)器
現(xiàn)在，你是一名高級前端開發(fā)。接到一個業(yè)務需求如下：
需要在頁面上添加一個按鈕，用戶單擊一次，就加一，同時顯示單擊次數(shù)，
但是你最近在學 VUE3 ，于是，你想研究下，看看是原生 JS 好用，還是 VUE3 更適合。
流程
原生 JS 實現(xiàn)
代碼如下
? ?<button onclick="myClick()">單擊我</button>? ?<span id="clickCount">0</span>次? ?<script>? ? ? ?let count = 0; // 初始化計數(shù)器為0? ? ? ?const clickCount = document.getElementById("clickCount"); // 獲取顯示次數(shù)的元素? ? ? ?function myClick() {? ? ? ? ? ?count++; // 每次單擊計數(shù)器加1? ? ? ? ? ?clickCount.innerHTML = count; // 將計數(shù)器的值顯示在頁面上? ? ? ?}? ?</script>
相信你在注釋的幫助下，可以簡單看懂代碼的大概含義。
VUE3 實現(xiàn)
代碼如下
? ?<script src="https://unpkg.com/vue@3.3.4"></script>? ?<div id="Application">? ? ? ?<button v-on:click="myClick()">單擊我</button>? ? ? ?<p>單擊了{{ins}}次</p>? ? ? ?<h3>VUE3</h3>? ?</div>? ?<script>? ? ? ?const App = Vue.createApp({? ? ? ? ? ?setup() {? ? ? ? ? ? ? ?let ins = Vue.ref(0)? ? ? ? ? ? ? ?function myClick() {? ? ? ? ? ? ? ? ? ?ins.value = ins.value + 1? ? ? ? ? ? ? ?}? ? ? ? ? ? ? ?return { ins, myClick }? ? ? ? ? ?}? ? ? ?})? ? ? ?App.mount("#Application")? ?</script>
以上為實現(xiàn)目標功能的全部代碼，接下來，我們一一介紹
Vue 使用一種基于 HTML 的模板語法，使我們能夠聲明式地將其組件實例的數(shù)據(jù)綁定到呈現(xiàn)的 DOM 上。所有的 Vue 模板都是語法層面合法的 HTML，可以被符合規(guī)范的瀏覽器和 HTML 解析器解析。
引入資源
為了方便演示，我們沒有使用常見的 NODE 管理方法，而是在單個頁面上使用 VUE3 的各種功能特性，基于“漸進式開發(fā)”理念，我們可以很方便的在某一個功能中使用 VUE3 的特性。
同一般的框架類似，我們在頁面上，直接使用 CDN 鏈接，在頁面上載入 VUE3 資源。
<script src="https://unpkg.com/vue@3.3.4"></script>
這里，我們指定了當前 VUE3 的最新的版本 - 3.3.4
準備節(jié)點
<div id="Application"></div>
為了讓我們準備好的值和方法能有用武之地，準備一塊地方，讓他們施展拳腳
綁定單擊事件
<button v-on:click="myClick()">單擊我+1</button>
我們?yōu)榘粹o綁定一個單擊事件，單擊則觸發(fā)效果。
但是，?Application?這塊地盤，JS 中已經(jīng)交給 VUE3 管理了，
所以，現(xiàn)在得聽 VUE3 的話。
我們通過?v-on:click?來綁定我們在 VUE3 中準備好的?myClick()?函數(shù)。
展示數(shù)據(jù)
<p>單擊了{{ins}}次</p>
在 VUE3 管理的地方，展示 VUE3 中的數(shù)據(jù)是通過特殊語法?{{}}?來實現(xiàn)的
雙大括號標簽會被替換為相應組件實例中?
ins?屬性（監(jiān)控）的值。同時每次?ins?屬性（監(jiān)控）更改時它也會同步更新。
創(chuàng)建組件
有了 VUE3 框架，我們就可以使用其中提供的 createApp 方法來創(chuàng)建實例了，也可以理解為組件
const App = Vue.createApp({}): 創(chuàng)建一個Vue應用實例，并將其賦值給變量App。
初始化數(shù)據(jù)
setup(): 在組件中定義一個 setup 函數(shù)，該函數(shù)會在組件初始化時被調(diào)用。
在頁面加載的一開始，我們就開始準備各種數(shù)據(jù)，
此時，頁面中還啥都沒有。
創(chuàng)建響應式變量
let ins = Vue.ref(0): 使用 VUE3 的?ref?方法創(chuàng)建一個響應式引用?ins?,初始值為 0 。
在此功能中，我們需要一個變量來存儲當前的初始單擊次數(shù)，我們使用 VUE3 中提供的?ref?方法，來創(chuàng)建一個初始值為 0 的響應式變量。
響應式的意思，就是這個值被一個盒子裝起來，里面有個攝像頭。
變量值被攝像頭（?value?）全程監(jiān)視著，這個變量發(fā)生的每一個細微變化，都可以通過攝像頭（?value?）一清二楚的展示出來。
創(chuàng)建單擊方法
function myClick() {? ?ins.value = ins.value + 1}
function myClick() { ... }: 定義一個名為?myClick?的函數(shù)，用于將?ins?的值加1。
我們無法直接知道當前?ins?的值，但是，我們可以通過攝像頭（?value?）來了解，目前的?ins?的值是多少，那就是?ins.value
因為變量?ins?被盒子裝起來了，我們只記得?ins?剛剛被裝進去的樣子（0）。
如果我們直接拿?ins?的值，那么他的值一直都是被盒子關起來之前的樣子，那就是 0 。
返回值
return { ins, myClick }
return { ins, click }: 將?ins?和?click?作為對象返回，以便在模板中使用。
在展示數(shù)據(jù)時，我們需要用到初始值和單擊的方法，所以，我們把?setup?函數(shù)中，我們需要的值返回出來，以供組件使用。
掛載到文檔模型
App.mount("#Application")
我們準備好了一切，應該給他們一個可以用的上的地方，將?Application?節(jié)點托管給 VUE3 管理。
App.mount("#Application"): 將 App 掛載到 id 為 "Application" 的 DOM 元素上，從而在頁面中顯示出這個組件的內(nèi)容。
總結
這么簡單的需求，我用原生 JS ，10行代碼就搞定了，哪還用的上 VUE3 的17行代碼這么復雜。
但你發(fā)現(xiàn)，雖然效果一樣，但在具體的實現(xiàn)邏輯上，好像又有些不一樣的體驗。
你知道，
一個人可以走的快，但一群人能走的更遠
作為一個有著20.4K星星的框架，應該有著更多的可能待你發(fā)掘。
于是，你準備模擬一個簡單的登錄和退出場景，再分析分析，看看其中有啥不同。
最新文章
后續(xù)文章不定期撰寫中，點個關注，獲取平臺最新文章推送。
技術有限，還望諸位協(xié)助勘誤，于評論區(qū)指出，
常一文多發(fā)，最新勘定和增補文章于下方鏈接給出
https://www.npc.ink/277361.html
