# h5-2103-三

**Repository Path**: htmhl/h5-2103-tris

## Basic Information

- **Project Name**: h5-2103-三
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-06-17
- **Last Updated**: 2021-06-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue

MVVM 架构

- M - Model，模型、数据
- V - View，视图
- VM - ViewModel，关联 Model 与 View，实现双向数据绑定，View 中的变化能够引起 Model 自动变化，Model 的变化也能引起 View 的自动重新渲染。

[官网](https://cn.vuejs.org/)

## 体验

### 兼容性

Vue **不支持** IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性（利用 Object.defineProperty() 实现数据劫持）。

### 安装

[开发版本](https://cn.vuejs.org/js/vue.js)：包含完整的警告和调试模式

[生产版本](https://cn.vuejs.org/js/vue.min.js)：删除了警告

### 声明式渲染

```js
const vm = new Vue({
    el: '#app', // View
    data: { // Model
        products: [],
        cart: []
    },
    methods: { // 方法
        addToCart() {},
        removeFromCart() {},
        add() {}
    }
})

console.log(vm.cart)
console.log(vm.$data.cart)
```

说明:

- data 中定义的所有数据（除以 `$` 或 `_` 开头的属性），会被直接挂载到创建的 Vue 实例下，即可以使用 `vm.cart` 获取在 data 中定义的 cart 数组对象
- $data 属性，表示的是创建 Vue 实例时指定的 data 数据对象。
- methods 中定义的各方法也会被直接挂载到 Vue 实例下。
- methods 中定义的各方法内部使用到的 this 通常指向的是当前创建的 `Vue` 实例本身

## 模板语法

### 插值

```
{{ expression }}
```

{{ }} 双花括号内部写的是 JS 表达式，通常使用的是 data 中绑定的属性，无论何时，只要 data 中绑定的对应属性数据发生了变化，页面 `{{ }}` 插值位置处就会**响应式更新**。

{{ }} 双花括号内部的表达式内容会被转义，以防止 XSS 攻击。

### 原始 html

由于 `{{}}` 会转义表达式内容，如果确实需要渲染 html 文本，可使用 `v-html` 指令来实现：

```html
<div v-html="html"></div>
```

**注意：**一般使用 `v-html` 来渲染可信 html 数据，通常不用其渲染用户输入的数据（因为可能导致 XSS 跨站脚本攻击）

### 属性绑定

不能在绑定标签中属性值时使用 `{{}}` 语法，而是需要使用 `v-bind` 指令（或其简写形式：`:`）

```html
<div v-bind:title="title">这是一段文本内容</div>
<div :title="title">这是一段文本内容</div>
```

### 指令(directive)

指令是在 html 标签中的一个有特殊函义的属性，其属性值为 JS 表达式。

- v-html：渲染 html 文本

- v-text：渲染纯文本

- v-bind：动态绑定属性，可简写为 `:`

- v-on：绑定事件处理程序，可简写为 `@`

- v-for：列表渲染，用于对数组或对象属性实现循环遍历（迭代）

  ```html
  <!-- item 表示数组中遍历到的当前元素 -->
  <div v-for="item in array">{{item}}</div>
  <div v-for="item of array">{{item}}</div>
  
  <!-- item 表示数组中遍历到的当前元素, index 表示对应元素的下标 -->
  <div v-for="(item, index) in array">{{ index }} - {{item}}</div>
  <div v-for="(item, index) of array">{{ index }} - {{item}}</div>
  
  <!-- value 表示对象中遍历到的各属性值 -->
  <div v-for="value in obj">{{value}}</div>
  <div v-for="value of obj">{{value}}</div>
  <!-- value 表示对象中遍历到的各属性值, key 表示对应属性名 -->
  <div v-for="(value, key) in obj">{{value}}</div>
  <div v-for="(value, key) of obj">{{value}}</div>
  <!-- value 表示对象中遍历到的各属性值, key 表示对应属性名, index 表示对象中属性的索引 -->
  <div v-for="(value, key, index) in obj">{{value}}</div>
  <div v-for="(value, key, index) of obj">{{value}}</div>
  ```

  列表渲染时，如果调用数组的**变异方法**（变更方法：调用这些方法后会改变原数组本身）修改数组元素，则页面会响应式更新，数组有7个变异方法：

  - push()/pop()
  - unshift()/shift()
  - splice()
  - sort()/reverse()

  如果调用的是非变异方法（不影响原数组本身的方法，如：slice()、filter()、concat()），又想将其返回的新数组在页面中响应式渲染，则可以使用替换数组的方式，即使用赋值运算符 `=` 重新为数组变量赋值。

- v-if、v-else-if、v-else：条件渲染

  v-if 满足条件的元素会被显示，不满足条件的元素会被隐藏，v-if 操作的是 DOM 树节点的添加或销毁

- v-show：条件渲染

  v-show 满足条件的元素会被显示，不满足条件的元素会被隐藏，v-show 操作的是节点的 CSS 样式中的 display（隐藏则为 `display: none`，显示则去掉 `display` 属性设置）
  
  **v-if 与 v-show 的区别：**
  
  `v-if` 有更高的切换开销，而 `v-show` 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 `v-show` 较好；如果在运行时条件很少改变，则使用 `v-if` 较好。
  
  **v-if 与 v-for 同时使用：**
  
  在 vue2.x 版本中，在同一个节点中同时使用 `v-if` 与 `v-for` 指令，`v-for` 优选级更高。**不推荐在同一个节点中同时使用这两个指令。**
  
- v-model：双向数据绑定，通常用于表单元素值的双向绑定。

  你可以用 `v-model` 指令在表单 `<input>`、`<textarea>` 及 `<select>` 元素上创建双向数据绑定。

  v-model 实际上是一个语法糖，在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

  - text 和 textarea 元素使用 `value` property 和 `input` 事件；
  - checkbox 和 radio 使用 `checked` property 和 `change` 事件；
  - select 字段将 `value` 作为 prop 并将 `change` 作为事件。
  
- v-slot：在 2.6.0 中新增的指令，用于父组件向子组件的插槽中分发内容，可简写为 `#`（v-slot 需要使用在组件或 `<template>` 标签内）

## 组件

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

### 定义组件

#### 创建组件选项对象：

```js
// 定义组件的选项对象
const todoHeaderOptions = {
    template: `
        <div>
            <h1>{{ title }}</h1>
            <h2>副标题</h2>
        </div>
    `,
    data() {
        return {
            title: '主标题'
        }
    },
    methods: {},
    components: {},
    props: []
}
```

template: 用于描述组件对应的视图布局结构，需要**注意**的是，如果布局结构中有多个元素节点，必须使用单个根元素节点包裹所有布局结构。

**（面试）为什么组件中的 data 要定义成函数？**

组件是可能被复用的（即根据一个组件结构，创建多个组件实例），如果 data 是普通对象，则多个复用的组件实例使用到的数据是指向同一个 data 对象，当其中某一个组件实例修改了数据后，其它组件实例也会受到影响，这与实际业务不符，所以应该每个组件实例都有自己独立的数据结构。将 data 设计为函数，则创建组件实例时，每创建一个组件实例，调用一次 data() 函数，在函数体内部返回一个新的对象（内存中会重新开辟空间保存新对象的数据），这样，多个组件实例间数据就是相互独立的，一个组件实例数据的修改不会影响到其它组件实例。

#### 注册组件

**全局注册**

```js
Vue.component('组件名字符串', 组件选项对象)
```

**局部注册**

局部注册组件是在父组件的选项对象中，使用 `components` 字段来定义：

```js
const todoListOptions = {
    template: `
		<ul>
			<todo-item></todo-item>
		</ul>
	`,
    components: {
    	TodoItem: todoItemOptions
	}
}
```

#### 使用组件

将组件名作为自定义标签名使用，注意：如果组件名定义时使用了驼峰命名，则在作为标签名使用时，需要转换为短横线命名规范。如：`TodoHeader` ==> `<todo-header>`

## 插槽

用于在父组件中使用子组件时，向子组件中派发孩子节点（自定义布局结构）。在定义组件时，如果希望组件使用者可以自定义某些部分的布局结构，可以使用 `<slot>` 节点作为占位符，以便在派发孩子节点时能够找到替换位置。

如果在组件的视图中有多个 `<slot>` 占位，可以使用 name 属性为每个 `<slot>` 命名（叫做命名插槽或具名插槽）

```html
{
      template: `
        <section class="hero is-primary">
          <div class="hero-body">
            <slot name="title">
              <p class="title">
                待办事项列表
              </p>
            </slot>
            <slot name="subtitle">
              <p class="subtitle">
                今日事，今日毕！
              </p>
            </slot>
          </div>
        </section>
      `
    }
```

使用插槽：

```html
    <todo-header>
      <h1 class="title" slot="title">主标题：2.6.0以前的写法</h1>
      <template #subtitle>
        <h2 class="subtitle">副标题：2.6.0以后推荐的写法，v-slot可简写为 #</h2>
      </template>
    </todo-header>
```



## Ref

用于对 DOM 元素或组件实例进行引用。

## 组件通信

### 父子组件

- 父传子：使用 props （属性）。在父组件中使用子组件时，通常通过动态绑定属性值向子组件传递数据，在子组件定义时，利用 `props` 字段声明其可接收到的属性。在 `props` 中声明的属性也会被自动挂载到组件实例下。
- 子传父：利用事件来传递数据。在父组件中使用子组件时，利用 v-on 绑定一个自定义事件（事件处理程序会使用到某些参数值来修改父组件中的数据），在子组件中需要传递数据时，触发在父组件中绑定的对应事件即可（利用 `$emit(事件名称, 传递的数据)` 方法来触发事件的执行）

### 跨组件跨层级

- 转换为父子关系
- event-bus：事件总线（不需要在每一层的组件中都添加事件机制来处理数据的传递）。利用的是 Vue 组件实例的事件特性（$on 用于注册事件监听，$emit 用于触发执行事件处理程序）。创建一个全局的空的 Vue 实例，在需要接收数据的组件中，调用 `$on()` 注册事件监听，在需要传递数据的组件中，调用 `$emit()` 触发事件（触发事件执行的同时，传递数据）。
- vuex：状态管理

## 计算属性和侦听器

计算属性是可以缓存的，**计算属性是基于它们的响应式依赖进行缓存的**，只在相关响应式依赖发生改变时它们才会重新求值。

**计算属性（computed） VS 方法（methods）：**

- 计算属性有缓存，方法没有缓存（计算属性其依赖项不改变时，不会重新求值，而方法每调用一次都会重新执行方法主体）

**计算属性（computed） VS 侦听属性（watch）：**

- 计算属性有缓存，侦听属性没有缓存
- 计算属性通常是由一个或多个依赖计算出一个新的值，而侦听属性通常是由一个数据的变化导致其它一个或多个数据的变化
- 计算属性中通常不包含副作用操作（比如网络请求），而侦听属性中可包含副作用操作

## 组件生命周期

生命周期：从组件创建开始，到组件销毁，所经历的整个过程。

生命周期钩子函数：是在生命周期过程中会被自动调用执行的函数，在这些函数中，我们可以添加一些额外需要执行的任务。

![生命周期图标](https://cn.vuejs.org/images/lifecycle.png)

- create 阶段
  - beforeCreate()
  - created()：实例创建后，这时，可以在 vue 实例中调用到 data 中设置的数据了。可以在这个生命周期钩子函数中发起网络请求。
- mount 阶段
  - beforeMount()
  - mounted()：在挂载结束后执行，这时，可以获取到渲染后的实体 DOM 元素了。
- update 阶段
  - beforeUpdate()
  - updated()
- destroy 阶段：
  - 通常会销毁的资源有：定时器、之前注册的事件监听、未完成的异步请求、websocket......
  - beforeDestroy()
  - destroyed()

## 数据劫持原理

vue2.x 中使用 `Object.defineProperty()` 来实现。