1 渐进式视图框架 Vue
Vue.js是目前在国内最流行的前端框架之一，说最流行是因为目前来看使用人数比较多，在项目中最常用。Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。在2020年9月18日，她迎来了属于自己的v3.0版本，而Vue 2 将于 2023 年 12 月 31 日停止维护。
Vue.js 3.0带来了很多新特性，在框架的设计和代码实现上面，也做了很多的创新。一定程度上面，Vue.js 3.0做到了使用更少代码实现更多功能。Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。
2 为什么需要学习vue.js？
如果你阅读了第1小节内容，那么这个问题就很好解答了。我们需要学习vue主要有以下几个原因：
- 流行度：Vue.js是一种非常流行的前端框架，被广泛应用于构建用户界面。掌握Vue.js可以让你在开发Web应用程序和构建可重用组件方面更具竞争力。
- 易用性：Vue.js的文档非常完整和易于理解，提供了核心概念和API的详细解释，以及许多示例和实践案例，方便开发者学习和实践。相对于Angular或React来说，Vue.js更容易理解和上手。
- 组件化：Vue.js提供了强大的组件化支持，开发者可以将应用程序分解成多个小组件，然后在不同的页面中重复使用它们。这种模块化的设计方式使得应用程序更易于理解、维护和升级。尤其是在3.0后，这种组件化的渐进式框架，原生代码需要手写，现在我们使用组件，就省事省时很多，对于后续开发更快捷。
- 性能表现：Vue.js采用了响应式系统的设计，可以实时响应数据的变化，将数据与视图保持同步。此外，Vue.js还提供了虚拟DOM的机制，可以更快地更新页面。这些特性使得Vue.js具有良好的性能表现。
- 生态系统：Vue.js拥有一个庞大的生态系统，包括Vuex、Vue Router、Vue CLI等插件和工具，可以帮助开发者更快地构建、测试和部署Vue应用程序。这意味着，当你学习Vue.js时，你将有更多的机会找到工作并获得更高的薪资水平。
3 Vue组件：单文件组件
单文件组件是 Vue 的标志性功能。
格式：*.vue 文件， 全称是Single-File Components，通常简写成为SFC。
包含对象：组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 。vue文件会将这三种组件存放在一个名为vue的文件中。
举例如下：
代码语言：javascript复制// JavaScript 逻辑部分
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script>
// HTML 模版部分
<template>
<header>
<img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
<div class="wrapper">
<HelloWorld msg="You did it!" />
</div>
</header>
<main>
<TheWelcome />
</main>
</template>
// CSS 样式部分
<style scoped>
header {
line-height: 1.5;
}
.logo {
display: block;
margin: 0 auto 2rem;
}
@media (min-width: 1024px) {
header {
display: flex;
place-items: center;
padding-right: calc(var(--section-gap) / 2);
}
.logo {
margin: 0 2rem 0 0;
}
header .wrapper {
display: flex;
place-items: flex-start;
flex-wrap: wrap;
}
}
</style>4 选项式 API 和组合式 API 风格
Vue 的组件可以按两种不同的风格书写：选项式 API 和组合式 API。
- 选项式 API
包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。
代码语言：javascript复制<script>
export default {
// data() 返回的属性将会成为响应式的状态
// 并且暴露在 `this` 上
data() {
return {
count: 0
}
},
// methods 是一些用来更改状态与触发更新的函数
// 它们可以在模板中作为事件处理器绑定
methods: {
increment() {
this.count
}
},
// 生命周期钩子会在组件生命周期的各个不同阶段被调用
// 例如这个函数就会在组件挂载完成后被调用
mounted() {
console.log(`The initial count is ${this.count}.`)
}
}
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>- 组合式 API
组合式 API 通常会与 <script setup> 搭配使用。
代码语言：javascript复制<script setup>
import { ref, onMounted } from 'vue'
// 响应式状态
const count = ref(0)
// 用来修改状态、触发更新的函数
function increment() {
count.value
}
// 生命周期钩子
onMounted(() => {
console.log(`The initial count is ${count.value}.`)
})
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>通过上面的两个官方案例，我们可以总结一下：
选项式API在Vue2.x中广泛使用，它通过包含多个选项的对象来描述组件逻辑，例如data、methods和mounted等。这种方式的优点是易于学习和使用，代码组织性较差，相似的逻辑代码不便于复用，逻辑复杂的代码可能难以阅读。
组合式API是一系列API的集合，使用函数而不是声明选项的方式书写Vue组件。它涵盖了响应式API、生命周期钩子、依赖注入等。当需要构建完整的单页应用时，推荐使用组合式API。在选项式API中，可以通过setup()选项来使用组合式API。
5 命令式和声明式
如果从范式上，视图层框架又可以分为命令式和声明式，他们都各有各的优缺点。
在以前的开发者中，我们可以使用bootstrap.js或JQuery.js，他们都是属于命令式。而我们使用的vue.js是声明式。看下面的代码，我们可以明白他们的区别。
在JQuery中
代码语言：javascript复制<!-- JQuery 方式 -->
<script>
$(function() {
$('button').click(function() {
$('#app').text('<p>OK!</p>').on('click', function() {
$(this).text('Hello, world!');
});
});
});
</script>
const div= docment.querySelector('#app');
div.innerText = 'Hello'
div.addEventListener('click', () => {alert('OK')})在vue.js中，我们可以这样子写：
代码语言：javascript复制<div @click="() => alter('OK')"> hello!!! </div>参考：
[1] https://cn.vuejs.org/guide/introduction.html
我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！
