vue移动端面试题（vue基础面试题）
今天给各位分享vue移动端面试题的知识，其中也会对vue基础面试题进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
本文目录一览：
三十七个常见Vue面试题
映射关系简化，隐藏controller MVVM在MVC的基础上，把控制层隐藏掉了。
Vue不是一个MVVM框架，它是一个视图层框架。
ViewModal是一个桥梁，将数据和视图进行关联。
数组和对象类型的值变化的时候，通过defineReactive方法，借助了defineProperty，将所有的属性添加了getter和setter。用户在取值和设置的时候，可以进行一些操作。
缺陷：只能监控最外层的属性，如果是多层的，就要进行全量递归。
get里面会做依赖搜集（dep[watcher, watcher]） set里面会做数据更新（notify，通知watcher更新）
vue中对数组没有进行defineProperty，而是重写了数组的7个方法。 分别是：
因为这些方法都会改变数组本身。
数组里的索引和长度是无法被监控的。
Vue初始化的时候，挂载之后会进行编译。生成renderFunction。
当取值的时候，就会搜集watcher，放到dep里面。
当用户更改值的时候，就会通知watcher，去更新视图。
这个问题的核心是如何将template转换成render函数。
Vue的生命周期钩子是回调函数，当创建组件实例的过程中会调用相应的钩子方法。 内部会对钩子进行处理，将钩子函数维护成数组的形式。
Vue的mixin的作用就是抽离公共的业务逻辑，原理类似对象的继承，当组件初始化的时候，会调用mergeOptions方法进行合并，采用策略模式针对不同的属性进行合并。 如果混入的数据和本身组件的数据有冲突，采用本身的数据为准。
缺点：命名冲突、数据来源不清晰
new Vue是一个单例模式，不会有任何的合并操作，所以根实例不必校验data一定是一个函数。 组件的data必须是一个函数，是为了防止两个组件的数据产生污染。 如果都是对象的话，会在合并的时候，指向同一个地址。 而如果是函数的时候，合并的时候调用，会产生两个空间。
nextTick是一个微任务。
Vue的diff算法是平级比较，不考虑跨级比较的情况。内部采用深度递归的方式+双指针方式比较
所以采用watcher + Diff算法来检测差异。
产生组件虚拟节点 - 创建组件的真实节点 - 插入到页面
属性更新会触发patchVnode方法，组件的虚拟节点会调用prepatch钩子，然后更新属性，更新组件。
先渲染异步占位符节点 - 组件加载完毕后调用forceUpdate强制更新。
正常的一个组件是一个类继承了Vue。
函数式组件，就是一个普通的函数。
主要作用是为了实现批量传递数据。
provide/inject更适合应用在插件中，主要实现跨级数据传递。
首先，v-for和v-if 不能在同一个标签中使用。
先处理v-for，再处理v-if。
如果同时遇到的时候，应该考虑先用计算属性处理数据，在进行v-for，可以减少循环次数。
在组件上用的v-model，是model和callback
在普通元素上用v-model，会生成指令，还可能因为不同的元素：
指令在什么时候会调用？
源码：
普通插槽是渲染后做替换的工作。父组件渲染完毕后，替换子组件的内容。
在模板编译的时候，处理组件中的子节点和slot标签
在创建元素的时候，用_t()方法方法来替换_v()的内容。
作用域插槽可以拿到子组件里面的属性。在子组件中传入属性然后渲染。
作用域插槽的编译结果：
Vue.use是用来使用插件的。我们可以在插件中扩展全局组件、指令、原型方法等。 会调用install方法将Vue的构建函数默认传入，在插件中可以使用vue，无需依赖vue库
使用有两个场景，一个是动态组件，一个是router-view
这里创建了一个白名单和一个黑名单。表明哪些需要需要做缓存，哪些不需要做缓存。以及最大的缓存个数。
缓存的是组件的实例，用key和value对象保存。
加载的时候，监控include和exclude。
如果不需要缓存，直接返回虚拟节点。
如果需要缓存，就用组件的id和标签名，生成一个key，把当前vnode的instance作为value，存成一个对象。这就是缓存列表
如果设置了最大的缓存数，就删除第0个缓存。新增最新的缓存。
并且给组件添加一个keepAlive变量为true，当组件初始化的时候，不再初始化。
钩子函数有三种：
Vuex是专门为vue提供的全局状态管理系统，用于多个组件中的数据共享、数据缓存。
问题：无法持久化。
史上最全前端vue面试题！推荐收藏
1.为什么会形成跨域？
不是一个源的文件操作另一个源的文件就会形成跨域。当请求端的协议、域名、端口号和服务器的协议、域名、端口号有一个不一致就会发生跨域。
解决方法：安装插件
Pip install django-cors-headers
2.vuex的工作流程？
① 在vue组件里面，通过dispatch来出发actions提交修改数据的操作。
② 然后再通过actions的commit来出发mutations来修改数据。
③ mutations接收到commit的请求，就会自动通过Mutate来修改state（数据中心里面的数据状态）里面的数据。
④ 最后由store触发每一个调用它的组件更新。
3.vuex是什么？怎么使用？
vuex是一个专为vue.js应用程序开发的状态管理模式。使用:store,getters,mutations,actions,modules详细使用写法请见：
4.vuex中的数据在页面刷新后数据消失怎么解决？
使用sessionStorage或localStorage存储数据;也可以引入vuex-persist插件
5.在vue中，如何阻止事件冒泡和默认行为？
在绑定事件时，在指令后边加上修饰符.stop来阻止冒泡，.prevent来阻止默认行为
6.深拷贝与浅拷贝？
假设B复制A，修改A的时候，看B是否变化：B变了是浅拷贝（修改堆内存中的同一个值），没变是深拷贝（修改堆内存中不同的值）。浅拷贝只是增加了一个指针指向已存在的内存地址，深拷贝是增加了一个指针并申请了一个新的内存，使这个增加的指针指向这个新的内存。深拷贝和浅拷贝最根本的区别在于是否真正获取一个对象的复制实体，而不是引用。
7.vue的生命周期？
beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyedactived deactived （keep-alive）组件是否激活调用
8. keep-alive: 组件缓存
router.js中:
meta: {keepAlive:true} // 需要被缓存
钩子执行顺序：created - mounted - actived
include表示需要缓存的页面；exclude表示不需要缓存的页面。如果两个同时设置，exclude优先级更 改，则组件不会被缓存。
应用场景： 用户在某个列表页面选择筛选条件过滤出一份数据列表，由列表页面进入数据详情页面，再返回 该列表页，我们希望列表页可以保留用户的筛选状态。
9.vue传值方式？
props $emit() $on() $parent $children $listener $attr
10. $on 兄弟组件传值
$emit 分发
$on 监听
$off 取消监听
$once 一次性监听一个事件
在js文件中定义一个中央事件总线Bus，并暴露出来
具体的实现方式：
使用Bus的时候在接收Bus的组件的beforeDestroy函数中销毁Bus，否则会一直叠加调用这个方法。
应用场景：“退出登录” - ①点击退出登录；②修改密码后自动退出登录
11.组件跨级传值
$attrs a-b-c
$listeners 监听
12.vue事件修饰符有哪些？
.stop .prevent .self .once .passive .sync
13.箭头函数中的this？
不具有this绑定，但函数体可以使用this，这个this指向的是箭头函数当前所处的词法环境中的this对象。
15.为什么vue组件中data必须是一个函数？
如果不是函数的话，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了，当他是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，就不会互相影响。
16.v-if 和 v-show区别？
v-if 是对标签的创建与销毁， v-show 则仅在初始化时加载一次，v-if 开销相对来说比v-show 大；
v-if 是惰性的；v-show 做的仅是简单的css切换。
17.v-text 与 v-html区别？
v-text 用于普通文本，不能解析html；
v-html 反之。
18.v-for key的作用？
使用v-for更新渲染过的数据，它默认用“就地复用”策略。如果数据项的顺序改变，vue将不是移动DOM元素来匹配数据项的改变，而是简单地复用此处每个元素，并确保在特定索引下显示已被渲染过的每个元素。key属性类型只能是string或number。
key的特殊属性主要用在虚拟DOM算法，在新旧node对比时辨识VNods。如不使用key，vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法，它会基于key的变化重新排列元素顺序。
19.Scss是什么？在vue-cli中安装步骤？有哪几大特性？
npm 下载loader （sass-loader,css-loader,node-sass）,在webpack中配置extends属性（加.scss拓展） Vscode中可在扩展中下载;
特性：可以用变量，可以用混合器，可以嵌套等。
20.vue获取dom？
ref
21.vue初始化页面闪动问题？
webpack、vue-router
v-cloak css:[v-cloak]:display:none
22.什么是vue-router？
vue router 是官方路由管理器。
主要功能：路由嵌套，模块化 基于组件路由配置，路由参数、查询、通配符，细粒度导航控制，自定义的滚动条行为等。
23.vue路由传参，接收？
传： this.$router.push({path:'', query(params):{}})
接：this.$router.query.xxx
24.防抖和节流？
节流是一定时间内执行一次函数，多用在scroll事件上；
防抖是在一定时间内执行最后一次的函数，多用在input输入操作，表单提交等。
25.如何让scss只在当前组件中起作用？
vue常见面试题（3）
1. 什么是vue的计算属性computed
计算属性是需要复杂的逻辑，可以用方法method代替
2.vue-cli提供的几种脚手架模板
vue-cli 的脚手架项目模板有browserify 和 webpack；
3.组件中传递数据？
4. vue-router实现路由懒加载（ 动态加载路由 ）
5. vue-router 的导航钩子,主要用来作用是拦截导航,让他完成跳转或取消
6. 完整的 vue-router 导航解析流程
7. vue-router如何响应 路由参数 的变化？
原来的组件实例会被复用。这也意味着组件的生命周期钩子不会再被调用。你可以简单地 watch (监测变化) $route 对象：
8.vue-router的几种实例方法以及参数传递
name传递
to来传递
采用url传参
9. is的用法（用于动态组件且基于 DOM 内模板的限制来工作。）
is用来动态切换组件，DOM模板解析
tabletris="my-row"/tr /table
10.vuex是什么？怎么使用？哪种功能场景使用它？
是什么：vue框架中状态管理:有五种，分别是 State、 Getter、Mutation 、Action、 Module
使用：新建一个目录store，
场景：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车
vuex的State特性
A、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data
B、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新
C、它通过mapState把全局的state和getters映射到当前组件的computed计算属性中
vuex的Getter特性
A、getters可以对State进行计算操作，它就是Store的计算属性
B、虽然在组件内也可以做计算属性，但是getters可以在多组件之间复用
C、如果一个状态只在一个组件内使用，是可以不用getters
vuex的Mutation特性
改变store中state状态的唯一方法就是提交mutation，就很类似事件。每个mutation都有一个字符串类型的事件类型和一个回调函数，我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数，那么我们需要执行一个相应的调用方法：store.commit。
Action类似于mutation，不同在于：Action提交的是mutation，而不是直接变更状态；Action可以包含任意异步操作，Action函数接受一个与store实例具有相同方法和属性的context对象，因此你可以调用context.commit提交一个mutation，或者通过context.state和context.getters来获取state和getters。Action通过store.dispatch方法触发：eg。store.dispatch('increment')
vuex的module特性Module其实只是解决了当state中很复杂臃肿的时候，module可以将store分割成模块，每个模块中拥有自己的state、mutation、action和getter
vue移动端面试题的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue基础面试题、vue移动端面试题的信息别忘了在本站进行查找喔。
