现在，你是一名高级前端开发。接到一个业务需求如下：
需要在页面上添加一个按钮，用户单击一次，就加一，同时显示单击次数，
(相关资料图)
但是你最近在学 VUE3 ，于是，你想研究下，看看是原生 JS 好用，还是 VUE3 更适合。
流程
原生 JS 实现
代码如下
<button onclick="myClick()">单击我</button>
<span id="clickCount">0</span>次
<script>
let count = 0; // 初始化计数器为0
const clickCount = ("clickCount"); // 获取显示次数的元素
function myClick() {
count++; // 每次单击计数器加1
= count; // 将计数器的值显示在页面上
}
</script>
相信你在注释的帮助下，可以简单看懂代码的大概含义。
VUE3 实现
代码如下
<script src="/vue@"></script>
<div id="Application">
<button v-on:click="myClick()">单击我</button>
<p>单击了{{ins}}次</p>
<h3>VUE3</h3>
</div>
<script>
const App = ({
setup() {
let ins = (0)
function myClick() {
= + 1
}
return { ins, myClick }
}
})
("#Application")
</script>
以上为实现目标功能的全部代码，接下来，我们一一介绍
Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。
引入资源
为了方便演示，我们没有使用常见的 NODE 管理方法，而是在单个页面上使用 VUE3 的各种功能特性，基于“渐进式开发”理念，我们可以很方便的在某一个功能中使用 VUE3 的特性。
同一般的框架类似，我们在页面上，直接使用 CDN 链接，在页面上载入 VUE3 资源。
<script src="/vue@"></script>
这里，我们指定了当前 VUE3 的最新的版本 -
准备节点
<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应用实例，并将其赋值给变量App。
初始化数据
setup(): 在组件中定义一个 setup 函数，该函数会在组件初始化时被调用。
在页面加载的一开始，我们就开始准备各种数据，
此时，页面中还啥都没有。
创建响应式变量
let ins = (0): 使用 VUE3 的 ref方法创建一个响应式引用 ins,初始值为 0 。
在此功能中，我们需要一个变量来存储当前的初始单击次数，我们使用 VUE3 中提供的 ref方法，来创建一个初始值为 0 的响应式变量。
响应式的意思，就是这个值被一个盒子装起来，里面有个摄像头。
变量值被摄像头（ value）全程监视着，这个变量发生的每一个细微变化，都可以通过摄像头（ value）一清二楚的展示出来。
创建单击方法
function myClick() {
= + 1
}
function myClick() { ... }: 定义一个名为 myClick的函数，用于将 ins的值加1。
我们无法直接知道当前 ins的值，但是，我们可以通过摄像头（ value）来了解，目前的 ins的值是多少，那就是
因为变量 ins被盒子装起来了，我们只记得 ins刚刚被装进去的样子（0）。
如果我们直接拿 ins的值，那么他的值一直都是被盒子关起来之前的样子，那就是 0 。
返回值
return { ins, myClick }
return { ins, click }: 将 ins和 click作为对象返回，以便在模板中使用。
在展示数据时，我们需要用到初始值和单击的方法，所以，我们把 setup函数中，我们需要的值返回出来，以供组件使用。
挂载到文档模型
("#Application")
我们准备好了一切，应该给他们一个可以用的上的地方，将 Application节点托管给 VUE3 管理。
("#Application"): 将 App 挂载到 id 为 "Application" 的 DOM 元素上，从而在页面中显示出这个组件的内容。
总结
这么简单的需求，我用原生 JS ，10行代码就搞定了，哪还用的上 VUE3 的17行代码这么复杂。
但你发现，虽然效果一样，但在具体的实现逻辑上，好像又有些不一样的体验。
你知道，
一个人可以走的快，但一群人能走的更远
作为一个有着星星的框架，应该有着更多的可能待你发掘。
于是，你准备模拟一个简单的登录和退出场景，再分析分析，看看其中有啥不同。
最新文章
后续文章不定期撰写中，点个关注，获取平台最新文章推送。
技术有限，还望诸位协助勘误，于评论区指出，
常一文多发，最新勘定和增补文章于下方链接给出
标签：
