第1章 Vue.js概述

1.1 Web前端技术的发展

前端发展史

HTML 纯静态页面
1995 Netscapte JavaScritpt 增加用户交互能力（表单）
1996 MicroSoft ASP、1997 Sun JSP、1998 PHP3，网页正式进入交互阶段
服务器端网页动态交互不断丰富，业务变复杂，后端MVC框架出现。MVC，Model-View-Controller，模型-视图-控制器，将程序分割为若干逻辑，设计更清晰，编码更容易。
2004 Google Ajax，异步交互提升体验
前端框架和库出现，jQuery BootStrap ECharts等
HTML5出现
2010 Angular React VUE出现，从WebSite到WebApp，开启SPA时代（单页面应用程序，Single Page Application）
2015 ES6出现，增加新语法，拓展javascript开发潜力

SPA优点

前后端分离：前后端分离开发，通过ajax、rest api连接前后端数据
良好用户体验：ajax异步获取数据，用户无需主动刷新页面
减轻服务器压力：后端服务器只提供数据，不需要负责展示逻辑与页面合成
共用一套后端程序代码：不用修改后端程序，可用于web、手机、平板等多种客户端。

SPA缺点

初始加载耗时多：单页应用程序，javascript、CSS等要统一加载，但可合并压缩处理
前进、后退问题：需要额外编写代码实现浏览器前进后退功能
SEO难度高: SEO（Search Engine Optimization），搜索引擎优化。可编写一些静态页面给探索引擎，或者通过服务器端渲染技术解决。

1.2 MV*模式

1.2.1 MVC

参考SpringMVC理解MVC模式：用户从视图通过Http请求触发Controller，然后由Model处理数据，View渲染视图，最后通过Controller返回视图用户。

Controller：接收Http请求，返回处理后的视图。

Model：处理数据。

View：根据Model数据，渲染视图。

1.2.2 MVP

Model、View、Presenter，模型、视图、表示器。与MVC不同的是，Model与View不直接交互，而是通过Presenter。整体与MVVM有点类似。

1.2.3 MVVM

核心是数据双向绑定，即ViewModel。ViewModel是View和Model的关系映射。

View和Model不可以直接交互，通过中介ViewModel这个观察者实现通信。

Model变化，ViewModel感知，通知View更新。

View变化，ViewModel感知，通知Model更新。

1.3 初识Vue.js

VUE（读/vju:/，类似于view），作者尤雨溪（Evan You），基于MVVM模型的用于构建用户界面的javascript框架，以数据驱动和组件化思想构建。

发展历程：

2013 Vue.js 0.6.0

2015.10 Vue.js 1.0.0

2016.10.1 Vue.js 2.0.0

2020.9.18 Vue.js 3.0.0

1.3.1 渐进式框架

Vue是渐进式的javascript框架，所谓渐进式，是指框架分层设计，每层可选，也可以替换成其他方案。

核心是声明式渲染，其次是前端路由、状态管理，最外层是构建系统。

Vue提供的构建系统可以轻松快速搭建一个脚手架项目，此项目也集成了Webpack打包工具，很容易构建发布版本。

1.3.2 响应式系统

MVVM模式的核心特性，就是数据的双向绑定。Vue构建了一套响应式系统，可以实现声明式的数据绑定，从而在数据发生变化时自动渲染视图。

1.3.3 体验Vue 3.0响应式系统

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="GBK">
		<title>Hello Vue.js</title>
	</head>
	<body>
		<!--View-->
		<div id="app">
		    <button @click="increment">count值：{{ state.count }}</button>
		</div>

        <!-- 引入Vue.js -->
		<script src="https://unpkg.com/vue@next"></script>
		<script>
			const App = {
			    setup(){
			        // 为目标对象创建一个响应式对象
			        const state = Vue.reactive({count: 0});
			        function increment(){
			            state.count++;
			        }
			        return {
			            state,
			            increment
			        }   
			    }
			};
			// 创建应用程序实例，该实例提供应用程序上下文。
			// 应用程序实例装载的整个组件树将共享相同的上下文.
			const app = Vue.createApp(App);
			// 在id为app的DOM元素上装载应用程序实例的根组件
			app.mount('#app');
		</script>
	</body>
</html>

1.4 Vue.js 3.0带来的新变化

Vue3使用TpyeScritpt重写了Vue2，可以享受完整类型推断，具有8个亮点：

更好的性能：重写了虚拟DOM的实现
Tree-Shaking支持：对无用模块进行剪枝，减少发布版本大小，支持按需引入，而vue2用不到的功能也会打包
组合API：组合API可按业务逻辑编写，提高代码复用，而vue2只支持选项式
碎片：VUE3可以有多个根节点，而Vue2只有一个根节点
更好的TypeScript支持：Vue3代码库完全采用TypeScript编写，具有更好的类型支持，可以进行类型检查、自动补全
传送
悬念
自定义渲染器API

1.5 小结

前端发展史：
- 静态网页
- JS引入成为动态页面
- Ajax引入支持局部刷新
- jQuery/BootStrap框架引入提高效率
- Anguler/VueJS等前端框架引入，让前端从多页面应用变为单页面应用（SPA：Single Page Application），用户体验更好
MVC：Model View Controller
MVVM：ViewModel是View和Model的关系映射，View随着Model变化动态渲染。
Vue3重写了Vue2，性能更优，也支持了TypeScript
响应式系统：MVVM模式的核心特性，就是数据的双向绑定。Vue构建了一套响应式系统，可以实现声明式的数据绑定，从而在数据发生变化时自动渲染视图。
渐进式框架：Vue是渐进式的javascript框架，所谓渐进式，是指框架分层设计，每层可选，也可以替换成其他方案。核心是声明式渲染，其次是前端路由、状态管理，最外层是构建系统。

第1章 Vue.js概述 ​

1.1 Web前端技术的发展 ​

前端发展史 ​

SPA优点 ​

SPA缺点 ​

1.2 MV*模式 ​

1.2.1 MVC ​

1.2.2 MVP ​

1.2.3 MVVM ​

1.3 初识Vue.js ​

1.3.1 渐进式框架 ​

1.3.2 响应式系统 ​

1.3.3 体验Vue 3.0响应式系统 ​

1.4 Vue.js 3.0带来的新变化 ​

1.5 小结 ​