乐趣区

关于vue.js:前端面试题Vue前端爬坑

jiezi

参考文章：前端面试题 — Vue – 作者：游荡 de 蝌蚪

1. 说一下 Vue 的双向绑定数据的原理

vue 实现双向数据绑定：通过数据劫持联合发布者 - 订阅者模式的形式，再通过 Object.defineProperty()来劫持各个属性的 setter 和 getter，在数据变动时通过公布音讯给订阅者，触发相应的监听回调。

理解更多请点击：发布者 - 订阅者模式简略实现

2. 解释单向数据流和双向数据绑定

单项数据流：数据流是单向的，流动繁多可追踪，排查问题的时候快捷不便。毛病是要更新 UI 时，需创立各种 action 来变更对应的 state

3. Vue 如何去除 url 中的 #

vue-router 的两种模式：hash 和 history。hash 模式是 vue-router 默认的，路由在加载的时候，我的项目中的 url 会主动带上 #；如果要去除#，能够应用 history 模式。

new Router({
  mode: 'history',
  routes: []})

须要留神的是：当咱们启用 history 模式的时候，因为咱们的我的项目是一个单页面利用，所以在路由跳转的时候，就会呈现拜访不到动态资源而呈现 404 的状况，这时候就须要服务端减少一个笼罩所有状况的候选资源：如果 URL 匹配不到任何动态资源，则应该返回同一个 index.html 页面

4. 对 MVC、MVVM 的了解

MVC

  1. Model：实例模型（数据保留）
  2. Controller：控制器（业务逻辑）
  3. View：视图（用户界面）

解决逻辑

  1. 用户通过 view 发送指令到 controller
  2. controller 接管指令，实现业务逻辑，告诉 model 扭转状态
  3. model 将新的数据渲染到 view 上，用户失去反馈

特点：所有的通信都是单向的

MVVM

  1. Model：模型（数据）
  2. View：视图（界面）
  3. ViewModel：视图模型是 mvvm 模式的外围，它是连贯 view 和 model 的桥梁

特点：

  1. 各局部之间的通信，都是双向的
  2. 采纳双向绑定：View 的变动，主动反映在 ViewModel，反之亦然

详情请点击：由浅入深讲述 MVVM

两种模式的具体区别请移步：MVC，MVP 和 MVVM 的图示

5. 介绍虚构 DOM

虚构 DOM 介绍

DOM 基本操作相干知识点整顿

JavaScript 面试考点之常见 DOM 操作

6. vue 生命周期的了解

vue 实例有一个残缺的生命周期，生命周期也就是指一个实例从开始创立到销毁的这个过程

  • beforeCreate() 在实例创立之间执行，数据未加载状态
  • created() 在实例创立、数据加载后，能初始化数据，dom渲染之前执行
  • beforeMount() 虚构 dom 已创立实现，在数据渲染前最初一次更改数据
  • mounted() 页面、数据渲染实现，实在 dom 挂载实现
  • beforeUpadate() 从新渲染之前触发
  • updated() 数据曾经更改实现，dom 也从新 re nder 实现, 更改数据会陷入死循环
  • beforeDestory() 和 destoryed() 前者是销毁前执行（实例依然齐全可用），后者则是销毁后执行

7. 组件通信

父组件向子组件通信

子组件通过 props 属性，绑定父组件数据，实现单方通信

子组件向父组件通信

将父组件的事件在子组件中通过 $emit 触发

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

/* 新建一个 Vue 实例作为地方事件总嫌 */
let event = new Vue();

/* 监听事件 */
event.$on('eventName', (val) => {//......do something});

/* 触发事件 */
event.$emit('eventName', 'this is a message.')

Vuex 数据管理

8. vue-router 路由实现

路由就是用来跟后端服务器进行交互的一种形式，通过不同的门路，来申请不同的资源，申请不同的页面是路由的其中一种性能

具体可参考：路由实现原理

9. v-if 和 v-show 区别

应用了 v-if 的时候，如果值为 false，那么页面将不会有这个 html 标签生成。v-show 则是不论值为 true 还是 false，html 元素都会存在，只是 CSS 中的 display 显示或暗藏

10. $route 和 $router 的区别

$router 为 VueRouter 实例，想要导航到不同 URL，则应用 $router.push 办法$route 为以后 router 跳转对象外面能够获取 name、path、query、params 等

11. NextTick 是做什么的

$nextTick` 是在下次 `DOM` 更新循环完结之后执行提早回调，在批改数据之后应用 `$nextTick`，则能够在回调中获取更新后的 `DOM

具体可参考官网文档：深刻响应式原理

12. Vue 组件 data 为什么必须是函数

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

13. 计算属性 computed 和事件 methods 有什么区别

咱们能够将同一函数定义为一个 method 或者一个计算属性。对于最终的后果，两种形式是雷同的

不同点：

computed: 计算属性是基于它们的依赖进行缓存的, 只有在它的相干依赖产生扭转时才会从新求值对于 method，只有产生从新渲染，method 调用总会执行该函数

14. 比照 jQuery，Vue 有什么不同

jQuery 专一视图层，通过操作 DOM 去实现页面的一些逻辑渲染；Vue 专一于数据层，通过数据的双向绑定，最终体现在 DOM 层面，缩小了 DOM 操作 Vue 应用了组件化思维，使得我的项目子集职责清晰，进步了开发效率，不便反复利用，便于协同开发

15. Vue 中怎么自定义指令

全局注册

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()}
})

部分注册

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {el.focus()
    }
  }
}

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

16. Vue 中怎么自定义过滤器

能够用全局办法 Vue.filter() 注册一个自定义过滤器，它接管两个参数：过滤器 ID 和过滤器函数。过滤器函数以值为参数，返回转换后的值

Vue.filter('reverse', function (value) {return value.split('').reverse().join('')
})
<!-- 'abc' => 'cba' -->
<span v-text="message | reverse"></span>

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

17. 对 keep-alive 的理解

keep-alive 是 Vue 内置的一个组件，能够使被蕴含的组件保留状态，或防止从新渲染

<keep-alive>
  <component>
    <!-- 该组件将被缓存！-->
  </component>
</keep-alive>

能够应用 API 提供的 props，实现组件的动静缓存

具体参考 官网 API

18. Vue 中 key 的作用

key 的非凡属性次要用在 Vue 的虚构 DOM 算法，在新旧 nodes 比照时辨识 VNodes。如果不应用 key，Vue 会应用一种最大限度缩小动静元素并且尽可能的尝试修复 / 再利用雷同类型元素的算法。应用 key，它会基于 key 的变动重新排列元素程序，并且会移除 key 不存在的元素。有雷同父元素的子元素必须有独特的 key。反复的 key 会造成渲染谬误

具体参考 官网 API

19. Vue 的外围是什么

数据驱动 组件零碎

20. vue 等单页面利用的优缺点

长处：

  • 良好的交互体验
  • 良好的前后端工作拆散模式
  • 加重服务器压力

毛病：

  • SEO 难度较高
  • 后退、后退治理
  • 首次加载耗时多

21. vue-router 应用 params 与 query 传参有什么区别

vue-router 能够通过 params 与 query 进行传参

// 传递
this.$router.push({path: './xxx', params: {xx:xxx}})
this.$router.push({path: './xxx', query: {xx:xxx}})

// 接管
this.$route.params

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

后记

整顿的过程也是从新梳理知识点的过程，途中会发现很多本人了解不是很到位的货色，也算是一种播种吧

退出移动版