vue面试题2023

1.$route和$router的区别?

• routes : 数组。 路由匹配规则

• router ： 对象。 路由对象

• $router ： 对象。 用于跳转路由 和 传递参数

• $route ：对象。 用于接收路由跳转参数

1.Vue的生命周期方法有哪些？

- beforeCreate 初始化实例前（在当前阶段 data、methods、computed 以及 watch 上的数据和方法都不能被访问。）

- created 实例创建完成之后被调用

- beforeMount 挂载开始之前被调用（相关的 render 函数首次被调用）

- mounted 挂载之后 （在当前阶段真实的DOM挂载完毕，数据完成双向绑定，可以访问DOM节点）

- beforeUpdate 数据更新前调用 （不会触发重新渲染过程）

- updated 更新完成之后

- beforeDestory 实例销毁之前调用

- destroyed 实例销毁之后调用 （Vue实例指示的东西都会解绑，所有事件监听移除）

- activated keep-alive专属，组件被激活时调用

- deactivated keep-alive专属，组件被销毁是调用

异步请求在哪一步发起？

可以在钩子函数 created、beforeMount、mounted 中进行异步请求，因为在这三个钩子函数中，data已经创建，可以将服务器端返回的数据进行赋值。

如果异步请求不需要依赖 DOM 推荐加载 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有以下优点：

能更快获取到服务端数据，减少页面loading时间；

如果依赖DOM元素：需要再mounted里面进行请求
 

2.与 2.x 版本生命周期相对应的组合式 API

- beforeCreate -> 使用 setup()

- created -> 使用 setup()

- beforeMount -> onBeforeMount

- mounted -> onMounted

- beforeUpdate -> onBeforeUpdate

- updated -> onUpdated

- beforeDestroy -> onBeforeUnmount

- destroyed -> onUnmounted

- errorCaptured -> onErrorCaptured

3.为什么data是一个函数

组件的data写成一个函数，数据以函数返回值形式定义

这样每复用一次组件，就会返回一分新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。

而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。
 

- 避免组件被复用时，数据存在引用关系。
- vue组件可能存在多个实例，如果使用对象形式，会导致多个组件共用一个data，从而使一个组件影响其他组件。
- 如果用函数定义，会返回一个全新的对象，避免了组件间之间data的相互影响。

4.【几乎必问】vue组件传值

- props 和 $emit。

        父组件向子组件传递数据是通过props传递的，

        子组件传递给父组件是通过$emit触发事件来做到的。

- $parent 和 $children 获取单签组件的父组件和当前组件的子组件。

- $refs 获取组件实例

- 父传子孙：provide 和 inject

- vuex 状态管理（实现不同组件之前的数据共享）

--------------------------------------------

父传子

1.子组件props定义变量
2.父组件在使用子组件时通过行内属性给props变量传值

特点：单向数据流

子传父

1.子组件：$emit触发父的事件

2.父在使用组件用@自定义事件名=父的方法 (子把值带出来)

特点：事件监听

非父子组件

vuex

4.Vue 的单项数据流

- 数据总是从父组件传递到子组件，子组件没有权利修改从父组件传过来的数据，只能请求父组件对原始数据进行修改。

5.computed 和 watch 的区别和运用的场景。

- computed 是计算属性，依赖其他属性计算值，并且computed的值具有缓存性，当计算值发生变化时才会返回内容。

- watch 监听到值得变化就会调用。