Vue

生命周期

beforeCreadted

created

beforeMount

mounted

beforeUpdate

updated

beforeDestroy

destroyed

activated：被 keep-alive 缓存的组件激活时调用

deactivated：被 keep-alive 缓存的组件停用时调用

errorCaptured(err, component, originInfo)：当捕获一个来自子孙组件的错误时被调用

生命周期图

常用指令

v-text

v-html

v-show

v-if

v-else

v-else-if

v-on

v-bind

v-model

v-slot

v-pre

v-cloak

v-once

Vue 组件通信

vue组件间通信六种方式（完整版）

• props

  • 父子

• $emit/$on

  • 父子、兄弟、跨级

  • var EventBus = new Vue(); EventBus.$emit(name, data); Event.$on(name, data => {});

• $parent / $children

• $attrs/$listeners

• provide / inject

• vuex

vue-cli 设置 proxy 为什么能跨域

插件：http-proxy-middleware

原理：后端请求不受跨域限制

环境：只适用本地开发

实现：开发环境下将 API 请求代理到 API 服务器，在本地虚拟一个服务器接收请求并代替发送请求，因为是本地虚拟等服务端帮忙请求接口，就没有跨域问题了。

组件

# 加载以及渲染过程
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子create -> 子beforeMount -> 子mounted -> 父mounted

# 更新过程
父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated

# 销毁过程
父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed

# 简易版常用
父created  -> 子create -> 子mounted -> 父mounted