01：实用至上主义的VUE3 - 单击计数器

通过口语化的方式结合实战场景，详细讲解vue3执行中的每一步。希望能帮助大家理解基础的vue3运行逻辑和其中运用的方式方法。

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

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

但是你最近在学 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星星的框架，应该有着更多的可能待你发掘。

{{userData.name}}已认证