前端开发前端 vue

vue朝花夕拾01

安知鱼2022-09-092023-07-31

声明式和命令式

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

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

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

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

我们每完成一个操作，都需要通过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的模型，但是整个设计是受到它的启发的。

指令

点击查看不常用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 来监听一下点击的事件:

<!-- 绑定一个表达式 -->
<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 调用时，需要注意参数问题

情况一:如果该方法不需要额外参数，那么方法后的()可以不添加。
但是注意:如果方法本身中有一个参数，那么会默认将原生事件 event 参数传递进去
情况二:如果需要同时传入某个参数，同时需要 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。

<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 列表

<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 基本使用

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

<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 支持的类型

v-for 也支持遍历对象，并且支持有一二三个参数:
- 一个参数: "value in object";
- 二个参数: "(value, key) in object";
- 三个参数: "(value, key, index) in object";
v-for 同时也支持数字的遍历:
- 每一个 item 都是一个数字;
v-for 也可以遍历其他可迭代对象(Iterable)

<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 来完成;

<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>

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