luoleiself's blog

全局 API

全局 API 应用实例

• Vue.config -> app.config
• Vue.config.productionTip -> 移除
• Vue.config.ignoreElements -> app.config.compilerOptions.isCustomElement
• Vue.component -> app.component
• Vue.directive -> app.directive
• Vue.mixin -> app.mixin
• Vue.use -> app.use
• Vue.prototype -> app.config.globalProperties
• Vue.extend -> 移除

全局 API Treeshaking

• Vue.nextTick() -> nextTick()
• Vue.observable -> reactive()
• Vue.version -> version
• Vue.compile(仅完整构建版本)
• Vue.set(仅兼容构建版本)
• Vue.delete(仅兼容构建版本)

模板指令

v-model

参见 vue3.md 的 v-model 指令部分

key 使用改变

对于 v-if, v-else-if, v-else 的各分支项 key 将不再是必须的, Vue 会自动生成唯一的 key

v-if 和 v-for 优先级

两者作用于同一个元素上时，v-if 会拥有比 v-for 更高的优先级

v-bind 合并行为

v-bind 的绑定顺序会影响渲染结果

• vue 2.x 独立绑定的 attribute 会覆盖 v-bind 中的 attribute
• vue 3.x 根据声明顺序决定如何被合并

1
2
3
4
5
6
7
8
9

<!-- 模板 -->
<div id="red" v-bind="{ id: 'blue' }"></div>
<!-- 结果 -->
<div id="red"></div>

<!-- 模板 -->
<div v-bind="{ id: 'blue' }" id="red"></div>
<!-- 结果 -->
<div id="red"></div>

状态码

• 100 Continue 请求继续

• 101 Switching Protocols 协议切换，通过 upgrade 消息头切换协议

• 102 Processing 继续执行

• 200 OK 请求成功

• 204 No Content 没有响应实体

• 206 Partial Content 服务器处理部分 GET 请求

• 301 Moved Permanently 资源永久移动

• 302 Move Temporarily 资源临时移动

• 303 See Other 参见其他

• 304 Not Modified 资源没有改动

• 305 Use Proxy 使用代理

• 307 Temporary Redirect 资源临时从不同的 URI 响应

• 400 Bad Request 错误的请求

• 401 Unauthorized 需要验证

• 403 Forbidden 服务器拒绝执行

• 404 Not Found 资源未找到

• 405 Method Not Allowed 请求方法不能用于相应资源

• 408 Request Timeout 请求超时

• 413 Request Entity Too Large 请求体超长

• 415 Unsupported Media Type 不支持的媒体类型

• 500 Internal Server Error 服务器错误

• 502 Bad Gateway 网关错误

• 504 Gateway Timeout 网关超时

• 505 HTTP Version Not Supported 服务器不支持的使用的 HTTP 版本

URL 编码常用

• %21 !
• %22 “
• %23 #
• %24 $
• %25 %
• %26 &
• %27 ‘
• %28 (
• %29 )
• %2F /
• %30-9 0..9
• %3A :
• %3B ;
• %3C <
• %3D =
• %3E >
• %3F ?
• %40 @
• %41 A

MutationObserver

MutationObserver 接口提供监视对 DOM 树所做更改的能力, 用于替代 Mutation Events 的新 API, 与 Events 不同的是: 事件是同步触发, 即 DOM 发生变动会立刻触发相应事件, MutationObserver 则是异步触发, DOM 发生变动以后并不会马上触发, 而是要等到当前所有 DOM 操作都结束后才触发, 所有监听操作以及相应的处理都是在其他任务执行完成之后异步执行的, 并且在 DOM 更改触发之后,将更改记录存储在数组之中, 统一进行回调通知

构造函数

创建并返回一个新的 MutationObserver 实例, 会在指定的 DOM 发生变化时被调用

• 参数 callback

  当被指定的节点或子树以及配置项有 Dom 变化时会被调用, 回调函数有两个参数:

  • MutationRecord 描述所有被触发改动的记录对象数组
  • MutationObserver 调用该函数的 MutationObserver 对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// 创建一个观察器并传入回调函数
const observer = new MutationObserver(function (MutationRecord, observer) {
  console.log(MutationRecord, observer);
  // [{
  //   addedNodes: NodeList []
  //   attributeName: ""
  //   attributeNamespace: null
  //   nextSibling: null
  //   oldValue: ""
  //   previousSibling: null
  //   removedNodes: NodeList []
  //   target:
  //   type: "attributes"
  // }]
});
// 指定观察变动的 DOM 节点和配置项
observer.observe(document.querySelector('#someElement'), {
  subtree: true,
  childList: true,
  attributes: true,
});
// 停止观察器
observer.disconnect();

• 返回值 MutationObserver 对象

Generator

Generator 函数是 ES6 提供的一种异步编程解决方案, 语法行为和传统普通函数完全不同, Generator 函数是一个状态机, 封装了多个内部状态, 执行函数会返回一个迭代器对象, 返回的迭代器对象可以依次遍历 Generator 函数内部的每一个状态.

• function 关键字和函数名之间有一个星号, 星号写在哪个位置都可以
• 函数体内部使用 yield 表达式定义不同的状态

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

function* helloWorld() {
  yield 'hello';
  yield 'world';
}

var gen = helloWorld();
gen.next();
// { value: 'hello', done: false }
gen.next();
// { value: 'world', done: false }
gen.next();
// { value: undefined, done: true }

调用 Generator 函数, 返回一个迭代器对象, 代表 Generator 函数的内部指针, 每次调用迭代器对象的 next 方法, 就会返回一个包含 value 和 done 属性的对象, value 属性表示当前的内部状态(yield 表达式)的值, done 属性表示遍历是否结束的 boolean 值

yield 表达式

yield 表达式只能用在 Generator 函数里面, 用在其他地方都会报错

1. 遇到 yield 表达式, 就暂停执行后面的操作, 并将 yield 后面紧跟的表达式的值作为返回对象的 value 属性值
2. 下一次调用 next 方法时, 再继续往下执行, 直到遇到下一个 yield 表达式
3. 如果没有再遇到新的 yield 表达式, 就一直运行到函数结束, 直到 return 语句为止, 并将 return 语句后面的表达式的值作为返回的对象的 value 属性值
4. 如果该函数没有 return 语句, 则返回的对象的 value 属性值为 undefined

• String.prototype.substr()

  并非 JavaScript 核心语言的一部分,未来将可能被移除掉, 建议使用 substring() 代替

• arguments.callee

  ES5 严格模式下禁止使用此方法，建议使用方法名调用自己

• Function.arguments 已废弃

  是一个类数组对象,表示传入函数的实参. 在函数内部直接使用 arguments 对象访问

• regexObj.compile 已废弃

  用于编译正则表达式, 和 RegExp 构造函数的作用基本一样

• Date.prototype.getYear 已废弃

  使用 getFullYear 代替

• Date.prototype.setYear 已废弃

  使用 setFullYear 代替

webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具, webpack 处理应用程序时会在内部构建一个依赖图, 此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle

plugin 是 webpack 生态的关键部分, 采用基于事件流的机制, 将各个插件串联起来完成相关的功能, compiler 模块是 webpack 的主要引擎, 它扩展(extend)自 Tapable 类, 用来注册和调用插件.

Tapable 是一个用于事件发布订阅执行的插件架构, 类似于 Node.js 的 EventEmitter 库.

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

const {
  SyncHook,
  SyncBailHook,
  SyncWaterfallHook,
  SyncLoopHook,
  AsyncParallelHook,
  AsyncParallelBailHook,
  AsyncSeriesHook,
  AsyncSeriesBailHook,
  AsyncSeriesWaterfallHook,
  AsyncSeriesLoopHook,
  HookMap,
  MultiHook,
} = require('tapable');

钩子分类

参数

所有 Hook 构造函数都接收一个由参数名称为字符串组成的列表作为可选参数

执行方式

Basic Hook (基础)

钩子调用所在行中调用的每个钩子函数

WaterFall (瀑布)

与基础钩子不同, 它将一个返回值从每个函数传递到下一个函数

Bail (保证)

钩子函数执行中, 只要其中有一个钩子返回 非 undefined 时, 则剩余的钩子函数不再执行

Loop (循环)

循环执行钩子, 当循环钩子函数返回 非 undefined 时, 则从第一个钩子重新启动, 直到所有的钩子返回 undefined 时结束

概念

是异步编程的一种解决方案, 解决 js 异步回调地狱的问题

• 状态唯一

  • pending: 初始状态, 既没有被兑现, 也没有被拒绝
  • fulfilled: 操作成功完成
  • rejected: 操作失败

• 状态不受外界影响

简单用法

1
2
3
4
5
6

let p = new Promise((resolve, reject) => {
  resolve(200);
});
p.then((res) => {
  console.log(res);
});

全局 API

应用实例 API

调用 createApp 返回一个应用实例，该实例提供了一个应用上下文, 应用实例挂载的整个组件树共享相同的上下文

createApp()

创建一个应用实例

• 参数
  • {Object} rootComponent 根组件选项
  • {Object} rootProps 传递给根组件的 props

1
2
3
4
5
6
7
8
9

import { createApp } from 'vue';
const app = createApp(
  {
    /* root component options */
  },
  {
    /* root component props */
  }
);

createSSRApp()

以 SSR 模式创建一个应用实例, 用法和 createApp() 相同

app.mount()

将应用实例挂载到一个容器元素中

• 参数可以是一个实际的 DOM 元素或一个 CSS 选择器, 返回根组件实例
• 如果该组件有 template 模板或定义了 render 函数, 则替换容器内所有现存的 DOM 节点, 否则使用容器元素的 innerHTML 作为模板

1
2
3
4
5
6
7
8
9

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp({
  /* */
});

// app.mount('#app');
app.mount(App);

app.unmount()

卸载一个已挂载的应用实例, 同时触发该应用组件树内所有组件的卸载生命周期钩子

app.provide()

提供一个值, 可以在应用中的所有后代组件中注入使用

• 参数
  • key, 注入的 key
  • value, 注入的 key 对应的值, 返回应用实例本身

1
2
3
4
5
6

import { createApp } from 'vue';
const app = createApp({
  inject: ['name'],
  template: '<span>{{name}}</span>',
});
app.provide('name', 'hello world');

app.component()

注册或查找全局组件, 根据参数个数区分

1
2
3
4
5
6
7

import { createApp } from 'vue';
const app = createApp(/* */);
app.component('my-component', {
  /*组件配置项*/
});

app.component('my-component'); // 查找已注册的组件

其他篇

submodule 仓库

submodule init 初始化

1

git submodule init [<path>]

submodule deinit 删除

1
2

git submodule deinit [-f]
git submodule deinit [--all]

操作篇

初始化仓库

1

git init [project-name]

克隆仓库

1

git clone [url]

分支

查看

• a|all: 列出所有本地和关联远程分支

• r: 列出关联远程分支

• v|verbose: 列出分支并显示当前提交信息摘要

  1	git branch [-a] [-r] [-v]