VUE3-介绍和框架介绍

前端框架介绍

主流的前端框架有九种：React、Vue、Angular、Svelte、Alpine、Preact、LitElement、Stimulus、Ember
但就当前来说主要的其实就两个框架在比较多的用到：React和Vue

为什么选择Vue？

1、易学易用，性能出色，适用场景丰富的Web前端框架，大部分企业都是用的Vue框架，具体可以去招聘软件上搜索比较
2、Vue可以提升开发体验，有比较完备的函数库调用

简介

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

官方文档：http://cn.vuejs.org/

渐进式框架

Vue是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但Web 世界是十分多样化的不同的开发者在Web上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常;重灵活性和“"可以被逐步集成"这个特点。根据你的需求场景，你可以用不同的方式使用Vue:

• 无需构建步骤，渐进式增强静态的HTML
• 在任何页面中作为Web Components嵌入
• 单页应用(SPA)
• 全栈/服务端渲染(SSR)
• Jamstack/静态站点生成(SSG)
• 开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

Vue的风格

Vue分为两种不同的风格：选项式API和组合式API

选项式API

<script>
export default {
	data() {
	return {
		count: 0
		}
	},
	methods: {
		increment() {
		this.count++
		}
	},
	mounted() {
		console.log(`the initial count is ${this.count}.`)
	}
}
</script>

<template>
	<button @click="increment">Count is: {{ count }}</button>
</template>
```javascript

组合式API
```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 @clict="increment">Count is: {{ count }}</button>
</template>

两种方式选择

• 当你不需要使用构建工具，或者打算主要在低复杂度的场景中使用Vue，例如渐进增强的应用场景，推荐采用选项式APl
• 当你打算用Vue构建完整的单页应用，推荐采用组合式API＋单文件组件