2024最新前端vue面试题_vue面试题2023

2024最新前端vue面试题——基础版’

1、vue的优点？
（1）轻量级框架；
（2）简单易学；
（3）双向数据绑定；
（4）组件化；
（5）视图、数据、结构分离；
（6）虚拟DOM；
（7）运行数据更快。

2、vue父组件向子组件传递数据？
通过props

3、子组件向父组件传递事件？
$emit方法

4、v-show和v-if指令的共同点和不同点？
共同点：都能控制元素的显示和隐藏。
不同点：v-show本质就是通过控制css中的display设置为none；v-if是动态地向DOM树内添加或者删除DOM元素。

5、如何让CSS只在当前组件中起作用？
在组件中的style前面加上scoped。

6、keep-alive的作用是什么？
keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，避免重新渲染。

7、如何获取dom？
ref=‘domName’
this.$refs.domName

8、说说几种vue中的指令和它的用法？
v-model:双向数据绑定；
v-for:循环；
v-if和v-show:显示与隐藏；
v-on:绑定事件；
v-once:只绑定一次。

9、vue-loader是什么？使用它的用途有哪些？
vue文件的一个加载器，将template\js\style转换成js模块。
用途：js可以写成es6、style样式可以scss或者less、template可以加jade等。

10、为什么使用key？
需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确识别此节点。
作用主要是为了高效的更新虚拟dom。

11、axios的安装及其使用？
axios是请求后台资源模块。
npm install axios --save装好。
js中使用import引进来，然后.get或者.post。如果成功返回在.then函数中，失败则是在.catch函数中。

12、v-model的使用？
v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：
（1）v-bind绑定一个value属性；
（2）v-on给当前元素绑定input事件。

13、请说出vue.cli项目中src目录每个文件夹和文件的用法？
main.js是入口文件；
app.vue是一个应用主组件；
components是放组件；
router是定义路由相关的配置；
assets文件夹是放静态资源。

14、computed和watch的使用场景？
computed：当一个属性受多个属性影响的时候就需要用到computed。最典型的例子：购物车商品结算的时候。
watch：当一条数据影响多条数据的时候就需要用watch。例子：搜索数据。

15、v-on可以监听多个方法吗？
可以

**16、$nextTick的使用\ast \ast 当我们修改了data的值后马上获取这个dom元素的值，是不能获取到更新后的值的，这个时候需要使用$nextTick回调，
让修改后的data值渲染到dom元素之后再获取，才能成功。

17、vue组件中的data为什么必须是一个函数？
这是因为JavaScript的特性所导致的，在components中，data必须以函数的形式存在，不可以是对象。
组件中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候都会返回一个新的data，
相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。

18、渐进式框架的理解？
主张最少；可以根据不同的需求选择不同的层级。

19、vue中的数据双向绑定时如何实现的？
vue中的数据双向绑定是通过数据劫持结结合发布订阅模式的方式来实现的，也就是说数据和视图同步，
数据发生变化，视图跟着变化，视图变化，数据也随之发生变化。
关于vue双向数据绑定的核心是Object.defineProperty()方法。

20、单页面应用和多页面应用的区别及优缺点？
（1）单页面应用(SPA)，通俗一点说就是只有一个主页面的应用，浏览器一开始要加载所有必须的html、css和js，多用于pc端。
（2）多页面应用(MPA)，就是指一个应用有多个页面，页面跳转时是整夜刷新。
单页面应用的优点：用户体验好，快，内容的改变不需要重新加载整个页面。
单页面应用的缺点：不利于SEO，导航不可用，如果一定要导航需要自行实现前进、后退。初次加载耗时多，页面的复杂度也会提高。

好啦，以上就是本人总结的今年最新的前端vue基础面试题了，创作不易，感谢点个赞加关注呗，为你带来更多精彩的技术分享。