vue常见面试问题（vue 常见面试题）
今天给各位分享vue常见面试问题的知识，其中也会对vue 常见面试题进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
本文目录一览：
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面试题大全
1. vue生命周期都有哪些？
2. 进入页面会执行哪些生命周期函数
beforeCreate、created、beforeMounted、mounted
3. 在哪里可以访问 data
beforeCreate中不可以访问
created中有 el
beforeMounte中有 el
mouted中都有，包括之后的生命周期钩子函数都有
4、 如果加入了keep-alive会增加两个生命周期函数
activated和deactivated
进入页面的时候触发activated，离开页面触发 deactivated
5. 如果加入keep-alive组件，第一次进入页面会触发哪些生命周期
beforeCreate、created、beforeMounted、mounted、activated
6、 如果加入了keep-alive组件后，第二次或第n次进入页面会触发哪些生命周期？
只触发一个生命周期：activated(因为该页面已经被缓存起来了)
1.是什么
vue自带的一个组件，用来缓存组件，提升性能，keep-alive可以在组件切换时，保存其包裹组件的状态，使其不被销毁。
2、参数
include：表示只有匹配的组件才会被缓存；
exclude：表示匹配到的组件不会被缓存；
3、生命周期
有两个生命周期函数，同上
4.使用场景
-列表页面跳转详情页的时候，用户通过点击跳转，那么详情页每次都要去请求数据，如果用户每次点击的都是同一个，那么详情页就没必要去重新请求，直接缓存起来就行了，如果点击的不是同一个再重新发起请求；
-在router-view上使用可以缓存路由组件；
1.相同点
都可以控制元素的显示隐藏
2.区别
v-if通过创建/销毁dom元素来控制元素的显示隐藏，v-show通过css属性的display:none来控制元素的显示隐藏
3.场景
频繁切换使用v-show，会节省性能，反之使用v-if
1、当项目使用keep-alive时，可搭配组件name进行缓存过滤
当我们使用keep-alive缓存组件时，被缓存组件中的mounted函数只会执行一次，第二次进入页面不会重新触发，有两种解决方法，一种是使用activated()，在里面进行mounted中的操作；另一种就是在keep-alive中增加一个过滤，如下所示：
exclude属性就是要忽略匹配到的组件。
2、DOM做递归组件时；
当组件需要自己调用自己的时候
3、使用vue-tools时；
vue-devtools调试工具里显示的组件名称是由vue中组件name决定的
v-for的优先级比v-if的优先级高，这是在源码中规定好的，并且v-for和v-if不可以同时使用，同时使用会很浪费性能，比如明知判断条件是false的情况下，还需要去遍历一下数据，所以通常我们会把v-if放在v-for的外面。
是用来获取更新后的dom内容，并且该方法是异步的
作用是将回调函数延迟到下次dom更新循环之后执行因为vue更新数据是异步的，修改data中的数据，视图不会立刻更新，vue会将你对data的修改放到一个watch队列中，当同一事件循环中的所有数据更新完以后，再进行试图更新，所以会产生延迟。
最常见的使用场景就是，在created中获取dom元素的时候需要使用$nextTick获取
组件中的 data 写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的 data ，相当于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份 data ，就会造成一个变了全都会变的结果。
当父组件给子组件传递数据的时候，子组件只允许对数据进行读取，不允许修改数据，因为当子组件修改了父组件传过来的数据时，其他引用父组件数据的组件也会被修改，从而导致报错，然而也不知道是当前组件报错还是父组件报错还是修改父组件信息的子组件的错误；
如果要修改可以通过this.$emit方法派发自定义事件，在父组件中修改；
hash模式和history模式，默认是hash模式
区别如下：
1、表现形式不同，hash使用#表示，history用/表示；
2、hash值不会发送到服务端，history会发送到服务端 ，如果没有匹配到对应的路由，需要配置对应的页面；
3、获取方式不同，hash值可以通过location.path获取，history通过location.pathname获取；
4、hash可以通过window.onhashchange监听hash值的改变 ，history
可以通过onpopstate监听变化；
组建中的template标签会编译为render函数，通过render函数创建出dom元素，然后转化为虚拟dom最终转化为真实dom
1、虚拟dom是一个js对象，用对象属性来描述节点，是一层对真实dom的抽象
2、因为dom的执行速度远不如js执行速度快，因此将真实的dom抽象成js对象，然后通过算法计算出真正需要更新的节点，从而减少了大量的dom操作。
3、将直接操作dom转换成了两个js对象中去比较，找出差异项，做局部更新，提高了执行效率。
未完待续...
有关vue的常见面试题（上）
防抖 ：一个频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效。
例：防抖经常用在我们搜索框输入搜索，点击提交，防止等；
节流 ：一个频繁触发的函数，在规定时间内，函数执行一次后，只有大于设定的执行周期后才会执行第二次。
例：节流一般在onresize、mousemove、滚动事件等事件中使用，防止过多的请求造成服务器压力
盒模型的组成：元素的内容content、元素的内边距padding、元素的外边距margin、元素的边框border
盒模型分为 ： W3C标准盒子 、IE盒子
W3C标准盒子（content-box） ：又称内容盒子，是指块元素box-sizing属性为content-box的盒模型，盒子总宽度 = margin + border + padding + width
IE盒子（border-box） ：又称怪异盒模型（边框盒子），是指块元素box-sizing属性为border-box的盒模型，盒子总宽 = margin + width
1.toString()与join()一样都是把数组转成以逗号分割的字符串
2.pop() 删除数组的最后一项
3.push() 往数组最后添加新数据
4.shift() 删除数组最前面的一项
var定义的变量可以修改，如果不初始化会输出undefined，不会报错。
const定义的变量不可以修改，而且必须初始化
let是块级作用域，函数内部使用let定义后，对函数外部无影响。
1.都支持服务器端渲染
2.都有虚拟dom,组件化开发,都有‘props’的概念,允许父组件往子组件传送数据,都实现webComponent规范
3.数据驱动视图
4.都有支持native的方案,React的React native,Vue的weex
5.构建工具
React和Vue都有自己的构建工具，你可以使用它快速搭建开发环境。React可以使用Create React App (CRA)，而Vue对应的则是vue-cli。都有管理状态，React有redux,Vue有自己的Vuex
设计思想
react
1.函数式思想，all in js ,jsx语法，js操控css
2.单项数据流
3.setState重新渲染
4.每当应用的状态被改变时，全部子组件都会重新渲染。当然，这可以通过shouldComponentUpdate这个生命周期方法来进行控制，如果为true继续渲染、false不渲染，但Vue将此视为默认的优化。
vue
1.响应式思想，也就是基于数据可变的。把html、js、css、组合到一起，也可以通过标签引擎组合到一个页面中
2.双向绑定，每一个属性都需要建立watch监听（页面不用，涉及到组件更新的话需要）
3.Vue宣称可以更快地计算出虚拟 DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树
性能
react ----大型项目、优化需要手动去做，状态可控
vue ------中小型项目、状态改变需要watch监听，数据量太大的话会卡顿
扩展性
react
1 类式写法api少，更容易结合ts
2 可以通过高阶组件来扩展
vue
1 声明式写法，结合ts比较复杂
2 需要通过mixin方式来扩展
vue-router提供了导航钩子:全局前置导航钩子 beforeEach和全局后置导航钩子 afterEach
导航钩子3个参数(to,from,next):
到达这个组件时：
离开这个组件时：beforeRouteLeave:(to,from,next)={}
确认离开next();取消离开next(false)；
beforeEnter:(to,from,next)={}，用法与全局守卫一致。只是，将其写进其中一个路由对象中，只在这个路由下起作用。
方法一：
子组件绑定一个事件，通过 this.$emit() 来触发
在子组件中绑定一个事件，并给这个事件定义一个函数
在父组件中定义并绑定 handleChange 事件
方法二：
通过 callback 函数
先在父组件中定义一个callback函数，并把 callback 函数传过去
在子组件中接收，并执行 callback 函数
方法三：
通过 $parent /$children 或 $refs 访问组件实例
这两种都是直接得到组件实例，使用后可以直接调用组件的方法或访问数据。
这种方式的组件通信不能跨级
方法四：
$attrs和$listeners
关于vue常见面试问题和vue 常见面试题的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
陕ICP备2021009819号