Vue基本介绍、声明式渲染、组件化、MVVM模式及Vue为什么要使用虚拟Dom

最新推荐文章于 2023-09-22 00:22:34 发布

月光晒了很凉快

最新推荐文章于 2023-09-22 00:22:34 发布

阅读量1k

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45605541/article/details/126651832

版权

Vue 专栏收录该内容

38 篇文章 4 订阅

订阅专栏

文章目录

1. Vue介绍
2. 声明式渲染
3. Vue的组件化
4. MVVM模式
5. Vue为什么要使用虚拟Dom

1. Vue介绍

概述：

Vue.js是一套构建用户界面的渐进式框架。Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

渐进式：一步一步，不是说你必须一次把所有的东西都用上。

自底向上设计：是一种设计程序的过程和方法，就是先编写出基础程序段，然后再逐步扩大规模、补充和升级某些功能，实际上是一种自底向上构造程序的过程。

Vue全家桶：

在这里插入图片描述

Vue从设计角度来讲，虽然能够涵盖这张图上所有的东西，但是你并不需要一上手就把所有东西全用上，都是可选的。声明式渲染和组件系统是Vue的核心库所包含内容，而路由、状态管理、构建工具都有专门解决方案。这些解决方案相互独立，你可以在核心的基础上任意选用其他的部件，不一定要全部整合在一起。

Vue特点：

易用

已经学会了HTML、CSS、Javascript，就可以使用Vue了。
灵活

不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
高效

20kB min+gzip 运行大小，超快虚拟Dom，最省心的优化。

2. 声明式渲染

概述：

Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

语法：

# html
<div id="app">
  <!-- 渲染 Hello Vue -->
  {{ message }}
</div>
# js
var vm = new Vue({
  // 选择真实html中的 选择器
  el: '#app',
  // 数据源 -- 声明模板变量所在的位置
  data(): {
    // 返回一个对象
	return {
		// 声明一下变量，这里声明的变量将会在双花括号处（模板语法）渲染出来
	    message: 'Hello Vue!'
	}
  }
})

3. Vue的组件化

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。几乎任意类型的应用界面都可以抽象为一个组件树。

正是因为有了组件化的思想，前端的跨平台得到了实现。所谓组件，就是对象，每一个组件都是一个 js 对象，每一个 js 对象都可以编译成 html、Android、iOS 或者桌面端上的元素。

例如，这里有一个 html 元素和一个组件（伪代码）：

<h3>aaaaa</h3>

<script>
    // 有一个组件 
    var component = {
        // View h3
        tag: 'h3',
        props: {style:'xxx'},
        children: 'bbbb'
    }
</script>

上述代码可以理解为，我们会通过 Vue 将 script 中的 js 对象（即组件），编译成了 html 中的 h3 元素，而这里的 h3 元素却不一定是 html 中的 h3，h3 可以根据不同的平台，生成不同的标签，展现出不同的作用。比如在小程序中，这里的h3 就可以被 View 标签所替代。

补充：

因为组件是一个对象，所以它还可以通过 Dom 比对（diff）对 Dom 元素进行批量操作，因此不用像传统 js 一样频繁操作 Dom。
组件可以进行封装，实现代码复用。

下图可以很好的展示页面与组件之间的关系：

在这里插入图片描述

界面根据Dom结构（js对象）进行拆分，形成树状结构有如下优点：

结构清晰。
树状结构具有很强的复用性，我需要哪个组件，就把哪个组件（对应图中的每一个立方体）单拎出来用，因为组件之间是独立的。
高效，便于比对，即哪些数据数据变了可以立刻做出响应。界面中修改数据时，不需要层层寻找，找到对应的Dom元素再进行修改，我们可以根据组件的编号，找到相对应的组件进行数据的修改。
跨平台

4. MVVM模式

概述：

MVVM 是一种数据驱动模式。即将数据和视图双向绑定，我们既可以通过修改视图来修改数据，也可以通过修改数据来修改视图。

vue使用MVVM响应式编程模型，避免直接操作DOM , 降低DOM操作的复杂性。

在这里插入图片描述

MVVM：页面输入改变数据，数据改变影响页面数据展示与渲染

M（model）：普通的javascript数据对象

V（view）：前端展示页面

VM（ViewModel）：用于双向绑定数据与页面，对于我们的课程来说，就是vue的实例

传统界面的数据处理：

我们想要设置 input 标签中的 value 值，在传统界面的数据处理中该怎么做？

<input type="text" id="username">

<script>
    // 数据源
    const data = {
        name: '张三'
    }
    // 1. 获取dom中的元素
    const username = document.getElementById('username')
    // 2. 修改属性
    username.value = data.name
</script>

在这里插入图片描述

如果我们想要通过修改视图上 input 框中的值，从而使得数据源中的数据发生改变，又该怎么做？

<input type="text" id="username">

<script>
    // 数据源
    const data = {
      name: '张三'
    }

    // 1. 获取dom中的元素
    const username = document.getElementById('username')
    // 2. 修改属性
    username.value = data.name

    // 页面改变导致数据改变
    /* username.addEventListener('input', function () {
      data.name = this.value
    }) */
    // 箭头函数的如果使用，则注意this的指向问题
    username.addEventListener('input', evt => {
      data.name = evt.target.value
    })

</script>

在这里插入图片描述

以上，是传统方式通过视图改变数据的操作方法。传统方式通过事件来改变数据源中的数据

下面代码中，我们想要更改 h3 标签中的内容，传统方式该怎么做呢？

<h3 id="title"></h3>

<script>
    // 数据源
    const data = {
        name: '张三'
    }
    const title = document.getElementById('title')
    // 数据改变导致页面改变
    title.textContent = data.name
</script>

在这里插入图片描述

以上，就是传统方式通过数据改变视图的方法。

Vue 中 MVVM 模式下，对数据的处理（双向绑定）：

<!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>vue学习使用</title>
  <!-- 第1步： 引入vue库文件 -->
  <script src="./js/vue.js"></script>
</head>

<body>

  <!-- 第2步：根容器，js对象转为真实的html后，在放在网页的什么位置中  挂载点 -->
  <!-- 挂载点可以写多个，但是在工作中一般只有一个 -->
  <div id="app">
    <!-- 第4步：使用 -->
    <!-- 模板语法/插值表达式/mustcache模板名称/小胡子语法 -->
    <!-- title 它就是在vue实例化配置data属性中的数据 -->
    <h3>{{ title }}</h3>

    <!-- 过改变页面来改变数据（Vue方式） -->
    <!-- v-model，语法糖 -->
    <input type="text" v-model="title">
  </div>

  <!-- 第3步：实例化vue -->
  <script>
    const vm = new Vue({
      // vue处理完成数据展示在页面中的挂载点dom，可以理解为选择器
      el: '#app',
      // vue2中，唯一一个地方可以把data写成对象地方，就是在实例化vue类时
      // 声明vue要渲染的数据
      data: {
        title: 'hello vue'
      }
    })
  </script>

</body>

</html>

在控制台通过命令 vm.$data.title='asf'; 即可通过该改变数据来改变页面：

在这里插入图片描述

通过语法糖，在 input 框中改变视图，从而实现通过视图改变数据：

在这里插入图片描述

以上就是分别用传统方式和Vue（MVVM模式）方式，来实现数据与视图双向绑定（即我可以通过修改视图改变数据，也可以通过修改数据改变视图）的操作。

MVVM 模式的优点：

低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

5. Vue为什么要使用虚拟Dom

用传统的开发模式，原生JS或JQ操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。在一次操作中，我需要更新10个DOM节点，浏览器收到第一个DOM请求后并不知道还有9次更新操作，因此会马上执行流程，最终执行10次。例如，第一次计算完，紧接着下一个DOM更新请求，这个节点的坐标值就变了，前一次计算为无用功。计算DOM节点坐标值等都是白白浪费的性能。即使计算机硬件一直在迭代更新，操作DOM的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户体验。

Web界面由DOM树(树的意思是数据结构)来构建，当其中一部分发生变化时，其实就是对应某个DOM节点发生了变化，虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。所以，用JS对象模拟DOM节点的好处：页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制，从而提高性能。

月光晒了很凉快

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue基本介绍、声明式渲染、组件化、MVVM模式及Vue为什么要使用虚拟Dom

Vue.js是一套构建用户界面的渐进式框架。Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。渐进式：一步一步，不是说你必须一次把所有的东西都用上。自底向上设计：是一种设计程序的过程和方法，就是先编写出基础程序段，然后再逐步扩大规模、补充和升级某些功能，实际上是一种自底向上构造程序的过程。
复制链接

扫一扫

专栏目录