Vue3 - 邂逅vue

coderklaus
2,351 阅读6分钟

简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式 JavaScript框架，全称是Vue.js或者Vuejs

它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型

帮助你高效地开发用户界面，无论任务是简单还是复杂

用户界面

用户界面（User Interface，UI）是指用户与计算机系统进行交互的界面，它是连接用户和计算机系统之间的桥梁

UI界面可以是网页，也可以是其他形式的图形用户界面（GUI）、命令行界面（CLI）、应用程序界面等

在前端应用中，用户界面在大多数情况下，指代的就是网页

渐进式（Progressive）

渐进式设计理念指的是在软件开发中，通过逐步增强（progressively enhancing）软件的功能和用户体验，使得软件可以适应不同的需求和环境。

在前端开发中，渐进式框架通常会将框架的不同功能模块拆分为多个小模块，以便于用户根据自己的需求来逐步引入所需的模块。这种模块化的设计方式也使得框架更加灵活，可以更好地适应不同的应用场景。

在渐进式框架中，通常会提供核心库和生态环境。核心库提供了基础的功能和API，而生态环境中包括官方提供的库和第三方库，用户可以根据需要自由添加其他功能模块和库，以构建自己所需的应用程序。

常见的渐进式框架有Vue.js、React、Angular等，它们都采用了模块化的设计方式，并提供了丰富的生态环境，使得开发者可以根据自己的需求来选择所需的功能模块和库，以构建高效、灵活、可维护的应用程序。

框架 vs 库

框架和库都是开发中常用的概念，但它们有着不同的设计目的和使用方式。

框架的设计目的是为了提供一整套的解决方案，帮助开发者快速构建特定领域内的应用程序

框架通常包括特定的编程范式、开发模型、工具链等，并提供了一套规范和预设的语法和规则来实现开发者的业务逻辑

使用框架的开发者需要按照框架的规定来编写代码，因此框架的使用具有一定的侵入性，但是可以获得较高的开发效率和可维护性

相比之下，库则是提供某个具体功能的代码集合

开发者可以根据需求自由组合和调用这些功能

库的使用具有很高的灵活性和可定制性，因为开发者可以只使用库中的部分功能，而不需要完全按照库的规定来编写代码

因此，库的使用相对而言较为灵活，但也需要开发者有一定的编程经验和能力来合理地使用这些功能。

特点

  1. 更好的性能
  2. 更小的包体积
  3. 更好的TypeScript集成
  4. 更优秀的API设计

使用方式

  1. 在⻚面中通过CDN的方式来引入
  2. 下载Vue的JavaScript文件，并且自己手动引入
  3. 通过npm包管理工具安装使用它
  4. 直接通过Vue CLI创建项目，并且使用它

初体验

Vue的本质就是一个JavaScript的库，在项目中可以引入并且使用它

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入后 会全局挂载 一个 Vue 对象 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <!--
		vue会将渲染后的内容挂载到挂载点下
		而不会挂载到别的元素下
		挂载点下的元素可以通过vue来进行开发
		而其它元素使用原生方式进行开发或使用React来进行开发
		这就是vue渐进式的一种体现形式
	-->
  <header>header</header>
  <!-- 挂载点 -->
  <div id="app"></div>
  <footer>footer</footer>

  <script>
    // 通过createApp方法创建对应App实例
    // createApp方法的参数为根组件实例对象
    // 在vue中每一个组件的实例对象本质都是一个原生JS对象
    const app = Vue.createApp({
      // template是我们所需要渲染的界面模板
      // 值一般为html格式字符串
      template: `<div>Hello Vue</div>`
    })

    // 通过mount方法将vue解析后的结果挂载到挂载点元素中
    // 参数为 css selector 字符串
    // mount方法会通过document.querySelector的方式查找到对应的挂载点
    app.mount('#app')
  </script>
</body>
</html>

template的抽取

template的查找规则如下:

  1. 在createApp方法传入的配置对象中，如果template属性传入了不是以#开头的字符串,

    则自动将template属性中的值作为字符串形似的模板进行解析

  2. 如果对应template属性的值是以#开头，会以template属性值作为元素的id值

    并将对应元素中的内容作为模板进行解析

  3. 如果没有template属性，则自动将挂载点中的内容作为模板去进行解析

无论使用哪种方式解析模板，最后渲染出的内容一定会被挂载到挂载点中

并替换挂载点中原本存在的原本内容

<div id="app"></div>

<template id="template">
  <button @click="() => changeCount(-1)">decrement</button>
  <h1>{{ count }}</h1>
  <button @click="() => changeCount(1)">increment</button>
</template>

<script>
  Vue.createApp({
    template: '#template',
    data() {
      return {
        count: 0
      }
    },
    methods: {
      changeCount(step) {
        this.count += step
      }
    },
  }).mount('#app')

<div id="app">
  <button @click="() => changeCount(-1)">decrement</button>
  <h1>{{ count }}</h1>
  <button @click="() => changeCount(1)">increment</button>
</div>

<script>
  Vue.createApp({
    data() {
      return {
        count: 0
      }
    },
    methods: {
      changeCount(step) {
        this.count += step
      }
    },
  }).mount('#app')

命令式编程 vs 声明式编程

命令式编程要求开发人员将需求转换为指令序列，并详细指定计算机执行每个步骤

这种方式需要开发人员亲力亲为，关注每个细节，并在程序中处理各种状态和边界情况

声明式编程的核心思想是将程序的目标状态或结果描述出来(声明，定义)，而不是明确地控制程序的执行流程和具体实现细节

在声明式编程中，我们只需描述程序应该达到的结果和需求，而具体的操作和实现细节则可以交给JavaScript或框架来完成

这种方式通常使用抽象的语法和组合规则，以便开发人员更容易理解和表达所需的结果

实际上，声明式编程可以视为命令式编程的一种高级形式

在命令式编程的基础上增加了一层抽象，可以提高代码的可读性和可维护性，同时也减轻了程序员的工作负担

MVVM

MVC和MVVM都是一种软件的体系结构

在MVC和MVVM中，view和model都不是直接进行沟通的，而是通过controller或者viewModel进行沟通

  • MVC是Model – View –Controller的简称，是在前期被使用非常框架的架构模式，比如iOS、原生前端
  • MVVM是Model-View-ViewModel的简称，是目前非常流行的架构模式

通常情况下，我们也经常称Vue是一个MVVM的框架

image.png

Vue 在整个过程中 充当的就是ViewModel

  1. 将Model中的数据 自动绑定到 View 这个过程，并且到数据发生改变以后可以进行界面自动更新被称之为 Data Bindings
  2. 当View触发某些事件的时候，会自动去执行Model中绑定好的对应方法，这个过程被称之为DOM Listeners
avatar
文章
阅读
粉丝