vue 面试题

vue 3 的优点 或 不同

1. 响应式方式不同，使用 Proxy 替代 Object.defineProperty

• 可以直接监听数组变化
• 使用 Proxy 直接监听对象，不用像 Object.defineProperty 每个对象遍历一遍
• 可以直接实现对象属性的新增或删除

2. 新增 Composition Api, 代码逻辑更加清晰
3. 生命周期变化，去除了 beforeCreate 和created，新增 setup 生命周期钩子
4. 更好的支持 ts

vue 3 ref 和 reactive 的区别

ref：

1.ref 用于创建响应式数据，返回一个 ref 对象，通过 .value 访问和更改，一般用于创建响应式基本数据类型，例如：数字，字符串等。也可以处理复杂数据类型，转变为 reactive 对象

reactive:

1. 参数必须是对象或数组
2. reactive 返回的是一个响应式对象

vue-router 的作用

vue是单页面应用，通过 vue-ruoter 管理页面， vue-router 构建单页面应用，通过改变 url，在页面不跳转的情况下，更新页面视图，进行页面跳转，传递数据参数

vue-router 的两种模式区别

hash模式：

1. hash 后面有 # 号
2. hash 模式中修改的是 # 中的信息，不会向服务器发送请求

2.history模式：

1. history模式 可以在 url 里面传递参数。还可以把数据放入特定对象中
2. history模式 会向服务器发送请求，刷新时，会报错 404，需要后端做处理，匹配不到页面时，重定向

路由守卫

1. 全局路由守卫 (包含三个参数：to，from，next) to: 要去的路由信息 from: 离开的路由信息 next：执行下一步

• beforeEach: 路由前置守卫
• beforeResolve
• afterEach：路由后置守卫 没有 next 执行函数

2. 路由独享守卫

• beforeEnter：路由配置上面定义，只会在进入定义的路由才会触发

3. 组件内守卫

• beforeRouteEnter: 只在访问组件时调用，访问不到 this ，组件实例还未创建
• beforeRouteUpdate：路由更新时触发，一个父路由下的字路由跳转时触发
• beforeRouteLeave：在离开该组件的路由时触发，可以访问组件实例

双向数据绑定原理

vue 采用数据劫持 和 发布订阅者 模式，通过 Object.definePropert来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。数据驱动视图，数据发生变化时，触发视图更改

v-if 和 v-show 的区别

v-if

1. v-if 是直接对 dom 元素进行操作
2. v-if 是动态添加，如果返回 false ，不会对页面 dom 进行操作

v-show

1. v-show 会渲染到 dom ，通过 dispaly 进行操作
2. 频繁切换元素使用 v-show

vue 的优点

1. 轻量化，大小只有几十 kb
2. 双向数据绑定，数据驱动视图
3. 组件化开发
4. 虚拟 Dom，利用算法实现虚拟 Dom，减少性能损耗

循环时 Key 的作用

循环时需要 key 做一个唯一的标识，diff 算法识别此节点，在更新 Dom时，效率更高

computed 和 watch 的区别以及使用场景

computed

1. computed 是计算属性，watch 是监听，监听 data 中的数据变化
2. computed 支持缓存，当依赖的数据发生变化时，computed 会重新计算，不发生数据变化时，使用缓存中的值
3. computed 不支持异步，watch 可以监听异步操作
4. 如果一个属性由其他属性计算而来的，多对一 或者 一对一，一般使用 computed

watch

1. watch 是监听 data 中的数据的回调，当依赖的 data 中的数据发生变化时，会执行回调
2. watch 有属性 deep，支持深度监听
3. immediate 组件加载后立即执行 watch 回调
4. 会接受两个参数，newVal 和 oldVal，最新的值和之前的值
5. 当一个属性发生变化时，执行操作，一对多

axios 的作用以及特点

1. 支持 Promise Api。可以 使用promise 回调做一些 catch 后的操作
2. 支持拦截请求和响应
3. 支持取消请求
4. 可以在 node.js 中发送 http 请求

生命周期

什么是生命周期？

vue 的生命周期就是 vue 实例从创建到销毁的过程

生命周期的作用？

生命周期可以使我们在 vue 从实例从创建到销毁做一些操作。类似回调函数，执行到某处，进行操作

vue 的生命周期有几个阶段

1. beforeCreate 组件实例刚刚被创建  (el和data并未初始化)
2. created：在组件实例创建后执行，可以对数据进行一些操作，一般用来进行数据请求
3. beforeMount： 挂载阶段
4. mounted：Dom 已经挂载完，可以对 dom 进行操作
5. beforeUpdate：在 虚拟 dom 重新更新前渲染
6. updated：在 虚拟 dom 重新更新后渲染
7. beforeDestroy：组件实例销毁前执行，可以对事件清楚，比如定时器
8. destroyed：发生在实例销毁之后，组件已被拆解，数据绑定被卸除，监听被移出，子实例也被销毁。

vue 组件首次加载会触发：beforeCreate、created、beforeMount、mounted

vue 中的 data 为什么是一个函数？

组件中的 data 写成一个函数形式，数据以函数形式返回，这样每次调用一次组件，就会返回一个新的 data，类似于给每个组件数据创建一个私有空间，这样各个组件维护各自的数据。以对象的形式返回，所有的组件共用一份 data，造成数据不好维护

keep-alive

用于缓存组件内部的实例，keep-alive 会缓存组件的实例，在切换组件时，会缓存组件的实例，减少重新创建组件实例的消耗，还可以保存组件的状态

两个属性，两个生命周期钩子

include：可以设置缓存组件

enclude：设置非缓存组件

activated：组件重新渲染时触发

deactivated：组件销毁时触发

Vuex

什么是 vuex？

项目总体的状态管理，组件状态数据共享，每个组件中可以获取，更改，操作存储在 vuex 中的数据，例如登陆状态（在未登陆状态下打开其他页面，需要获取登陆状态，跳转登陆页面）

vuex 的属性

1. state：存放数据的地方，state 中的数据是响应式的，数据发生改变时，依赖数据的组件页面也会更新， 类似组件中的 data
2. getters：计算属性，对 state 中存储的数据进行操作，类似 computed
3. mutations：提交更改数据的方法
4. actions：派发数据，更改异步方法

vuex 的好处？

1. 使用多层嵌套的组件，使用 vueX 进行状态管理更好的维护，不用组件之间来回传值
2. 对于大型项目，使用 vueX，数据更好的操作和维护
3. 缓存数据，存储到 vuex 中，减少 Http 请求

vue 组件之间的通讯

1. props: 使用 props 父组件向子组件进行传值
2. $emit: 子组件 通过派发事件方式给 父组件 ，通过 父组件 更改数据
3. $children/$parent 通过 $children 可以获取子组件中的数据状态和方法，通过$parent 可以获取父组件中的数据和方法
4. provide / inject 父组件使用 provide 注册数据，子组件使用 inject 接受数据，provide 中的数据并不是响应式的
5. slot：通过插槽的方式进行数据传值
6. EventBus：父子组件，跨组件都可使用

slot 插槽

什么是插槽

插槽类似于一个占位符，父组件中占位，在子组件中进行内容填充

插槽分为 默认插槽 剧名插槽 作用域插槽

默认插槽： 在父组件中使用 slot ，在子组件中直接写入 dom 内容 具名插槽：父组件中加上 slot 属性，子组件中使用 name 插槽名字。插入制定位置

js 面试题

es6 新增特性

1. let 与 const
   • let 声明的变量只在 let 命令所在的代码块内有效
   • let 不能重复声明
   • let 不存在变量提升，var 声明的变量会存在变量提升
   • const 声明一个只读的常量，一旦声明，常量的值就不能改变
2. 结构赋值
3. 模版字符串