現(xiàn)在，你是一名高級前端開發(fā)。接到一個業(yè)務(wù)需求如下：
需要在頁面上添加一個按鈕，用戶單擊一次，就加一，同時顯示單擊次數(shù)，
但是你最近在學(xué) 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)的
雙大括號標簽會被替換為相應(yīng)組件實例中?
ins?屬性（監(jiān)控）的值。同時每次?ins?屬性（監(jiān)控）更改時它也會同步更新。
創(chuàng)建組件
有了 VUE3 框架，我們就可以使用其中提供的 createApp 方法來創(chuàng)建實例了，也可以理解為組件
const App = Vue.createApp({}): 創(chuàng)建一個Vue應(yīng)用實例，并將其賦值給變量App。
初始化數(shù)據(jù)
setup(): 在組件中定義一個 setup 函數(shù)，該函數(shù)會在組件初始化時被調(diào)用。
在頁面加載的一開始，我們就開始準備各種數(shù)據(jù)，
此時，頁面中還啥都沒有。
創(chuàng)建響應(yīng)式變量
let ins = Vue.ref(0): 使用 VUE3 的 ref 方法創(chuàng)建一個響應(yīng)式引用 ins ,初始值為 0 。
在此功能中，我們需要一個變量來存儲當前的初始單擊次數(shù)，我們使用 VUE3 中提供的 ref 方法，來創(chuàng)建一個初始值為 0 的響應(yīng)式變量。
響應(yīng)式的意思，就是這個值被一個盒子裝起來，里面有個攝像頭。
變量值被攝像頭（ 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 的值，那么他的值一直都是被盒子關(guān)起來之前的樣子，那就是 0 。
返回值
return { ins, myClick }return { ins, click }: 將 ins 和 click 作為對象返回，以便在模板中使用。
在展示數(shù)據(jù)時，我們需要用到初始值和單擊的方法，所以，我們把 setup 函數(shù)中，我們需要的值返回出來，以供組件使用。
掛載到文檔模型
App.mount("#Application")我們準備好了一切，應(yīng)該給他們一個可以用的上的地方，將 Application 節(jié)點托管給 VUE3 管理。
App.mount("#Application"): 將 App 掛載到 id 為 “Application” 的 DOM 元素上，從而在頁面中顯示出這個組件的內(nèi)容。
總結(jié)
這么簡單的需求，我用原生 JS ，10行代碼就搞定了，哪還用的上 VUE3 的17行代碼這么復(fù)雜。
但你發(fā)現(xiàn)，雖然效果一樣，但在具體的實現(xiàn)邏輯上，好像又有些不一樣的體驗。
你知道，
一個人可以走的快，但一群人能走的更遠
作為一個有著20.4K星星的框架，應(yīng)該有著更多的可能待你發(fā)掘。
于是，你準備模擬一個簡單的登錄和退出場景，再分析分析，看看其中有啥不同。
最新文章
- 后續(xù)文章不定期撰寫中，點個關(guān)注，獲取平臺最新文章推送。
- 技術(shù)有限，還望諸位協(xié)助勘誤，于評論區(qū)指出，
- 常一文多發(fā)，最新勘定和增補文章于下方鏈接給出
- http://m.kartiktrivedi.com/277361.html