聊聊VUE

聊聊VUE

一，vue是什么？

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

下面是一个最基本的示例：

import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')

<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

上面的示例展示了 Vue 的两个核心功能：

1. 声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
2. 响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。

二， vue的优点

1. 轻量级

Vue作为一款轻量级前端框架，大小只有18–21KB，工程搭建简单，只需要几行命令符。因为Vue使用的主体语言为JS，开发者可以灵活地将其他框架（如React和Angular）的项目迁移到Vue，具有很高的集成能力。Vue提供的router路由可以便捷地搭建一个多界面应用。

2.高性能

虚拟DOM和响应式避免了不必要的全局重新渲染，提升了用户体验，使用户操作更加流畅。

3.容易上手

和面向对象性质一下，vue的组件化是前端开发更加的方便快捷，同时MVV实现了快捷交付。

4.插件

有许多基于Vue的npm扩展包和开发工具（如Vuex）。Vue可以在一个文件下统一管理所有外部插件的全局使用。

5.测试方便

操作虚拟dom,就性能上vue有很大的优势

三，为什么用Vue？

1.搭建方便

Vue搭建只需要使用这几行命令：

创建vue脚架：
npm install -g @vue/cli

创建项目：
vue create stock_vue //项目名

选择Manually select features（自主配置）

选择红框里面带星号的选项，上下键移动到第一项选择vue版本

选择3.x

自主选择需要的插件：

2.组件化

Vue将组成一个页面的HTML，CSS和JS合并到一个组件中，可以被其他组件或页面引入而重复利用。通常每个.Vue文件作为一个组件导出，组件可以作为基础组件（如按钮）或一个页面（如登录页面）。组件化很好的将一个庞大复杂的前端工程拆分为一个个组件，重复利用提高了开发效率，减少重复代码。

<template>
	<div class="demo">
		<h2>名字：{{name}}</h2>
		<button @click="showName">显示名字</button>	
	</div>
</template>
 
<script>
	 export default {
		name:'Name',
		data(){
			return {
				name:'bdqn',
			}
		},
		methods: {
			showName(){
				alert(this.name)
			}
		},
	}
</script>
 
<style>
	.demo{
		background-color: red;
	}
</style>

3.MVVM数据双向绑定

	MVVM模式（全称为Model-View-ViewModel）为Vue实现数据双向绑定。

    在MVVM中，View为视图层，ViewModel为业务逻辑层，Model为数据层。

何为数据双向绑定？
当用户使View变化时（如填写表单），变化会自动同步到ViewModel处理相应逻辑，并将变化更新到Model数据库。

反之，若服务端数据变化（如数据版），变化会自动同步到ViewModel处理相应逻辑，并将变化同步到View展现给用户。

在用Vue之前，完成HTML和JS之间的交互需要使用大量的DOM操作来实现动态加载。

MVVM的数据双向绑定减少了DOM操作，更高效地实现了视图和数据的交互。同时，MVVM使界面、交互和数据层分离，便于设计人员负责设计界面，后端开发人员提供数据接口，而前端开发人员专注于业务交互逻辑的实现。

响应式 虚拟DOM

对于DOM来说，当HTML的一个元素（如div）需要响应数据更改时，会刷新整个页面，影响使用感。
对于虚拟DOM，浏览器会将HTML文件转换为JS文件并复制一个额外使用（虚拟）。对于任何更改，虚拟DOM都将复制的JS与原始JS进行比较，只重新加载更改的部分，局部修改到真实DOM上。

在Vue中，每个绑定data属性的组件都有一个Watcher检测data属性的变化。一旦检测到改变，则重新渲染该组件，这就是响应式。