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