在如今这个经济萎靡的时代，公司裁员越来越常见。。咱也想到有一天会经历裁员的情况，但是没想到的是比裁员更恶心的变相降薪，对于这种东西咱向来是基本零容忍的，有再一再二再三基本就不远了，但是现在这个前端大环境又是及其糟糕，不能贸然行事，所以得好好准备下，大概从几个方面入手，框架类、webpack、八股文重点、自制的一些插件之类的（增加自己的竞争力）、和一些其他暂时没想到的。

Vue的基本使用

本篇主要就是介绍vue中常问常考的重点，主要简单回顾下，没特别介绍的vuex或者vue-router，那就是使用上就没啥问的东西，问也是问原理。

1、computed和watch

-- computed有缓存，data不发生变化则不会重新计算

-- watch深度监听，是有个deep属性，设置后可以深度监听（主要是监听引用类型），但是会很耗费性能（可以配合computed进行监听）

-- watch监听引用类型，拿不到oldval，因为指针赋值的关系，指针没有修改

2、v-if和v-for

-- v-if在vue2中优先级低于v-for，在vue3中优先级高于v-for

-- v-for的key的作用：主要是用来标记虚拟dom节点在diff算法中进行比对，当有key的时候会去执行patchKeyedChildren方法，会从头部和尾部进行节点比对，如果没有改变就继续比较，有修改就跳出循环进行修改；如果没有key的话就会执行patchUnKeyedChildren方法，进行全面的对比

3、事件

-- 事件是原生的，事件被挂载到当前元素上

-- 自定义事件是绑定在vue实例上的，监听完成后需要及时解绑，否则可能会造成内存泄漏

4、生命周期

挂载阶段：

brforeCreate

create：只是一个内存的模型变量，vue的实例初始化完成

beforeMounted

mounted：网页绘制完成

更新阶段：beforeUpdate、update

销毁阶段：

beforeDestory：销毁自定义事件，定时器等

destory

*创建vue实例的时候是从外到内的，渲染是从内到外的；更新前是从外到内，更新阶段是从内到外；销毁前从外到内，销毁从内到外

5、高级使用

自定义v-model

父组件：
<customerModel v-model="name"></customerModel>

子组件：
<input type="text" :value="aaa" @input="$emit('change', $event.target.value)"/>

export default {
	model: {
		props: 'aaa',
		event: 'change'
	},
	props: {
		aaa: String
	}
}

$nextTick

vue是异步渲染，data改变后DOM不会去立刻渲染，$nextTick会在DOM渲染之后触发，以获取最新的DOM节点

页面渲染会对data做整合，多次data的修改只会渲染一次

slot

父组件定义的一个子节点放入子组件中

普通插槽：父组件往子组件传值显示
父组件：
<slotDemo>
	2222
</slotDemo>
子组件：
<div>
	<slot></slot>
</div>

作用域插槽：父组件可以使用子组件的数据
<slotDemo >
	<template v-slot="propSlot">
		{{propSlot.slotData.bbb}}
	</template>
</slotDemo>
子组件：
<div>
	<slot :slotData="aaa"></slot>
</div>

data {
	aaa: {
		bbb: 1
	}
}
具名插槽：多个solt的时候，进行命名

动态组件：

:is="component-name"

异步组件：

compontent：() => important('../../a')

Keep-alive：缓存组件

mixin

-- 多个组件有相同的逻辑，进行逻辑的抽离

-- 先会调用混入的组件的数据，然后再调用本身的数据，相同数据以本身数据为准

vuex

只有action里面才能做异步操作

vue-router

Teleport和portal-vue（vue传送门）

vue3:Teleport

Vue2:portal-vue

用法差不多，都是为了跨域不相关的组件进行的一个页面呈现，比如公共的弹出框这种，会直接指向到自己定义的容器上面，不会收到其他的干扰和影响

插件

插件通常用来为 Vue 添加全局功能。插件的功能范围一般有下面几种：

1、添加全局方法或者属性。如: vue-custom-element

2、添加全局资源：指令/过滤器/过渡等。如 vue-touch

3、通过全局混入来添加一些组件选项。如 vue-router

4、添加 Vue 实例方法，通过把它们添加到Vue.prototype上实现。

5、一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

Vue.js 的插件应该暴露一个install方法。这个方法的第一个参数是Vue构造器，第二个参数是一个可选的选项对象：

const MyPlugin = {
	install (Vue, options) { 
		Vue.component('heading', {...})
	}
}
if (typeof window !== 'undefined' && window.Vue) { window.Vue.use(MyPlugin)}
Vue.use(MyPlugin)

使用Vue.use即可引入插件

下一篇：前端面试-vue系列（Vue原理）：juejin.cn/spost/72399…

前端面试-vue系列（vue的基础使用）