Vue 简介

好多新手不知道如何学习 Vue,或者说不知道如何把 Vue 应用到工作当中,毕竟不是所有人都有工作经验。本文适合大学生、无工作经验的人士阅读。大神请指点。

我一直在使用 Vue2,最近失业在家,正好学习一下 Vue3。诸君共勉。

什么是 Vue?

学习一门语言,最好的入门肯定不能放过官方文档。我们先看一下官方文档是如何定义 Vue 的。

Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。

在这里肯定有人对一些词汇感觉到陌生,比如“框架”、“声明式”、“组件化”。

框架,说白了就是别人写的代码,但是它比较通用,你可以直接使用。为什么你要使用他人的框架呢?因为省时省力,提高了代码健壮性,开发效率高。

比如我们拿上一代的神仙级框架 jQuery 举例。如果你想要选择一个元素myId的兄弟元素,原生写法如下:

document.getElementById('#myId').nextElementSibling

jQuery 写法如下:

$('#myId').next()

是不是代码一下子就清爽了不少?
这些只是最简单最基本的,当你业务复杂后,框架的好处就体现更大了。
在这里,jQuery就是框架。相信什么是框架,大家可以容易理解,我就不再赘述了。

声明式,这个应该是疑惑最多的一个词了。声明式是与命令式相对的。从定义中可知,Vue 作为一种声明式框架,那什么是命令式框架呢?我们举例说明如下:

<div id="app">
  /* 2. 段落的内容为 message 的值,也就是 Hello Vue! */
  <p>{{ message }}</p>
</div>
const app = new Vue({
  el: '#app',
  data: {
    // 1. 设置 message 为字符串 Hello, Vue!
    message: 'Hello, Vue!'
  }
})

如上就是基于 Vue 的声明式用法,设置段落内容为 “Hello, Vue!”。
在这里我们就是设置变量 message 的内容为 “Hello, Vue!”,然后在 html 中引用一下。框架会自动把 message 的内容替换为我们设置的值。具体它是如何设置的,这是框架内部的实现细节,我们不需要关心,只要会使用即可。

下面来看一下命令式如何实现相同的功能。

<div id="app">
  <p id="message"></p>
</div>
// 1. 首先获取要设置的段落
const paragraph=document.getElementById('#message');

// 2. 设置段落内容
paragraph.textContent='Hello JavaScript'

命令式代码,你就要告诉代码每一步是如何实现的,而声明式代码只需要告诉它最后结果就可以了。这就是两者的不同。

当然,我以上举例很简单,你可能看不出差别,但随着业务复杂,比如实现步骤从示例中的2步变成了10步了。命令式代码你就要一步一步地写清楚10个步骤,而声明式你只管结果就可以了,中间过程不需要你考虑。这时,声明式的优势就体现出来了,这个我们后面可以用2种方法实现一个复杂功能再详细对比。

组件化,或者说模块化,你可以理解为乐高积木,比如你想要实现一个计算器功能,那我们是不是要自己写呢?当然不是了。因为其它人已经用代码写好了一个计算器并封装成一个组件了,我们直接引用就可以了,就像我们使用 input 标签设置一个日期组件一样。

/* 页面呈现一个日期选择框,这里我们是使用了浏览器帮我们实现的一个日期组件。 */
<input type="date" />

/* 页面呈现一个计算器,这里我们是使用了网友分享的一个计算器组件。 */
<Calc />

组件化省去了你的编码时间,是不是极大的提高了我们的开发效率呢?

我们接着看下面的代码。

import { createApp, ref } from 'vue'

createApp({
  setup() {
    return {
      count: ref(0)
    }
  }
}).mount('#app')
<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

这段代码体现了它的2个核心功能:

声明式渲染:与我们上面讨论的一样,只不过我们使用的 Vue2 语法,它是 Vue3。

响应性:
一方面,你可以理解为从代码到这个方向。count 初始化为0(count: ref(0)),所以页面按钮也显示为0;
如果你把它初始化为2(count: ref(2)),那么页面也会呈现2。

另一方面,就是从页面到代码方向。你在页面单击按钮之后,页面数字增加了1,这时候 count: ref(0) 里的 count 也会与页面保持一致。这个要如何查看呢?

打开演练场,按下 F12,在 Vue 开发者插件中即可查看。
play.vuejs.org/#eNp9kUFPAj…

Vue 简介

渐进式框架

关于渐进式框架,你只需要明白它不要求你使用它时完全替换旧框架,而是新旧框架可混合使用,可以一个页面一个页面地慢慢替换。

假设你有一个老项目,它有10个页面。现在你想用 vue 升级替换,那你可以这周完成 A 页面升级替换、下周完成 B 页面升级替换,直至所有页面全部用 vue 完成了替换。

而非渐进式框架呢?就是你要采用该框架的话,所有页面必须全部用新框架完成才可以使用。

它不是我们理解的重点,简单了解即可。

单文件组件

在大多数启用了构建工具的 Vue 项目中,我们可以使用一种类似 HTML 格式的文件来书写 Vue 组件,它被称为单文件组件 (也被称为 *.vue 文件,英文 Single-File Components,缩写为 SFC)。顾名思义,Vue 的单文件组件会将一个组件的逻辑 (JavaScript),模板 (HTML) 和样式 (CSS) 封装在同一个文件里。

<script>
这里写 js 代码
</script>

<template>
这里写 html 代码
</template>

<style>
这里写 css 样式
</style>

上面是官方的说明及文件的结构,与之相对的是多文件组件,这个典型的有 Angluar 框架。它会把你的页面放在 xxx.html 文件中,js 逻辑代码放在 xxx.ts 文件中,样式放在 xxx.css 文件中。

这是2种组织代码的方式,既然官方推荐单文件,我们照办即可。

API 风格

如果你学习过 Vue2,那你的代码就是选项式风格,这个官方文档的示例说得很清楚。

现在 Vue2 已经不在官方维护了,官方主推3,我们也以学习3为目标,而 Vue3 的风格也主推组合式。示例也相当清楚。至于两者谁好谁坏,好像更多人喜欢3的组合式。

官方也推荐在实际生产中使用组合式风格,我们还有什么好说的呢?!

好了,关于 Vue3 的简介就到这里了,下面我们继续走。

原文链接:https://juejin.cn/post/7343138955511562275 作者:zhangwei

(0)
上一篇 2024年3月7日 下午4:57
下一篇 2024年3月7日 下午5:07

相关推荐

发表评论

登录后才能评论