声明式和命令式

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

命令式编程关注的是 how to do自己完成整个 how 的过程;

声明式编程关注的是 what to do, 由框架(机器)完成 how的过程;

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

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

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

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

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

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

MVVM 模型

MVCMVVM 都是一种软件的体系结构

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

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

指令

点击查看不常用vue指令

v-once用于指定元素或者组件只渲染一次

当数据发生变化时,元素或者组件以及其所有的子元素将视为静态内容并且跳过

该指令可以用于性能优化

用于更新元素的 textContent

如果我们希望这个内容被 Vue 可以解析出来,那么可以使用 v-html 来展示

v-pre用于跳过元素和它的子元素的编译过程,显示原始的 Mustache 标签:

跳过不需要编译的节点,加快编译的速度

这个指令保持在元素上直到关联组件实例结束编译
CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到组件实例准备完毕。

v-on 支持修饰符,修饰符相当于对事件进行了一些特殊的处理:

  • stop - 调用  event.stopPropagation()。
  • prevent - 调用  event.preventDefault()。
  • capture - 添加事件侦听器时使用 capture 模式。
  • self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
  • {keyAlias} - 仅当事件是从特定键触发时才触发回调。
  • once - 只触发一次回调。
  • left - 只当点击鼠标左键时触发。
  • right - 只当点击鼠标右键时触发。
  • middle - 只当点击鼠标中键时触发。
  • passive - { passive: true }  模式添加侦听器
点击查看常用vue指令

我们可以使用 v-on 来监听一下点击的事件:

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

v-on:click 可以写成@click,是它的语法糖写法:

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>

v-on 参数传递

当通过 methods 中定义方法,以供 @click 调用时,需要注意参数问题

  1. 情况一:如果该方法不需要额外参数,那么方法后的()可以不添加。
    但是注意:如果方法本身中有一个参数,那么会默认将原生事件 event 参数传递进去

  2. 情况二:如果需要同时传入某个参数,同时需要 event 时,可以通过 $event 传入事件。

v-if 的渲染原理:

  • v-if 是惰性的;
  • 当条件为 false 时,其判断的内容完全不会被渲染或者会被销毁掉;
  • 当条件为 true 时,才会真正渲染条件块中的内容;

v-show 和 v-if 的用法看起来是一致的,也是根据一个条件决定是否显示元素或者组件:

首先,在用法上的区别:

  • v-show 是不支持 template;
  • v-show 不可以和 v-else 一起使用;

其次,本质的区别:

  • v-show 元素无论是否需要显示到浏览器上,它的 DOM 实际都是有存在的,只是通过 CSS 的 display 属性来进行切换;
  • v-if 当条件为 false 时,其对应的原生压根不会被渲染到 DOM 中;

开发中如何进行选择呢?

  • 如果我们的原生需要在显示和隐藏之间频繁的切换,那么使用 v-show;
  • 如果不会频繁的发生切换,那么使用 v-if;

绑定 class – 对象语法
对象语法: 我们可以传给 :class (v-bind:class 的简写) 一个对象,以动态地切换 class。

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>

绑定 class – 数组语法
数组语法:我们可以把一个数组传给 :class,以应用一个 class 列表

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›

绑定 style 介绍

v-for 基本使用

  1. v-for 的基本格式是 "item in 数组":
    • 数组通常是来自 data 或者 prop, 也可以是其他方式;
    • item 是我们给每项元素起的一个别名,这个别名可以自定来定义;
  2. 我们知道,在遍历一个数组的时候会经常需要拿到数组的索引:
    • 如果我们需要索引,可以使用格式: "(item, index) in 数组";
    • 注意上面的顺序:数组元素项 item 是在前面的,索引项 index 是在后面的;
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>

v-for 支持的类型

  1. v-for 也支持遍历对象,并且支持有一二三个参数:

    • 一个参数: "value in object";
    • 二个参数: "(value, key) in object";
    • 三个参数: "(value, key, index) in object";
  2. v-for 同时也支持数字的遍历:

    • 每一个 item 都是一个数字;
  3. v-for 也可以遍历其他可迭代对象(Iterable)

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: "哈哈哈",
};

vnode

虚拟 DOM

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

虚拟 DOM

插入 F 的案例

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

案例

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

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

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

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

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

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

Vue 源码对于 key 的判断

Vue 源码对于 key 的判断

没有 key 的操作(源码)

没有 key 的操作(源码)

没有 key 的过程如下

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

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

没有 key 的过程新增

有 key 执行操作(源码)

有 key 执行操作(源码)

有 key 的 diff 算法(一)

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

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

  • c 和 f 因为 key 不一致,所以就会 break 跳出循环;
    从头开始进行遍历、比较

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

有 key 的 diff 算法(二)

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

有 key 的 diff 算法(三)

第五步是最特色的情况,中间还有很多未知的或者乱序的节点:
未知的或者乱序的节点
所以我们可以发现,Vue 在进行 diff 算法的时候,会尽量利用我们的 key 来进行优化操作:

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