现在，你是一名高级前端开发。接到一个业务需求如下：

需要在页面上添加一个按钮，用户单击一次，就加一，同时显示单击次数，

(资料图片仅供参考)

但是你最近在学 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行代码这么复杂。

但你发现，虽然效果一样，但在具体的实现逻辑上，好像又有些不一样的体验。

你知道，

一个人可以走的快，但一群人能走的更远

作为一个有着星星的框架，应该有着更多的可能待你发掘。

于是，你准备模拟一个简单的登录和退出场景，再分析分析，看看其中有啥不同。

最新文章

后续文章不定期撰写中，点个关注，获取平台最新文章推送。

技术有限，还望诸位协助勘误，于评论区指出，

常一文多发，最新勘定和增补文章于下方链接给出