声明式和命令式

原生开发和 Vue 开发的模式和特点，我们会发现是完全不同的，这里其实涉及到两种不同的编程范式:

在原生的实现过程中，我们是如何操作的呢?

我们每完成一个操作，都需要通过JavaScript编写一条代码，来给浏览器一个指令;

这样的编写代码的过程，我们称之为命令式编程;

在早期的原生 JavaScript 和 jQuery 开发的过程中，我们都是通过这种命令式的方式在编写代码的;

在 Vue 的实现过程中，我们是如何操作的呢?

我们会在 createApp 传入的对象中声明需要的内容，模板 template、数据 data、方法 methods;
这样的编写代码的过程，我们称之为是声明式编程;
目前 Vue、React、Angular、小程序的编程模式，我们称之为声明式编程;

MVVM 模型

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

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

通常情况下，我们也经常称 Vue 是一个 MVVM 的框架。
Vue 官方其实有说明，Vue 虽然并没有完全遵守MVVM的模型，但是整个设计是受到它的启发的。

指令

1
2
3
4

<!-- 绑定一个表达式 -->
<button v-on:click="counter++"></button>
<!-- 绑定到一个methods方法中 -->
<button v-on:click="btnClick">按钮1</button>

1
2

<!-- v-on的语法躺 -->
<button @click="btnClick">按钮2</button>

1
2

<!-- 绑定鼠标移动事件 -->
<button @mousemove="mouseMove">div的区域</button>

1
2

<!-- 绑定对象 -->
<button v-on="{click: btnClick, mousemove: mouseMove}">特殊按钮3</button>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<template id="my-app">
   <!-- 1.普通的绑定方式 -->
   <div :class="classname">{{message}}</div>
   <!-- 2.对象绑定 -->
   <!-- 动态切换class是否加入: {类(变量): boolean(true/false)} -->
   <div class="anzhiyu" :class="{nba: true, 'james': true}"></div>
   <!-- 3.案例练习 -->
   <div :class="{'active': isActive}">哈哈哈</div>
   <button @click='toggle'>切换</button>
   <!-- 4.对象绑定-->
   <div :class="classObj">哈哈哈哈</div>
   <!-- 4.从methods获取-->
   <div :class="getClassObj()">呵呵呵</div>
</template>

1
2
3
4
5
6
7
8

<template id="my-app">
   <!-- 1.直接传入一个数组。-->
   <div :class="['anzhiyu',nba]">MaMal@</div>
   <!-- 2.数组中也可以使用三元运算符或者绑定变量 -->
   <div :class="['anzhiyu', nba, isActive ? 'active' : '']">呵呵呵</div>
   <!-- 3.数组中也可以使用对象语法 -->
   <div :class="['anzhiyu',nba,{'actvie': isActive }]">嘻嘻嘻</div>
</template›

1
2
3
4
5
6
7
8
9
10
11
12
13

<template id="my-app">
  <h2>电影列表</h2>
  <ul>
    <li v-for="item in movies">{{ item }}</li>
  </ul>
</template>

<template id="my-app">
  <h2>电影列表-有索引</h2>
  <ul>
    <li v-for="(movie, index) in movies">{{ index + 1 }} - {{ movie }}</li>
  </ul>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<template id="my-app">
  <!-- 1.遍历对象 -->
  <ul>
    <li v-for="(value, key, index) in info">{{value}}-{{key}}-{{index}}</li>
  </ul>

  <!-- 2.遍历字符串(iterable) -->
  <ul>
    <li v-for="item in message">{{item}}</li>
  </ul>

  <!-- 3.遍历数字 -->
  <ul>
    <li v-for="item in 100">{{item}}</li>
  </ul>
</template>

template 元素

类似于v-if，你可以使用 template 元素来循环渲染一段包含多个元素的内容:

我们使用 template 来对多个元素进行包裹，而不是使用 div 来完成;

1
2
3
4
5
6
7
8
9
10

<template id="my-app">
  <ul>
    <!-- 如果div没有实际的意义, 那么可以使用template替换 -->
    <template v-for="(value, key) in info">
      <li>{{key}}</li>
      <li>{{value}}</li>
      <hr />
    </template>
  </ul>
</template>

数组更新检测

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括:

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

替换数组的方法

• 上面的方法会直接修改原来的数组;
• 但是某些方法不会替换原来的数组，而是会生成新的数组，比如 filter()、concat() 和 slice();

v-for 中的 key 是什么作用?

在使用 v-for 进行列表渲染时，我们通常会给元素或者组件绑定一个 key 属性。

这个 key 属性有什么作用呢?我们先来看一下官方的解释:

• key 属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes;
• 如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法;
• 而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除/销毁 key 不存在的元素;

官方的解释对于初学者来说并不好理解，比如下面的问题:

什么是新旧 nodes，什么是 VNode?

• 没有 key 的时候，如何尝试修改和复用的?
• 有 key 的时候，如何基于 key 重新排列的?

认识 VNode

我们先来解释一下 VNode 的概念:

• 因为目前我们还没有比较完整的学习组件的概念，所以目前我们先理解 HTML 元素创建出来的 VNode; VNode 的全称是 Virtual Node，也就是虚拟节点;
• 事实上，无论是组件还是元素，它们最终在 Vue 中表示出来的都是一个个 VNode;
• VNode 的本质是一个 JavaScript 的对象;

1

<div class="title" style="font-size: 30px; color: red;">哈哈哈</div>

1
2
3
4
5
6
7
8
9
10
11

const vnode = {
  type: "div",
  props: {
    class: "title",
    style: {
      "font-size": "30px",
      color: "red",
    },
  },
  children: "哈哈哈",
};

虚拟 DOM

如果我们不只是一个简单的 div，而是有一大堆的元素，那么它们应该会形成一个 VNode Tree:

插入 F 的案例

我们先来看一个案例:这个案例是当我点击按钮时会在中间插入一个 f;

我们可以确定的是，这次更新对于 ul 和 button 是不需要进行更新，需 要更新的是我们 li 的列表:

在 Vue 中，对于相同父元素的子元素节点并不会重新渲染整个列表;

因为对于列表中 a、b、c、d 它们都是没有变化的;

在操作真实 DOM 的时候，我们只需要在中间插入一个 f 的 li 即可;

那么 Vue 中对于列表的更新究竟是如何操作的呢?

Vue 事实上会对于有 key 和没有 key 会调用两个不同的方法;
有 key，那么就使用 patchKeyedChildren 方法;
没有 key，那么久使用 patchUnkeyedChildren 方法;

Vue 源码对于 key 的判断

没有 key 的操作(源码)

没有 key 的过程如下

我们会发现上面的 diff 算法效率并不高:

• c 和 d 来说它们事实上并不需要有任何的改动;
• 但是因为我们的 c 被 f 所使用了，所有后续所有的内容都要一次进行改动，并且最后进行新增;

有 key 执行操作(源码)

有 key 的 diff 算法(一)

第一步的操作是从头开始进行遍历、比较:

• a 和 b 是一致的会继续进行比较;

• c 和 f 因为 key 不一致，所以就会 break 跳出循环;
  

第二步的操作是从尾部开始进行遍历、比较:

有 key 的 diff 算法(二)

第三步是如果旧节点遍历完毕，但是依然有新的节点，那么就新增节点:

第四步是如果新的节点遍历完毕，但是依然有旧的节点，那么就移除旧节点:

有 key 的 diff 算法(三)

第五步是最特色的情况，中间还有很多未知的或者乱序的节点:

所以我们可以发现，Vue 在进行 diff 算法的时候，会尽量利用我们的 key 来进行优化操作:

• 在没有 key 的时候我们的效率是非常低效的;
• 在进行插入或者重置顺序的时候，保持相同的 key 可以让 diff 算法更加的高效;