【Vue2.0⾯试题】

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

1、vue的生命周期？

我先介绍⼀下什么是vue的⽣命周期? 首先所谓的vue⽣命周期就是vue实例从创建到销毁的整个过程我们称之为vue的
⽣命周期,通过vue的⽣命周期我们可以在不同的阶段进⾏不同的逻辑操作. vue⽣命周期常⽤的钩⼦函数⼀共有8个,分别是创建前后、挂载前后、更新前后以及销毁前后. 分别对应的钩⼦函数为
beforeCreate 创建前、
created创建后(创建之后 也是最早的可以使用 data 和 methods 的钩子函数 这个时候有 this 了)、
beforeMount 挂载前、
mounted挂载后、
beforeUpdate 更新前、
updated更新后、
beforeDestory 销毁前、
destoryed销毁后,
除了这八个 还有 三个
如果用 keep-alive 缓存了组件 就会有 actived deactived 这两个钩子函数
activated 组件激活
deactivated 组件停用
errorCaptured 子组件出错的时候会触发这个钩子函数。

• 如何触发这些函数？

⻚⾯⼀开始加载的时候就会触发创建前后和挂载前后的钩⼦函数, ⽽更新的钩⼦函数需要当我们改变data的时候才能触发,⽐如 点击按钮,执⾏⼀个⽅法,在这个⽅式⾥⾯给data⾥⾯属性重新进⾏复制操作,这个时候就会更新的钩⼦函数, 销毁的钩⼦函数必须得当组件进⾏切换的时候就会进⾏销毁.
在项⽬开发过程中,我经常使⽤到的钩⼦函数有created,我们经常在created进⾏数据请求,或者获取本地存储的数据,还有⼀些其
他的操作. 除了created还有mounted,我们经常在mounted⾥⾯获取dom元素

1.2）⻚⾯第⼀次加载时⽗⼦组件⽣命周期执⾏的顺序是什么?

自己试一试 把顺序写一下

页面—beforeCreate

页面—created

页面—beforeMount

组件—beforeCreate

组件—created

组件—beforeMount

组件—mounted

页面—mounted

2. vuex的理解? (必问) 讲解

⾯试官您好,接下来我先给您介绍⼀下什么是vuex? 所谓的vuex其实就是vue官⽅给我们提供的⼀个状态管理⼯具,通过vuex我们可以组件之间数据共享的问题. vuex⼀共有5⼤核⼼,分别是state,⾥⾯保存的是状态,也可以理解为是数组, 接下来是getters,
他们⽤来获取state⾥⾯的状态,并且可以对state的数据进⾏处理之后在返回,有点类似于vue的计算属性, 接下来还有mutations,他的作⽤主要是⽤来修改state⾥⾯的数据,不过在mutations⾥⾯只能进⾏同步的操作,还有actions,这个actions也可以去改变
state的状态,不过在actions⾥⾯定义的⽅法可以进⾏异步操作,最后⼀个是modules,如果当我们的项⽬⽐较⼤的时候,那么保存
的状态也会增加,如果都写到index.js⽂件⾥⾯,⽂件的内容就会变得特别臃肿,后期难以维护,所以我们可是使⽤modules进⾏模
块化的处理,将多个状态抽离到对应js⽂件⾥⾯,最后在modules进⾏合并,这样后期就⽅便维护了.
接下来我在介绍⼀下在组件⾥⾯如何调⽤vuex⾥⾯的属性和⽅法,如果我们要获取state⾥⾯的状态,我们可以通过this.$store.state来进行获取如果要调用里面的方法我们可以通过来进行调用如果要调用里面的方法我们需要使用store.commit来触发,如果调⽤actions⾥⾯的⽅法,我们⼀般通过this.$store.dispacth来进⾏触发. 除了这种⽅式以外,我们还可以
通过辅助函数的⽅式来进⾏调⽤和触发我在项⽬当中如果要改变state的状态,我们⼀般是在组件⾥⾯调⽤this.$store.dispatch⽅式来触发actions⾥⾯的⽅法,在actions
⾥⾯的⽅法通过commit来调⽤mutations⾥⾯定义的⽅法来改变state,同时这也是vuex的执⾏机制
不过vuex也有⼀些弊端,⽐如浏览器刷新的时候,vuex的数据会丢失,我们⼀般结合本地存储来解决,当我们在mutations⾥⾯改变
state的时候在通过localStorage或者sessionStorage存储到本地,然后在state的状态的属性值那块写⼀个三元表达式,如果本地存
在数据的话则读取本地存储的数据,否则就赋值为null

2.1 怎么开启严格模式

strict: true, 跟 state 同级的地方设置这个属性
开启完严格模式后 如果不是通过 mutation 修改的 state 就会报错
strict 严格模式只适合开启在开发环境下
在项⽬当中我⼀般使⽤vuex会保存⽤户信息和token以及其他的⼀些状态. 以上就是我对vuex的理解.

3. vue路由有⼏种模式?有什么区别?原理是什么?(必问) 讲解

⾯试官您好,接下来我给您介绍⼀下vue的路由模式,vue的路由模式⼀共有两种,分别是哈希和history. 他们的区别是hash模式不
会包含在http请求当中,并且hash不会重新加载⻚⾯,⽽使⽤history模式的话,如果前端的url和后端发起请求的url不⼀致的话,会 报404错误,所以使⽤history模块的话我们需要和后端进⾏配合.
history的原理就是利⽤html5新增的两个特性⽅法,分别是psuhState和replaceState来完成的. 以上就是我对vue路由模式的理解.

4. vue路由守卫?(必问) 讲解⻚⾯权限

⾯试官您好,接下来我给您介绍⼀下vue路由守卫,⾸先呢,所谓的路由守卫就是当我们进⾏⻚⾯跳转的时候会触发的钩⼦函数,
我们把它称之为vue路由守卫.
一共有三种

第一种是全局守卫
beforeEach 路由进入之前
afterEach 路由进入之后

第二种 组件内守卫
beforeRouteEnter 路由进入之前
beforeRouteUpdate 路由更新之前
beforeRouteLeave 路由离开之前

第三种
独享守卫
beforeEnter 路由进入之前

to from next
next 这个参数 在路由 3.x 版本的时候 是必须的
但是到了路由 4.x 版本的时候 next 参数变成可选的了

一般来说 vue2 搭配 3.x 的路由
vue3 搭配 4.x 的路由
比如说 购物车页面只有登陆的才能访问 我们可以用组件级守卫守卫购物车页面
如果已经登陆存的有 token 的话 就继续访问这个页面 如果没有登陆的话就会跳转到登陆页面

next 参数 除了括号里可以是空和路径之外 还可以是一个回调函数（回调函数就是一个被作为参数传递的函数）

5. v-if与v-show的区别?(90%)

⾯试官您好,接下来我给您介绍⼀下v-if和v-show的区别? ⾸先v-if和v-show都是控制元素的显示与隐藏, 不过v-if控制元素的显
示和隐藏的时候会删除对⽤的dom元素,当每⼀个显示的时候,都会重新创建dom和渲染. ⽽v-show则是通过css的display:none
和display:block来控制元素的显示与隐藏. v-if⽐较耗费性能,所以我们涉及到频繁的显示隐藏操作我们建议使⽤v-show,如果不
是频繁操作的话,我们可以v-if
在项⽬中我会经常使⽤v-if和v-show,⽐如我们在搜索功能的时候,他有⼀个历史记录,这个时候我们根据是否有搜索的结果来判
断历史记录的显示与隐藏,这块我就可以使⽤v-if ,当然⽤v-show也可以. 以上就是我对v-if和v-show的理解.

6. v-for与v-if的优先级那个⾼?如果同时使⽤v-for和v-if怎么解决?(90%) 讲解

v-for的优先级⾼. 因为v-for的时候我们才开始渲染dom元素,这个v-if还⽆法进⾏判断.
v-for和v-if不能同时使⽤,我们可以通过标签,⽐如div或者template标签来进⾏包裹,把v-if写到包裹的标签上⾯(写到v-for外⾯)

7. methods、computed和watch的区别?(90%)。讲解

⾸先呢,methods是⽤来定义⽅法的区域,methods定义的⽅法需要调⽤才能触发. 不具备缓存⾏
⽽computed是计算属性,他依赖于属性值的变化,当属性发⽣改变的时候,计算属性⾥⾯定义的⽅法就会触发,computed具有缓
存性,依赖属性值的变化⽽变化. ⽽watch主要是⽤于监听,监听 数据的变化,不具备被缓存性.依赖于数据变化⽽触发.
watch 有三个参数 deep immediate handler
当我们不需要 deep 和 immediate 的时候 就可以简写为一个函数 这个函数就是 handler
在项⽬中,⽐如我们获取state的状态的时候我们会把它放到computed⾥⾯,或者在写购物⻋数量计算的时候也会使⽤计算属性. ⽽watch也在项⽬经常使⽤,⽐如我们封装编辑 和 新增弹窗组件的时候会通过watch来进⾏id判断我们要显否要清空表单的数
据.
以上就是我对computed和watch的理解.

8. vue组件通信?(必问)。eventBus 讲解

⽗传⼦ 在⼦组件的标签上定义属性 ⼦组件通过props来进⾏接受,可以通过数组的⽅式进⾏接受,也可以通过对象的⽅式来进
⾏接收,如果⽗组件没有传递属性,⼦组件可以default来设置默认值
⼦传⽗ ⼦组件通过this.$emit("⾃定义的事件",要传给⽗组件的数据),⽗组件通过⼦组件的标签监听⾃定义的时间,通过⽅法来接收传递的数据⾮⽗⼦组件通信通过中央事件总线,我们也称之为eventBus,在main.js中把一个空的vue实例挂载在vue的原型上起名叫$bus
传数据的时候用this.$bus.$emit传
在要接受数据的子组件 在 created钩子函数中 用$on 方法接收

9. $nextTick⽅法有什么作⽤?(80%) 讲解

⾸先呢, 也叫做异步更新队列方法 而 方法的主要作用就是等待 元素加载完毕之后才会执行的回调函数 我们经常会在
nextTick⽅法⾥⾯获取dom元素,因为 vue 的 dom 更新是异步的 所以 当 dom 还未更新的时候我们无法拿到最新的 dom 来用
放在 nextTick 里的代码 就会在 dom 更新之后执行 就能拿到最新的 dom 来用了

10. 说⼀下什么是mvvm模式?(70%)

MVVM 是把 MVC 的 Controller 和 MVP 的 Presenter 改成了 ViewModel 。
View 的变化会⾃动更新到 ViewModel ， ViewModel 的变化也会⾃动同步到 View 上显示。这种⾃动
同步是因为 ViewModel 中的属性实现了 Observer ，当属性变更时都能触发对应的操作

11. vue双向数据绑定原理?(必问) 过⼀下

vue.js 则是采⽤ 数据劫持 结合 发布者-订阅者 模式的⽅式，
通过 Object.defineProperty() 来劫持各个属性的 setter ， getter ，
在数据变动时发布消息给订阅者，触发相应的监听回调。
这个时候就可以实现数据的双向绑定

12. vue常⽤的指令有哪些?(50%)

v-if 表示判断
v-show 显示/隐藏
v-html
v-text
v-on 绑定一个事件
v-bind 绑定一个属性
v-model 双向数据绑定
v-for for循环

13. vue常⽤的修饰符有哪些?(50%)

.trim 去除⾸尾多余的空格
.stop 阻⽌事件冒泡
.once 只渲染⼀次
.self 事件只作⽤在元素本身
.number 将值转化为number类型
.capter 组件之间捕获
.prevent 阻⽌元素的默认⾏为
.native 事件穿透,让我们可以在⾃定义组件上定义事件和⽅法

14. vue如何封装可复⽤的组件?以及请举例说明你封装过的组件?(50%) 讲解

15. vue中key的作⽤是什么?(必问)。过⼀下

避免dom元素重复渲染. 我⻔⼀般在设置key的时候⾸先尽量会设置为id,或者index下表.

16. 说⼀下你对keep-alive的理解?以及在项⽬中如何使⽤?(90%) 过⼀下

keep-alive是vue内置的⼀个组件，⽽这个组件的作⽤就是能够缓存不活动的组件，⼀般情况下，组件进⾏切
换的时候，默认会进⾏销毁，如果需求，某个组件切换后不进⾏销毁，⽽是保存之前的状态,那么就可以利⽤keep-alive来实现

被缓存的组件 切换的时候不会触发创建和销毁的钩子函数 而是会触发跟 keep-alive 相关的 activated（激活） deactivated（停用）这两个钩子函数

keep-alive 标签 有 include 属性和 exclude 属性
include 属性 定义了要缓存谁
exclude 属性 定义了不缓存谁
还可以利用 路由的 meta 信息去规定缓存谁不缓存谁

在搭建 vue 项⽬时，有某些路由组件没必要多次渲染，所以需要将组件在内存中进⾏‘持久化’，此时在router-view上使⽤keep-alive。 keep-alive可以使被包含的路由组件状态维持不变，即便是组件切换了，其内的状态依旧维持在内存之中。在下⼀次显示时，也不会重新渲染。

17. 说⼀下什么是vue过滤器? 有⼏种?项⽬中如何使⽤,请举例说明?(60%)

所谓的vue过滤器就是将数据进⾏⼆次处理,得到我们想要的结果数据
vue的过滤器分为两种,第⼀种是全局过滤器,通过vue.filet来进⾏定义,第⼆种是局部过滤器,需要定义在组件内部
项⽬中我们通过过滤器将后台返回的状态0 和1 转化为⽀付或者未⽀付

18. 说⼀下你对slot插槽的理解?(70%) 过⼀下

⾸先呢,所谓的插槽就是⼀个占位符,将⾃定义组件的内容展示出来.我们知道⾃定义的组件⾥⾯如果写内容的话,⻚⾯是不会显示出来的,如果我们想让⾃定义组件⾥⾯的内容显示出来,我们就需要使⽤slot的插槽.
⽽插槽分别具名插槽和匿名插槽、以及作⽤域插槽. 我们⽤的⽐较多的具名插槽和匿名插槽,具名插槽需要所有 slot 标签上指定name 属性,⽽在对应标签上添加# 属性指定名字.

****作用域插槽
是把子组件里的数据传到父组件的插槽里使用
在项⽬中我们⼀般在进⾏组件封装的时候会使⽤插槽,以上就是我对插槽的理解.

19. 说⼀下vue中本地跨域如何解决?线上跨域如何解决?(必问) 线上在讲解⼀下

20. 说⼀下如何对axios进⾏⼆次封装?以及api如何封装?(30%)

1. 先创建 utils 文件夹
2. 创建 request.js
3. 引入 axios
4. 配置 基本路径和超时时间
5. 配置请求拦截和响应拦截
6. 在请求拦截里可以放 loading 和 token
7. 在响应拦截中 可以 清除 loading 还有处理错误编码字典
8. 最后把我们封装的 axios 实例 导出

21. 说⼀下axios的拦截器的作⽤?应⽤场景都有哪些?(80%)

⾸先呢,axios拦截器是axios给我们提供的两个⽅法,通过这两个⽅法我们可以对请求发送之前以及响应之后进⾏逻辑的再次处
理(拦截). 这两个拦截器不需要⼿动触发,只要发送http请求的时候就会⾃动触发. 我在项⽬中经常通过拦截器发送token, 对
token进⾏过期处理,以及进⾏其他的⼀些操作

22. 说⼀下vue和jquery的区别?(50%)

⾸先呢jquery他是⽤js封装的⼀个类库,主要是为了⽅便操作dom元素,⽽vue他是⼀个框架,并且呢,他会从真实dom构建出⼀个虚拟的dom树,通过di!算法渲染只发⽣改变的dom元素,其他的相同的dom元素不⽤在重新渲染. ⽽使⽤jquery去改变dom元素的时候,即使有相同的dom元素也会重新渲染,以上就是我对vue和jquery区别的理解.

23. vue中data发⽣变化,视图不更新如何解决?(必问) 过⼀下

⾯试官,您好,接下来我先给您介绍⼀下为什么data发⽣变化,视图不更新,因为Vue实例中的数据是响应式的**⽽我们新增的属性并不是响应式的，由于受现在JavaScript的限制，Vue⽆法检测到属性的新增或删除。所以有时⽆法实时的更新到视图上。

**所以我在项⽬中遇到这类问题的时候⼀般是通过this. 方法去解决 $set⽅法⼀共有三个参数,分别是⽬前属性,新增属性,
新增的值.
以上就是我对视图不更新的理解.

24. 为什么vue中data必须是⼀个函数?(必问) 过⼀下

如果data是⼀个函数的话，这样每复⽤⼀次组件，就会返回⼀份新的data，类似于给每个组件实例创建⼀个私有的数据空
间，让各个组件实例维护各⾃的数据。⽽单纯的写成对象形式，就使得所有组件实例共⽤了⼀份data，就会造成⼀个变了全
都会变的结果。
所以说vue组件的data必须是函数。这都是因为js的特性带来的，跟vue本身设计⽆关。

25.MVVM模式的优点以及与MVC模式的区别?

MVVM模式的优点：
1、低耦合： 视图（View）可以独⽴于 Model 变化和修改，⼀个 ViewModel 可以绑定到不同的"View"上，当View变化的时候Model
可以不变，当Model变化的时候View也可以不变。
2、可重⽤性： 你可以把⼀些视图逻辑放在⼀个ViewModel⾥⾯，让很多 view 重⽤这段视图逻辑。
3、独⽴开发： 开发⼈员可以专注于业务逻辑和数据的开发（ViewModel），设计⼈员可以专注于⻚⾯设计。
4、可测试： 界⾯素来是⽐较难于测试的，⽽现在测试可以针对ViewModel来写。
MVVM 和 MVC 的区别：
mvc 和 mvvm 其实区别并不⼤。都是⼀种设计思想。
主要区别
mvc 中 Controller演变成 mvvm 中的 viewModel，
mvvm 通过数据来显示视图层⽽不是节点操作。
mvvm主要解决了:
mvc中⼤量的DOM 操作使⻚⾯渲染性能降低，加载速度变慢，影响⽤户体验。

26. 怎样理解 Vue 的单向数据流?

数据总是从⽗组件传到⼦组件，⼦组件没有权利修改⽗组件传过来的数据，只能请求⽗组件对原始数据进⾏修改。这样会防⽌从
⼦组件意外改变⽗级组件的状态，从⽽导致你的应⽤的数据流向难以理解。
注意：在⼦组件直接⽤ v-model 绑定⽗组件传过来的 prop 这样是不规范的写法 开发环境会报警告
如果实在要改变⽗组件的 prop 值 可以再 data ⾥⾯定义⼀个变量 并⽤ prop 的值初始化它 之后⽤$emit 通知⽗组件去修改

27. 虚拟 DOM 是什么? 有什么优缺点?

什么是虚拟dom?
虚拟 dom 是利用 js 描述元素与元素的关系，用 js 对象来表示真实的 DOM 树结构，创建一个虚拟 DOM 对象
由于在浏览器中操作 DOM 是很昂贵的。频繁的操作 DOM，会产⽣⼀定的性能问题.
优点:
保证性能下限： 框架的虚拟 DOM 需要适配任何上层 API 可能产⽣的操作，它的⼀些 DOM 操作的实现必须是普适的，所以它
的性能并不是最优的；但是⽐起粗暴的 DOM 操作性能要好很多，因此框架的虚拟 DOM ⾄少可以保证在你不需要⼿动优化的
情况下，依然可以提供还不错的性能，即保证性能的下限；
⽆需⼿动操作 DOM： 我们不再需要⼿动去操作 DOM，只需要写好 View-Model 的代码逻辑，框架会根据虚拟 DOM 和 数据双向
绑定，帮我们以可预期的⽅式更新视图，极⼤提⾼我们的开发效率；
跨平台： 虚拟 DOM 本质上是 JavaScript 对象,⽽ DOM 与平台强相关，相⽐之下虚拟 DOM 可以进⾏更⽅便地跨平台操作，例如
服务器渲染、weex 开发等等。
缺点:
⽆法进⾏极致优化： 虽然虚拟 DOM + 合理的优化，⾜以应对绝⼤部分应⽤的性能需求，但在⼀些性能要求极⾼的应⽤中虚拟
DOM ⽆法进⾏针对性的极致优化。
⾸次渲染⼤量 DOM 时，由于多了⼀层虚拟 DOM 的计算，会⽐ innerHTML 插⼊慢

28. Vue的diff算法原理是什么？

diff 算法就是对虚拟 dom 进行对比，并返回一个 patch 对象，这个对象的作用是存储两个节点不同的地方，最后用 patch 里记录的信息去局部更新真实的 dom

diff 算法的步骤
1.js 对象表示真实的 dom 结构，就是我们说的生成一个虚拟 dom，再用虚拟 dom 构建一个真的 dom 树，放到页面中。 2.状态改变的时候生成一个新的虚拟 dom 跟旧的进行对比，这个对比的过程就是 diff 算法，通过 patch 对象记录差异 3.把记录的差异用在第一个虚拟 dom 构建的真实的 dom 上，视图就更新了

Vue的diff算法是平级⽐较，不考虑跨级⽐较的情况。内部采⽤深度递归的⽅式+双指针⽅式⽐较

29. Vue.use是⼲什么的？

vue.use 是⽤来使⽤插件的。我们可以在插件中扩展全局组件、指令、原型⽅法等。 会调⽤ install`⽅法将Vue的构建函数默认传⼊，在
插件中可以使⽤vue，⽆需依赖vue库(vue.use 是用来安装 Vue.js 插件。这个插件可以是一个组件也可以是一个函数，插件里要有一个 install 方法，install 方法调用时，他的第一个参数就是 Vue 在调用 vue.use 方法的时候就会执行 Vue.install 方法

该方法需要在调用 new Vue() 之前被调用)

30.组件写name有啥好处？

增加name属性，会在components属性中增加组件本身，实现组件的递归调⽤。
可以表示组件的具体名称，⽅便调试和查找对应的组件。比如说 keep-alive 的 include 和 exclude 就是通过组件的 name 属性区分谁缓存谁不缓存的

拓展

1.mixin 混入

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”，出现冲突的时候以组件优先
比如，生命周期函数就会合并 但是如果组件和混入有相同的变量的时候 会以组件的优先

全局混入
混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，所有的实例都会触发

2.Vue.extend

使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
可以理解为创建子组件的 可以用 mount 或者 el 指定这个子组件挂载到哪里

3.组件传值的八种方式

1. 父传子

• 首先在使用子组件的标签上 通过自定义属性传递变量 在子组件中 通过 props 接受
  在接收的时候有两种接收方式 数组形式 和 对象形式 对象形式可以规定传来的变量的数据类型（type）默认值（default）以及是否必填（required）

2. 子传父

首先在使用子组件的标签上定义一个自定义事件 在子组件里通过 this.$emit 去调用这个自定义事件 $emit 方法的第一个参数是自定义事件的名字 第二个参数是就是子组件要传递给父组件的变量 最后在父组件接收使用就可以了

3. 兄弟组件

• 利用中央事件总线 eventbus
  在 main.js 中 把一个空的 vue 实例挂载在 vue 的原型上起名叫$bus传数据的时候用this.$bus.$emit传在要接受数据的子组件在created钩子函数中用$on 方法接收

4. 利用 vuex 进行组件通信 把公共的数据存在 vuex 里就可以实现组件之间都能使用这个数据了

5. 其实 v-model 也能实现组件通信 因为 v-model 就是 :value 和 @input 事件的合写 如果在一个子组件上使用 v-model 也能实现父子组件之间的通信

6. $attr+$listener
   如果父组件 A 下面有子组件 B 子组件 B 下面又有子组件 C 如果 a 组件的变量和方法想要传给组件 C 的时候 就用到这个方法 适用于多级组件传值
   在 B 组件中给 C 组件绑定 v-bind=“$attrs"v-on="$listeners” 然后在 C 组件中就可以直接使用 a 传来的属性和方法了
   （简单来说：$attrs与$listeners 是两个对象，$attrs里存放的是父组件中绑定的非Props属性，$listeners 里存放的是父组件中绑定的非原生事件。）

7. provide 和 inject
   父组件通过通过 provide 提供变量 子组件中通过 inject 注入变量，不论嵌套了几层子组件 都能通过 inject 来调用 provide 的数据

这种写法传的数据是不响应的

8. $parent和$children
   在子组件内可以直接通过$parent对父组件进行操作，在父组件内可以直接通过$children 对子组件进行操作
   在父组件调用子组件时候要加下标也就是$children 是一个数组 因为可以有很多个子组件

9. 也能用本地存储 来 完成组件通信

4.多环境变量

一般分为开发环境和生产环境

development 开发
production 生产（上线）
怎么配置多环境变量
首先建立两个文件 在根目录
.env.dev
里面写上 NODE_ENV=“development”
.env.prod
里面写上 NODE_ENV=“production”

这样我们可以通过 process.env.NODE_ENV 这个变量来判断当前的环境
比如我们可以通过判断不同的环境 在 axios 请求的时候设置不同的 baseURL
在开发的时候使用测试接口
在上线的时候使用真实接口

npm run serve 开启的就是开发环境
npm run build 开启的就是生产环境