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

40次阅读

共计 3525 个字符,预计需要花费 9 分钟才能阅读完成。

参考文章:前端面试题 — 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 还是 falsehtml 元素都会存在,只是 CSS 中的 display 显示或暗藏

10. $route 和 $router 的区别

$routerVueRouter 实例,想要导航到不同 URL,则应用 $router.push 办法$route 为以后 router 跳转对象外面能够获取 namepathqueryparams

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-aliveVue 内置的一个组件,能够使被蕴含的组件保留状态,或防止从新渲染

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

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

具体参考 官网 API

18. Vue 中 key 的作用

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

具体参考 官网 API

19. Vue 的外围是什么

数据驱动 组件零碎

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

长处:

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

毛病:

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

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

vue-router 能够通过 paramsquery 进行传参

// 传递
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 则不会有这个问题

后记

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

正文完
 0