初识Vue

吃一口甜
78 阅读5分钟

关于框架

为什么要学习流行框架

企业为了提高开发效率：在企业中，时间就是效率，效率就是金钱；企业中，使用框架，能够提高开发的效率。

提高开发效率的发展历程：

原生JS → Jquery之类的类库 → 前端模板引擎 → Angular.js / Vue.js（能够帮助我们减少不必要的DOM操作；提高渲染效率；双向绑定的概念）。

2、在Vue中，一个核心的概念就是：数据驱动，避免手动操作DOM元素。这样的话，可以让前端程序员可以更多的时间去关注数据的业务逻辑，而不是关心 DOM 是如何渲染的了。

框架和库的区别

框架：

框架是一套完整的解决方案。

对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。但是优点也很明显：功能完善、提供了一整套的解决方案。

库（插件）：

只是提供某一个小功能。

对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。

举例：

  • 从 Jquery切换到 Zepto
  • 从 EJS 切换到 art-template

Vue框架采用的模式：MVVM模式

Vue框架采用的模式是MVVM模式：响应式布局。

MVVM（Model-View-ViewModel）是一种软件设计模式，由微软WPF（用于替代WinFrom，以前就是用这个技术开发桌面应用程序的）和 Silverlight （类似于 Java Applet，简单点说就是在浏览器上运行 WPF）的架构师 Ken Cooper和 Ted Peters开发，是一种简化用户界面的事件驱动编程方式。由 John Gossman（同样也是WPS 和 Sliverlight 的架构师）与2005年在他的博客上发表。

1、MVVM模式源自于经典的 MVC （Model-View-Controller）模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用。其作用如下：

  • 该层向上与视图层进行双向数据绑定
  • 向下与Model层通过接口请求进行数据交互

2、MVVM模式（Model-View-ViewModel）与MVC模式相比，不在局限于数据单向绑定，而是能够实现数据双向绑定、同步刷新。

原理：

View层和Model层是通过ViewModel层建立联系的。用户在View层的操作，通过数据绑定传达给ViewModel层，进而更新Model层。Model层更新之后，ViewModel层也自动随之变化，对View层重新渲染更新。

image-20230301104659611

  • Model：负责数据存储
  • View：负责页面展示
  • ViewModel：负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示。

前端的各种框架

什么是前端框架

  • 前端框架是用于开发前端的平台。它通常包含一些构建文件、将数据与 DOM 元素关联、设置组件样式和发出 AJAX 请求的方式。
  • 前端 Web 开发是通过 CSS 、HTML 、和 JavaScript 将数据转换为图形界面的过程，以便用户可以观察这些数据并与之建立联系。
  • 前端框架的主要用途是它们创建交互式工具和开发响应式网站。它构建一致的产品以获得流量，并升级移动和Web应用程序的外观和感觉。

前端框架Vue和React

Vue：Vue是一套用于构建用户界面的渐进式 JavaScript 框架。它是可以自底向上逐层应用，Vue的核心库只关注视图层，上手简单而且还便于与第三方库进行整合。Vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。适用场景丰富的 Web 前端框架。

React：React是一个用于构建用户界面的 JavaScript 库，是 Facebook 开发和创建的开源框架，也是当今最为流行的 JavaScript 前端框架。作为一个前端框架，React之所以与众不同，是因为它的虚拟文档对象模型(DOM)展现了出色的功能。

Vue 和 React 的相同点

  • 利用虚拟DOM实现快速渲染
  • 轻量级
  • 响应式组件
  • 支持服务器渲染
  • 易于集成路由工具、打包工具以及状态管理工具

PS：Vue 在国内很受欢迎；React在国内和国外都很受欢迎，适合做大型网站。

什么是虚拟 DOM

概念：虚拟DOM其实就是用一个原生的JS对象去描述一个DOM节点，实际上它只是对真实 DOM的一层抽象。最终可以通过一系列操作使这棵树映射到真实环境上。

相当于在 JS 与 DOM之间做了一个缓存，利用patch（diff算法）对比新旧虚拟DOM记录到一个对象中按需更新，最后创建真实的DOM。

传统的Web开发，是利用 jQuery操作DOM，这是非常耗资源的。

我们可以在 JS 的内存里构建类似于DOM的对象，去拼接数据，拼接完整后，把数据整体解析，一次在插入到html里去。这就形成了虚拟DOM。

Vue1.0没有虚拟DOM，Vue2.0改成了基于虚拟DOM。

一、Vue框架

1、发展历史

相关网址

2、Vue简介

Vue（读音/vju/，类似于view）是一套用于构建用户界面的渐进式JavaScript 框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库（如：vue-router，vue-resource，vue x）或既有项目整合。

Vue 关注的是你把数据给我之后，我怎么把它变成界面。（构建用户界面）

image-20230301224201155

3、Vue的特点

  • 采用组件化模式，提高代码复用率、且让代码更好维护。

    image-20230302100158108

  • 声明式编码，让编码人员无需直接操作DOM，提高开发效率。

    image-20230302103518570

  • 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。

    image-20230227202424884

4、学习Vue之前要掌握的JavaScript基础知识

  • ES6语法规范
  • ES6模块化
  • 包管理器
  • 原型、原型链
  • 数组常用方法
  • axios
  • promise
  • .......
avatar
文章
阅读
粉丝