Vue2.x学习笔记

# Vue2.x 的 api

前言

总结一些 vue 中常见的很实用的功能，可以更高效的进行项目开发

# 1.模板打印

Vue.prototype.$log = window.console.log
1
刷新
全屏/自适应

# 2.异常捕获

在 Vue2.x 中用 window.onerror 是捕获不到异常的，异常被框架自身的异常机制捕获了，可以使用errorHandle来获取

  • Vue.config.errorHandler
Vue.config.errorHandler = function (err, vm, info) {
  let { message, name, stack } = err
  console.error(name, message, stack)
}
1
2
3
4
  • 打开控制台，点击内容可以看到捕捉的报错信息
刷新
全屏/自适应

注意

使用 Vue 中的异常捕获机制，我们可以针对捕获到的数据进行分析和上报，为实现前端异常监控奠定基础

  • Vue.config.warnHandler 同理

# 3.全局提示

将 ui 组件（如：elementUI）提示组件挂载到 vue 原型上，在组件中可以通过 this 直接调用提示组件

Vue.prototype.$message = message
1
刷新
全屏/自适应

# 4.$nextTick

一般在 vue 项目中异步操作尽量用nextTick处理，常见的处理场景：等待 DOM 的更新后操作数据

this.$nextTick(() => {
  this.$refs.box.getElementsByTagName("li")[0].innerHTML = "覆盖的数据"
})
1
2
3

nextTick async/await 用法：

刷新
全屏/自适应

# 5.$watch

  • 由于是函数式写法，$watch 相比配置的 watch 可以精确控制初始化时间
刷新
全屏/自适应

使用场景

  • 1.echarts 图表中需要等数据初始化完成后再监听数据

注意

  • 1.watch 非常消耗性能，尽量减少 watch 的使用，能用 computed 代替的用其代替

# 6.extends

  • extends 用法和 mixins 很相似,只不过接收的参数是简单的选项对象或构造函数,所以 extends 只能单次扩展一个组件
刷新
全屏/自适应

# 7.$isServer

判断是否是在服务端渲染(SSR)

  • 其他方式判断：
try {
  document.titls = "test"
} catch (e) {}
// process.env.VUE_ENV 需要在 webpack中进行配置
if (process.env.VUE_ENV === "client") {
  document.title = "test"
}
1
2
3
4
5
6
7
  • $isServer 判断
if (this.$isServer) {
  document.title = "test"
}
1
2
3

# 8.$mount

手动挂载，可以在一些 js 封装的库中受到挂载 vue 组件

let vm = new Vue({
  data: { state: { count: 0 } },
  render(h)=>h(com)
});
vm.$mount("#app");
1
2
3
4
5

手动插入 dom，可以在一些 js 封装的库中受到挂载 vue 组件

let vm = new Vue({
  data: { state: { count: 0 } },
  render(h)=>h(com)
});
let dom = vm.$mount().innerHTML; // 生成dom元素
1
2
3
4
5

使用场景

  • 1.echarts 图表中自定义弹框需要用 vue 来写的部分

# 9.filter

  • 使用
// 在双花括号中
{
  {
    message | capitalize
  }
}
// 在 `v-bind` 中
;<div v-bind:id="rawId | formatId"></div>
1
2
3
4
5
6
7
8
  • 注册
// 全局注册
Vue.filter("stampToYYMMDD", (value) => {
  // 处理逻辑
})

// 局部注册
filters: {
  stampToYYMMDD: (value) => {
    // 处理逻辑
  }
}

// 多个过滤器全局注册
// /src/common/filters.js
let dateServer = (value) => value.replace(/(\d{4})(\d{2})(\d{2})/g, "$1-$2-$3")
export { dateServer }

// /src/main.js
import * as custom from "./common/filters/custom"
Object.keys(custom).forEach((key) => Vue.filter(key, custom[key]))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 10.$delete

# 11.样式写法

  • 对象写法
刷新
全屏/自适应
  • 数组写法
刷新
全屏/自适应

# 12.mixins

场景:有些组件有些重复的 js 逻辑,如校验手机验证码,解析时间等,mixins 就可以实现这种混入

刷新
全屏/自适应

# 13.$forceUpdate

Vue 内部更新流程：数据变化 --> set 函数 --> 渲染 Watcher --> render --> patch --> 新旧节点对比 --> 插入 dom

  • 组件强制更新：$forceUpdate触发 Watcher上的update
刷新
全屏/自适应

# 14.Vue.config

Vue.config.performance = true
1

# 15.$set

this.$set(arr, index, item)
1

# 1.4.1 keepAlive

  • 路由中
{
  path: 'list',
  name: 'itemList', // 列表页
  component (resolve) {
    require(['@/pages/item/list'], resolve)
 },
 meta: {
  keepAlive: true,
  title: '列表页'
 }
}
1
2
3
4
5
6
7
8
9
10
11
  • 组件中
<template>
  <div id="app" class="wrapper">
    <keep-alive>
      <!-- 需要缓存的视图组件 -->
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <!-- 不需要缓存的视图组件 -->
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
  • 生命周期
    • activated
    • deactivated

← Vue2.x 的通信 →