前端vue常见基础面试问题

vue的双向绑定

vue数据的双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。
其核心就是通过Object.defineProperty()方法设置set和get函数来实现数据的劫持，在数据变化时发布消息给订阅者，触发相应的监听回调。
也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变 MVVM是Model-View-ViewModel的简写
Model：数据模型层，用来处理业务逻辑和与数据库交互 View：视图层，DOM
ViewModel：视图模型层，用来处理Model层和View层的交互 在MVVM框架中，将View层的状态和行为抽象化，视图 UI
和业务逻辑分开，ViewModel层通过双向绑定，把View层和Model层联系起来。ViewModel会自动的来处理这些事情

如何实现路由懒加载

可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力 减少首页加载用时。 component: () =>
import(‘./Foo.vue’) // 或者 component: resolve => require()

vue生命周期函数有哪些？

beforeCreate(),created(), beforeMount, mounted,beforeUpdate,
updated，beforeDestory，destory vue生命周期总共有几个阶段? 可以总共分为8个阶段：创建前/后,
载入前/后,更新前/后,销毁前/后

vuex有哪几种属性？

有五种，分别是 State、 Getter、Mutation 、Action、 Module。 分别有什么作用？
-state 存储vue中需要共享的状态(数据)，只能在mutations中修改，被修改后会自动更新使用的组件页面。
-actions 提交异步请求，组件通过this.$store.dispatch{(}^{\prime }行{为}^{\prime }{,}^{\prime }{值}^{\prime })，可在这里发送请求,之后可以通过commit{(}^{\prime }行{为}^{\prime }{,}^{\prime }{值}^{\prime })来提交给mutations，如果不需要向服务器发送请求，可以在组件中通过this.$store.commit(‘行为’,‘值’)来直接提交到mutations里
-mutations 同步操作，可以在此修改state里的值，行为(state,‘值’){}
-getters state的计算属性，可以在此对state的数据进行加工 Modules：Vuex 允许我们将 store 分割到模块

action和mutation区别

Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；Action
可以包含任意异步操作

什么是vue生命周期?

Vue
实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是
Vue 的生命周期。

组件之间的传值？

父组件通过标签上:data=data方式定义传值 子组件通过props方法接受数据 子组件通过$emit方法传递参数

watch和computed的区别

Watch只能监听data中的数据变化，可以进行异步操作.
computed不能进行异步操作，不修改原始数据，通过return返回处理的数据，可以包含大量的逻辑运算

为什么不能v-for和v-if一起使用

v-for 优先级是比 v-if 高 永远不要把 v-if 和 v-for
同时用在一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）

v-show 与 v-if 的区别？

v-show指令是通过修改元素的display的CSS属性让其显示或者隐藏； v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果；
使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。

如何让 CSS 只在当前组件中起作用？

将当前组件的

keep-alive 的作用是什么?

包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。

Vue 组件引入步骤?

1.采用ES6的import … from …语法或CommonJS的require()方法引入组件;
2.对组件进行注册,代码如下 Vue.component
3.使用组件

vue解决跨域

只有浏览器才存在跨域
-cors后端配置响应头，真正意义上的解决跨域
-jsonp

路由传参和获取

query传参 拼接或者对象参数传过去
-使用router-link时 用标签 router-link里的 :to在路由里直接传参 使用this.$route.query.id获取params传参对象或直参数接收参数this.$route.params.id

路由守卫

对路由进行权限控制
router.beforeEach：全局前置路由守卫，to：目标路由，from：来源路由，next():放行；自定义参数需要配置在路由元信息(meta)里配置，用来控制权限。
router.afterEach():全局后置路由守卫，可用于动态更改页面标题。
beforeEnter():单个路由配置，路由独享守卫，对某一个路由进行权限设置。
beforeRouteEnter():组件内置守卫，通过路由规则，进入组件之前调用。
beforeRouteLeave():组件内置守卫，通过路由规则，离开组件之前调用。

vue3的优点

-性能提升 打包大小减少41%初次渲染快55%，更新渲染快133%，内存减少54% vue3可以更好的支持typescript 源码升级 新特性

$set是干什么的

当数据变化但没有更新视图时使用，例如对象新增加的属性，数组新增加的成员 this.$set(obj,“key”,“value”)

$nextTick是干什么的

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。