乐趣区

关于面试:vue基本知识点总结面试必备

最近入职新的公司,整体来说还是不错的。前一阵子看了很多对于 vue 的知识点,本人了解着整顿一下,再加深一下印象。也心愿能够帮忙到有须要的同学。了解谬误的中央,欢送斧正。

1、对于 Vue 是一套渐进式框架的了解答:Vue 是渐进的,没有强主张,是个轻量视图。它只做了本人应该做的事,没有做多余的事。

2、vue.js 的两个外围是什么?答:数据驱动和组件化。

3、vue 中的模板编译原理答:模板指的就是 template。如果咱们传了一个 template,咱们会把 template 转换成一个 render 函数,而后通过 render 函数返回虚构 DOM,再把虚构的 DOM 变成真正的 DOM。

4、响应式数据的原理答:响应式就是当数据变动的时候,能够让视图也同步更新。外围是 Object.defineProperty,vue 初始化的时候,Object.defineProperty 顺次会给 data 的属性上减少 get 和 set 办法,并对依赖进行收集,如果数据发生变化,就会去告诉相干的依赖做出对应的更新。

5、vue 生命周期钩子函数有哪些?(vue2.0)

答:① 创立期间的生命周期函数:beforeCreate():此时,实例在内存中刚刚创立进去,data 和 methods 没 有被初始化。created():此时,实例曾经在内存中创立实现,data 和 methods 曾经被初始化实现。模板还没有编译。beforeMount():此时,模板曾经编译胜利,还没有挂载到页面上。mounted():此时,编译好的模板曾经挂载到了指定的地位下来。② 运行期间的生命周期函数:beforeUpdate():此时,data 数据产生扭转后,还没有从新渲染 DOM 树,data 的数据是最新的,然而页面上展现的还是旧数据。updated():此时,data 中的数据和页面中的渲染是统一的。③ 销毁期间的生命周期函数:beforeDestroy():此时,实例的办法、指令都还能够应用,实例销毁之前调用。destroyed():此时,vue 实例上的所有指令、绑定、监听都会被销毁,子实例也全副被销毁。

6、vue 的生命周期钩子是如何实现的?答:vue 的生命周期钩子实际上就是一个回调函数。当咱们传入一个钩子函数时,vue 外部会帮咱们调用,并将生命周期钩子转换成数组,调用的时候,就又会把数组遍历一遍,宝宝起名 - 相似一个公布订阅的模式。

7、vue 的双向绑定的原理是什么?答:vue 数据双向绑定是通过数据劫持联合发布者 - 订阅者模式的形式来实现的。实现步骤:①. 实现一个监听器 Observer,用来劫持并监听所有属性,如果有变动的,就告诉订阅者。②. 实现一个订阅者 Watcher,能够收到属性的变动告诉并执行相应的函数,从而更新视图。③. 实现一个解析器 Compile,能够扫描和解析每个节点的相干指令,并依据初始化模板数据以及初始化相应的订阅器。

8、vue 为什么要操作虚构 DOM? 答:虚构 DOM 就是用一个对象,来形容实在 DOM。一个实在的 DOM 下面有十分多的属性,操作起来十分不便,为了缩小 DOM 操作,咱们在更新的时候就把须要更新的 DOM 先记录下来,而后更新这些须要更新的 DOM,最初再依据 diff 算法比对,更新 DOM。(vue 里的 diff 算法是平级比拟,不思考跨级比拟)虚构 DOM 不依赖实在的平台环境,能够实现跨平台。

9、v-if 和 v-show 有什么区别?答:这两个指令都是在判断 DOM 节点是否要显示。区别是:①. 实现形式:v-if 是依据前面数据的虚实值判断间接从 Dom 树上删除或重建元素节点。v-show 只是在批改元素的 display 的属性值,元素始终在 Dom 树上。②. 编译过程:v-if 切换有一个部分编译 / 卸载的过程,切换过程中适合地销毁和重建外部的事件监听和子组件;v-show 只是简略的基于 css 切换;③. 编译条件:v-if 是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始部分编译;v-show 是在任何条件下(首次条件是否为真)都被编译,而后被缓存,而且 DOM 元素始终被保留;④. 性能耗费:v-if 有更高的切换耗费,不适宜做频繁的切换;v-show 有更高的初始渲染耗费,适宜做频繁的切换;

10、vue 罕用的修饰符答:vue 修饰符次要有:①事件修饰符.stop:和原生 JavaScript 中的 event.stopPropagation() 统一,阻止事件冒泡.prevent:和原生 JavaScript 中的 event.preventDefault() 统一,阻止默认事件.capture:与事件冒泡的方向相同,事件捕捉由外到内.self:只会触发本人范畴内的事件,不蕴含子元素.once:只会触发一次。②按键修饰符.delete(捕捉“删除”和”退格“键)用法上和事件修饰符一样,挂载在 v -on: 前面:

v-on:keyup.xxx=’yyy’<input @keyup.delete=“onKey”/>

③零碎修饰符.ctrl .alt .shift .meta 这些修饰符能够实现按下相应按键触发鼠标或键盘事件的监听器。

11、v-on 能够监听多个办法吗?答:能够

点我

12、vue.mixin 的应用场景和原理是什么?答:vue.mixin 能够减少公共办法,当组件初始化调用的时候,mergeOptions 办法会进行合并,并针对不同的属性进行合并。vue.mixin 也有很多毛病,比方依赖问题、命名问题、数据不能共享、数据起源等问题。

13、vue 中 key 值的作用答:key 的作用次要是为了高效的更新虚构 DOM。在 vue 中,当应用雷同标签名元素的过渡切换时,也会应用到 key 属性,这样是为了让 vue 辨别它们,否则 vue 只会替换其外部属性而不会触发过渡成果。

14、Vue 组件中 data 为什么必须是函数?答:在 new Vue() 中,data 是能够作为一个对象进行操作的,然而在 component 中,data 只能以函数的模式存在,不能间接将对象赋值给它。当 data 选项是一个函数的时候,每个实例能够保护一份被返回对象的独立的拷贝,这样各个实例中的 data 不会相互影响,是独立的。

15、v-for 与 v-if 的优先级答:v-for 优先级高于 v -if。

16、nextTick 的实现原理是什么?答:nextTick 中的回调函数是在下一次 DOM 更新完结之后执行的,提早了回调,从而避免屡次更新。nextTick 外面就是一个异步办法(promise)。

17、说出至多 4 种 vue 当中的指令和它的用法答:① v-if(判断是否暗藏)② v-for(遍历)③ v-bind(属性绑定)⑤ v-model(双向数据绑定)

18、vue 中子组件调用父组件的办法答:① 间接在子组件中通过

this.$parent.event

来调用父组件的办法。② 在子组件里用

$emit

向父组件触发一个事件,父组件监听这个事件就行了。③ 父组件把办法传入子组件中,在子组件里间接调用这个办法。

19、vue 中父组件调用子组件的办法答:父组件利用 ref 属性操作子组件办法。

父:

子:

test() { console.log(‘你好’) } }

在父组件里调用 test 应用

this.$refs.childMethod.test()

20、vue 组件之间传值答:(1) 父子组件传值:① 父组件调用子组件的时候动静绑定属性

② 子组件定义 props 接管动静绑定的属性 props: [‘dataList’]③ 子组件获取父子间的属性和办法:在子组件中应用

this.$parent.

属性名

/this.$parent.

办法名。④ 子组件给父组件传值:a. 应用 ref 属性父组件调用子组件时绑定属性 ref

在父组件中应用

this.$refs.parent.

属性

/this.$refs.parent.

办法 b. 应用

$emit

办法子组件调用

this.$emit

(‘ 办法名‘, 传值) 父组件通过子组件绑定的’办法名’获取传值(2)vue 页面级组件之间传值① 应用 vue-router 通过跳转链接带参数传参。② 应用本地缓存 localStorge。③ 应用 vuex 数据管理传值。

21、说说 vue 的动静组件。答:多个组件通过同一个挂载点进行组件的切换,is 的值是哪个组件的名称,那么页面就会显示哪个组件。

22、keep-alive 内置组件的作用答:keep-alive 是 vue 内置的一个组件,而这个组件的作用就是可能缓存不流动的组件,组件进行切换的时候,默认会进行销毁,如果有需要,某个组件切换后不进行销毁,而是保留之前的状态,那么就能够利用 keep-alive 来实现。

23、vue 中是如何检测数组变动的答:vue 将数组原型上的办法进行了从新编写,更改了一些数组的办法,比方 push、shift、pop、splice、unshift、sort、reverse,这些办法都有一个特点,就是能够扭转数组原来的值。当咱们用了这些办法来操作数组时,就会把原来的办法进行劫持,能够在函数外部增加本人的性能。如果想跟新数组的索引,须要应用 vue.$set 办法来实现。

24、vue.set 办法答:vue 不容许在曾经创立的实例上动静增加新的根级响应式属性,$set 能够触发更新,当对象新增不存在的属性时,会触发对象依赖的 watcher 去更新,当更改数组索引时,咱们调用数组的 splice 办法去更新数组。操作数组示列:

this.$set(arr, index, val)

操作对象示例:

this.$set(obj, key, val)

25、nextTick 的实现原理是什么答:nextTick 中的回调函数是在下一次 DOM 更新完结之后执行的,提早了回调,从而避免屡次更新。nextTick 外面就是一个异步办法(promise)。

26、递归组件的用法

答:在 export default 中,有一个属性是 name。这属性对递归组件来说十分重要。递归组件只能通过 name 选项来做事。递归组件肯定要有一个完结的条件,否则就会使组件循环援用,最终呈现“max stack size exceeded”的谬误,也就是栈溢出。那么,咱们能够应用 v -if=”false” 作为递归组件的完结条件。当遇到 v -if 为 false 时,组件将不会再进行渲染。

27、怎么定义 vue-router 的动静路由?怎么获取传过来的值?答:动静路由的创立, 应用 path 属性,应用动静门路参数,以冒号结尾:

{path:‘/test/:id’name:‘Test’components: Test}

拜访 test 目录下的所有文件,test 上的所有属性都会映射到 Test 组件上。当读取 /test 下的路由时,参数会被放到

this.$route.params

外面。能够通过

this.$route.params.id

动静获取参数。

28、vue-router 有哪几种路由守卫? 答:路由守卫为全局守卫:beforeEach 后置守卫:afterEach 全局解析守卫:beforeResolve 路由独享守卫:beforeEnter

29、beforeEach 的原理答:router.beforeEach()用来做一些进入页面的限度。比方登录,若没有登录就不能进入页面,只有登录了之后才有权限查看某些页面。也就是路由拦挡。原理:当一个导航触发时,全局前置守卫依照创立顺序调用。守卫是异步执行,此时导航在所有守卫 resolve 完之前都始终处 期待状态中。每个守卫办法接管三个参数:to: Route: 行将要进入的指标 路由对象 from: Route: 以后导航正要来到的路由 next: Function: 肯定要调用该办法来 resolve 这个钩子。执行依赖 next 办法的调用参数。next(): 进行队列中的下一个钩子。如果全副钩子执行完了,则导航的状态就是 confirmed(确认的)。next(false): 中断以后的导航。如果浏览器的 URL 扭转了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。next(’/’) 或者 next({path:‘/’}): 跳转到一个不同的地址。以后的导航被中断,而后进行一个新的导航。next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该谬误会被传递给 router.onError() 注册过的回调。

30、$route 和 $router 的区别是什么?

答:$router

为 VueRouter 的实例,是一个全局路由对象,蕴含了路由跳转的办法、钩子函数等。

$route

是路由信息对象跳转的路由对象,每一个路由都会有一个 route 对象,是一个部分对象,外面蕴含:path、params、hash、query、fullPath、matched、name 等路由信息参数。

31、vue-router 响应路由参数的变动答:① 用 watch 监听② 应用组件内 beforeRouteUpdate(to,from,next) 导航钩子函数,to 示意将要跳转的路由对象,from 示意从哪个路由跳转过来,next 是进行下一个钩子函数

32、vue-router 传参答:① 应用 Params: 只能应用 name 属性,不能应用 path,参数不会显示在门路上,浏览器强制刷新参数会被清空② 应用 Query:参数会显示在门路上,刷新不会被清空,name 能够应用 path 门路

33、不必 Vuex 会带来什么问题?答:① 可维护性降落,批改数据,须要保护好个中央② 可读性降落,组件内的数据起源不明确③减少耦合,Vue 用 Component 的初衷在于升高耦合性,如果大量的上传散发,反而会减少耦合度。

34、vuex 有哪几种属性?答:State、Getter、Mutation、Action、Module。

35、vuex 的 State 个性是?答:Vuex 就好比是一个仓库,仓库外面放了很多对象。其中 state 就是存放数据源的中央,对应 Vue 对象外面的 data。state 外面寄存的数据是响应式的,Vue 组件从 store 中读取数据,若是 store 中的数据产生扭转,依赖这个数据的组件也会产生更新。它通过 mapState 把全局的 state 和 getters 映射到以后组件的 computed 计算属性中

36、vuex 的 Getter 个性是?答:getters 能够对 State 进行计算操作,它就是 Store 的计算属性。是 getters 能够在多组件之间复用。如果一个状态只在一个组件内应用,能够不必 getters

37、vuex 的 Mutation 个性是?答:Action 相似于 mutation,不同在于:Action 提交的是 mutation,而不是间接变更状态。Action 能够蕴含任意异步操作

38、Vue.js 中 ajax 申请代码应该写在组件的 methods 中还是 vuex 的 actions 中?答:① 如果申请来的数据不须要被其余组件复用,只在申请的组件内应用,就不须要放入 vuex 的 state 里。② 如果被其余中央复用,就能够把申请放入 action 里,包装成 promise 返回,在调用的中央用 async await 解决返回的数据

退出移动版