【前端面试题——vue3篇】（二）

【前端面试题——vue3篇】(一)https://developer.aliyun.com/article/1399662

16.v-model的使用

表单控件在实际开发中是非常常见的，特别是对于用户信息的提交，需要大量的表单

Vue中使用v-model指令来实现表单元素和数据的双向绑定

• 案例的解析：

• 当我们在输入框输入内容时
• 因为input中v-model绑定了message，所以会实时将输出的呢容传递给message，message发生改变。
• 当message发生改变时，因为上面我们使用Mustache语法，将message的值参入到DOMZ中，所以DOM会发生相应的变化
• 所以通过v-model实现了双向绑定

17.v-on可以监听多个方法吗

可以

 <div class="pa">
 <button v-on='
 {
     click:dianji,
     focus:focu,
     blur:blu
 }'>
监听多个方法的写法
</button>
 </div>

18.vue中过滤器有什么作用及详解

过滤器分为全局过滤器和局部过滤器，

全局过滤器可以在任何组件调用，局部过滤器只能在当前组件调用，

过滤器使用|管道符调用。可以串联使用。

19.EventBus注册在全局上时路由切换时会重复触发事件，如何解决

建议在created里注册，在beforeDestory移出

在组件内的beforeRouteLeave中移除事件监听

20.vuex有哪几种属性

• state

state：state类似容器，包含应用的大部分状态

一个页面只能有一个state

状态存储是响应式的

不能直接改变 state 中的状态，唯一途径显式地提交mutations

• mutations

mutations：更改store中的状态唯一方法就是提交mutation，它是同步的，每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。更改 Vuex 的 state 中的状态的唯一方法是提交 mutation。回调函数可以接受两个参数，第一个参数是state状态，第二个参数是 mutation 的载荷就是外面store.commit 传入额外的参数。

mutations其实就相当于我们vue里面的methods，也是定义方法的，只不过这个方法可以在多个组件调用就是了。

使用mutations中的方法格式： this.$store.commit(‘名称’)

• getters

getters：相当于state的计算属性，从state派生出一些状态

• actions

actions：Action 类似于 mutation，不同在于：

action 提交的是 mutation，而不是直接变更状态；

action可以进行任何异步操作，mutation不可以；

• modules

modules：模块化管理，有多个state可以通过模块化import到index.js的module属性中，可直接进行调用。参考vue的组件化思想。

21.请详细说下你对vue生命周期的理解

vue2.0生命周期：

创建阶段

beforeCreate()创建前阶段，这个时候还不能使用data中的数据。

created()创建完成 最早可以使用data中的数据

挂载阶段

beforeMount:在挂载开始之前被调用: 相关的 render 函数首次被调用

mounted: 挂载完成，DOM节点挂载到实例上去之后调用该钩子

更新阶段

beforeUpdate:数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。

updated: 数据更新完成并且DOM更新完成后调用销

销毁阶段

beforeDestroy:实例销毁之前调用。在这一步，实例仍然完全可用

destroved:Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定

vue3.0

• 去掉了vue2.0中的 beforeCreate 和 created 两个阶段，同样的新增了一个 setup
• beforeMount 挂载之前 改名 onBeforeMount
• mounted 挂载之后 改名 onMounted
• beforeUpdate 数据更新之前 改名 onBeforeUpdate
• updated 数据更新之后 改名 onUpdated
• beforeDestroy 销毁前 改名 onBeforeUnmount,可在此进行清除定时器，进行事件监听，发布订阅。
• destoryed 销毁后 改名 onUnmounted
• errorCaptured 报错 改名 onErrorCaptured

总结

不难发现3.0中钩子函数最大的变化就是setup代替了2.0中的beforeCreate和created，而对应其它几个函数来说都是名称上发生了一些变化，其功能基本上还是一样的。

22.vue优点

• vue作为一款轻量级框架，门槛低，上手快，简单易学。
• vue可以进行组件化开发，数据与结构相分离，使代码量减少，从而提升开发效率，易于理解
• vue最突出的优势在于对数据进行双向绑定，使用虚拟DOM
• 相较于传统页面通过超链接实现页面跳转，vue会使用路由跳转不会刷新页面
• vue是单页面应用，页面局部刷新，不用每次跳转都请求数据，加快了访问速度，提升了用户体验

23.单页面应用和多页面应用区别及优缺点

单页应用 页面跳转---->js渲染

优点：页面切换快 缺点：首屏加载稍慢，seo差

多页应用 页面跳转---->返回html

优点：首屏时间快，seo效果好 缺点：页面切换慢

24.vue路由跳转传参的方式有哪些

在template中可以使用标签实现跳转。

• router-link 标签直接拼接参数实现跳转

   点击跳转

<router-link to="/t?index=1">
     <button class="btn btn-default">点击跳转</button>
</router-link>

• router-link 标签使用to属性结合query实现跳转，里面是参数字典

<router-link :to="{path:'/t',query: {index: 1}}">
     <button class="btn btn-default">点击跳转</button>
</router-link>

• this.$router.push() (@click函数里面调用)

this.$router.push({path: '/路径?参数=1'})
接收参数
this.$route.query.index

• query和 params区别

• query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传,密码之类还是用params刷新页面id还在
• params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失

• VUE几种路由跳转几种方式的区别

• this.$router.push：跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面
• this.$router.replace：跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)
• this.$router.go(n)：向前或者向后跳转n个页面，n可为正整数或负整数

25.vue遇到的坑，如何解决的

axios封装和api接口的统一管理

• axios的封装，主要是用来帮我们进行请求的拦截和响应的拦截。
• 在请求的拦截中我们可以携带userToken，post请求头、qs对post提交数据的序列化等。
• 在响应的拦截中，我们可以进行根据状态码来进行错误的统一处理等等。
• axios接口的统一管理，是做项目时必须的流程。这样可以方便我们管理我们的接口，在接口更新时我们不必再返回到我们的业务代码中去修改接口。

26.vue封装通用组件方法思路

点击查看

27.Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中

如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。

如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用。

28.Vuex中如何异步修改状态

actions和之前讲的Mutations功能基本一样，不同点是，actions是异步的改变state状态，而Mutations是同步改变状态（会互相干扰）.

actions 里面放我们函数，函数里面的参数context ，可以帮我们提交的mutations。主要逻辑其实就是在组件内部，调用actions之后，actions里面又去调用mutations,而mutations又去修改了state。

mutations:{
      increate(state){ //payload:携带参数
         state.counter++
      }
    },
    actions:{
       //放函数,
        increateAction(context){
            context.commit("increate")
        }
    }

import {useStore} from 'vuex'
import {onMounted} from "vue"
export default {
setup(){
    const store=useStore()
    onMounted(() => {
        store.dispatch("getHomeMutidata")
    }),
    return{
    }
}

29.刷新浏览器后，Vuex的数据是否存在?如何解决

vuex的数据在刷新浏览器后不会保存，

这是因为vuex实例store里的数据保存在运行内存中，页面刷新会重载vue实例，导致store里的数据丢失

解决方法：

• 下载持久化存储插件，例如：vuex-along，vuex-persist、vuex-persistedstate
• 使用localStorage 或者 sessionStroage

30.vuex中的辅助函数怎么使用

• mapState

mapState 函数返回的是一个对象。通常，我们需要使用一个工具函数将多个对象合并为一个，以使我们可以将最    终对象传给 computed 属性。自从有了对象展开运算符，我们可以极大地简化写法：（使用扩展运算符）

• mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性
• 使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit，其原理就是将this.montify 映射为this.$store.commit(‘montify’)
• 在组件中使用 this.$store.dispatch(‘prodect’) 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用

【前端面试题——vue3篇】（三）https://developer.aliyun.com/article/1399695