大家好，我是讯享网，很高兴认识大家。



vue面试题目

• vue数据

• 1. 说一下Vue的双向绑定数据的原理
• 2. 解释单向数据流和双向数据绑定
• 3. Vue 如何去除url中的
• 4. 对 MVC、MVVM的理解
• 5. 介绍虚拟DOM
• 6. vue生命周期的理解
• 7. 组件通信
• 8. vue-router 路由实现
• 9. v-if 和 v-show 区别
• 10. \( route和\)router的区别
• 11. NextTick 是做什么的
• 12. Vue 组件 data 为什么必须是函数
• 13. 计算属性computed 和事件 methods 有什么区别
• 14. 对比 jQuery ，Vue 有什么不同
• Vue 中怎么自定义指令
• 16. Vue 中怎么自定义过滤器
• 17. 对 keep-alive 的了解
• 18. Vue 中 key 的作用
• 19. Vue 的核心是什么
• 20. vue 等单页面应用的优缺点
• 21. vue-router 使用params与query传参有什么区别
• MVVM的设计思想的优势?
• 事件传参
• 自定义指令：directive
• 计算属性：computed
• 监听器：watch
• 过滤器
• 组件

• 如何创建一个全局组件
• 如何创建一个局部组件
• 如何定义局部自定义指令
• 如何定义局部过滤器

• 组件传值

• 父向子传值
• 子向父传值
• 兄弟组件传值
• 跨组件传值

• 组件插槽
• Promise的使用
• axios拦截器
• 路由
• 在vue中路由传参
• 嵌套路由
• 编程式导航
• 路由钩子
• vue脚手架的安装和使用

• 命令行方式
• ui界面方式
• 安装element-ui
• 使用element中select组件

• 安装axios
• vue动画
• 利用类名添加动画
• 结合css动画库设置动画
• 加深面试题

• 虚拟dom
• Diff算法
• axios配置代理服务器
• 小程序分包加载
• v-if和v-for避免结合使用
• vue中route和router的区别
• 如何封装一个插件
• vueI18n的使用

• keep-alive

• 使用了本地存储为什么还使用vuex？
• js

• 重中之重、Vue的双向数据绑定原理是什么？
• 一、什么是MVVM？
• 二、mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？
• 三、vue的优点是什么？
• 四、 组件之间的传值？
• 五、路由之间跳转
• 六、vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？
• 七、vue如何实现按需加载配合webpack设置
• 八、vuex面试相关

• （1）vuex是什么？怎么使用？哪种功能场景使用它？
• （2）vuex有哪几种属性？
• （3）不用Vuex会带来什么问题？

• 九、 v-show和v-if指令的共同点和不同点
• 十、 如何让CSS只在当前组件中起作用
• 十一、的作用是什么?
• 十二、Vue中引入组件的步骤?
• 十三、指令v-el的作用是什么?
• 十四、在Vue中使用插件的步骤
• 十五、请列举出3个Vue中常用的生命周期钩子函数
• 十六、active-class是哪个组件的属性？
• 十七、怎么定义vue-router的动态路由以及如何获取传过来的动态参数？
• 十八、vue-router有哪几种导航钩子？
• 十九、生命周期相关面试题

• （1）、什么是vue生命周期
• （2）、vue生命周期的作用是什么
• （3）、vue生命周期总共有几个阶段
• （4）、第一次页面加载会触发哪几个钩子
• （5）、DOM 渲染在 哪个周期中就已经完成
• （6）、简单描述每个周期具体适合哪些场景

• 二十、说出至少4种vue当中的指令和它的用法？
• 二十一、vue-loader是什么？使用它的用途有哪些？
• 二十二、scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？
• 二十三、为什么使用key？
• 二十四、为什么避免 v-if 和 v-for 用在一起
• 二十五、VNode是什么？虚拟 DOM是什么？
• 二十六、vue-loader是什么？使用它的用途有哪些？
• 二十八、vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？
• 二十九、聊聊你对Vue.js的template编译的理解？

前言

感兴趣的小伙伴也可以点击 这里，查看前端方面的其他面试题，欢迎 star 关注

如果文章中有出现纰漏、错误之处，还请看到的小伙伴留言指正，先行谢过

以下 ↓

实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 来劫持各个属性的 ，，在数据变动时发布消息给订阅者，触发相应监听回调。

默认使用 hash 模式，所以在路由加载的时候，项目中的 url 会自带 。如果不想使用 ， 可以使用 的另一种模式 。

需要注意的是，当我们启用 模式的时候，由于我们的项目是一个单页面应用，所以在路由跳转的时候，就会出现访问不到静态资源而出现 404 的情况，这时候就需要服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 页面。

MVC

讯享网

MVVM

参考这里

生命周期函数：在不同的生命周期阶段会自动执行对应的函数，而这些函数则被成为生命周期函数

3、非父子组件、兄弟组件之间的数据传递

Vuex 数据管理，也可以通过vuex全局状态管理器去实现。

为 r 实例，想要导航到不同 URL，则使用 方法 为当前 跳转对象里面可以获取 、 、 、 等

因为js本身的特性带来的，如果 是一个对象，那么由于对象本身属于引用类型，当我们修改其中的一个属性时，会影响到所有Vue实例的数据。如果将 作为一个函数返回一个对象，那么每一个实例的 属性都是独立的，不会相互影响了

我们可以将同一函数定义为一个 method 或者一个计算属性。对于最终的结果，两种方式是相同的

不同点：

: 计算属性是基于它们的依赖进行缓存的,只有在它的相关依赖发生改变时才会重新求值对于 ，只要发生重新渲染，method 调用总会执行该函数

专注视图层，通过操作 DOM 去实现页面的一些逻辑渲染； Vue 专注于数据层，通过数据的双向绑定，最终表现在 DOM 层面，减少了 DOM 操作Vue 使用了组件化思想，使得项目子集职责清晰，提高了开发效率，方便重复利用，便于协同开发

全局注册

局部注册

参考 官方文档-自定义指令

可以用全局方法 注册一个自定义过滤器，它接收两个参数：过滤器 ID 和过滤器函数。过滤器函数以值为参数，返回转换后的值

过滤器也同样接受全局注册和局部注册

是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染

数据驱动 组件系统

优点：

• 良好的交互体验
• 良好的前后端工作分离模式
• 减轻服务器压力

缺点：

• SEO难度较高
• 前进、后退管理
• 初次加载耗时多

可以通过 与 进行传参

• params 是路由的一部分,必须要有。query 是拼接在 url 后面的参数，没有也没关系
• params 不设置的时候，刷新页面或者返回参数会丢，query 则不会有这个问题