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