前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue面试题总结(二)

vue面试题总结(二)

原创
作者头像
前端老道
修改2020-06-15 18:09:34
1.6K0
修改2020-06-15 18:09:34
举报
文章被收录于专栏:Vue开发社区

16.vue路由传参数

1.使用query方法传入的参数使用this.$route.query接受 2.使用params方式传入的参数使用this.$route.params接受

17.vuex 是什么? 有哪几种属性?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 有 5 种,分别是 state、getter、mutation、action、module

vuex 的 store 是什么? vuex 就是一个仓库,仓库里放了很多对象。其中 state 就是数据源存放地,对应于一般 vue 对象里面的 datastate 里面存放的数据是响应式的,vue 组件从 store 读取数据,若是 store 中的数据发生改变,依赖这相数据的组件也会发生更新它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性

vuex 的 getter 是什么? getter 可以对 state 进行计算操作,它就是 store 的计算属性虽然在组件内也可以做计算属性,但是 getters 可以在多给件之间复用如果一个状态只在一个组件内使用,是可以不用 getters

vuex 的 mutation 是什么? 更改Vuex的store中的状态的唯一方法是提交mutation

vuex 的 action 是什么? action 类似于 muation, 不同在于:action 提交的是 mutation,而不是直接变更状态action 可以包含任意异步操作 vue 中 ajax 请求代码应该写在组件的 methods 中还是 vuex 的 action 中

vuex 的 module 是什么? 面对复杂的应用程序,当管理的状态比较多时;我们需要将vuex的store对象分割成模块(modules)。

如果请求来的数据不是要被其他组件公用,仅仅在请求的组件内使用,就不需要放入 vuex 的 state 里如果被其他地方复用,请将请求放入 action 里,方便复用,并包装成 promise 返回

18.v-show和v-if指令的共同点和不同点?

v-show指令是通过修改元素的displayCSS属性让其显示或者隐藏 v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果

19.如何让CSS只在当前组件中起作用?

将当前组件的 <style> 修改为 <style scoped>

20.<keep-alive></keep-alive>的作用是什么?

<keep-alive></keep-alive> 包裹动态组件时,会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染。 大白话: 比如有一个列表和一个详情,那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面,那么就可以对列表组件使用<keep-alive></keep-alive>进行缓存,这样用户每次返回列表的时候,都能从缓存中快速渲染,而不是重新渲染

21.delete和Vue.delete删除数组的区别?

delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。 Vue.delete直接删除了数组 改变了数组的键值。

代码语言:txt
复制
var a=[1,2,3,4]
var b=[1,2,3,4]
delete a[0]
console.log(a) //[empty,2,3,4]
this.$delete(b,0)
console.log(b) //[2,3,4]

22.$nextTick是什么?

vue实现响应式并不是数据发生变化后dom立即变化,而是按照一定的策略来进行dom更新。 $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM

23.v-on可以监听多个方法吗?

可以。

代码语言:txt
复制
<input type="text" :value="name" @input="onInput" @focus="onFocus" @blur="onBlur" />

24.v-on 常用修饰符

.stop 该修饰符将阻止事件向上冒泡。同理于调用 event.stopPropagation() 方法 .prevent 该修饰符会阻止当前事件的默认行为。同理于调用 event.preventDefault() 方法 .self 该指令只当事件是从事件绑定的元素本身触发时才触发回调 .once 该修饰符表示绑定的事件只会被触发一次

25.v-for key的作用。

当Vue用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue将不是移动DOM元素来匹配数据项的改变,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。 为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。key属性的类型只能为 string或者number类型。 key 的特殊属性主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。

26.v-for 与 v-if 的优先级

v-for比v-if优先,如果每一次都需要遍历整个数组,将会影响速度,尤其是当之需要渲染很小一部分的时候。

27.Vue子组件调用父组件的方法

第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 第二种方法是在子组件里用$emit向父组件触发一个事件,父组件监听这个事件就行了。28.Promise对象是什么?

1.Promise是异步编程的一种解决方案,它是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。promise对象是一个构造函数,用来生成Promise实例; 2.promise的两个特点 对象状态不受外界影响 && 一旦状态改变,就不会再变,任何时候都可以得到结果(pending状态–>fulfilled || pending–>rejected)

29.axios的特点有哪些?

1、axios是一个基于promise的HTTP库,支持promise的所有API; 2、它可以拦截请求和响应; 3、它可以转换请求数据和响应数据,并对响应回来的内容自动转换为json类型的数据; 4、它安全性更高,客户端支持防御XSRF;

30.vue中的 ref 是什么?

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例。

31.Vue的路由模式,实现方式?

hash模式 和 history模式

hash模式:在浏览器中符号“#”,#以及#后面的字符称之为hash,用window.location.hash读取; 特点:hash虽然在URL中,但不被包括在HTTP请求中;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面。 hash 模式下:仅 hash 符号之前的内容会被包含在请求中,如 http://www.xxx.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误 。

history模式:history采用HTML5的新特性;且提供了两个新方法:pushState(),replaceState()可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更。 history 模式:前端的 URL 必须和实际向后端发起请求的 URL 一致,如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理,将返回 404 错误。Vue-Router 官网里如此描述:“不过这种模式要玩好,还需要后台配置支持……所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。”

32.$route和$router的区别?

$route是“路由信息对象”,包括path,params,hash,query,fullPath,matched,name等路由信息参数。 $router是’路由实例’对象包括了路由的跳转方法,钩子函数等。

33.vue.js的两个核心是什么?

数据驱动、组件系统

34.vue如何兼容ie的问题。

babel-polyfill插件

35.页面刷新vuex被清空解决办法?

1.localStorage 存储到本地再回去 2.重新获取接口获取数据

36.如何优化SPA应用的首屏加载速度慢的问题?

1.将公用的JS库通过script标签外部引入,减小 app.bundel 的大小,让浏览器并行下载资源文件,提高下载速度; 2.在配置 路由时,页面和组件使用懒加载的方式引入,进一步缩小 app.bundel 的体积,在调用 某个组件时再加载对应的js文件; 3.加一个首屏loading图,提升用户体验;

37.Vue 改变数组触发视图更新

以下方法调用会改变原始数组:push(), pop(), shift(), unshift(), splice(), sort(), reverse(),Vue.set( target, key, value ) 调用方法:Vue.set( target, key, value )

target:要更改的数据源(可以是对象或者数组)

key:要更改的具体数据

value :重新赋的值

38.DOM 渲染在哪个周期中就已经完成?

mounted

注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted

代码语言:txt
复制
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}

39.简述每个周期具体适合哪些场景

beforecreate : 可以在这加个loading事件,在加载实例时触发 created : 初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用 mounted : 挂载元素,获取到DOM节点 updated : 如果对数据统一处理,在这里写上相应函数 beforeDestroy : 可以做一个确认停止事件的确认框

40.第一次加载会触发哪几个钩子?

会触发beforeCreate , created ,beforeMount ,mounted

41.动态绑定class

active classname, isActive 变量

最近几天会陆续更新的~~,觉得总结的可以的话,麻烦给小编点一个 在看, 谢谢!

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 16.vue路由传参数
  • 17.vuex 是什么? 有哪几种属性?
  • 18.v-show和v-if指令的共同点和不同点?
  • 19.如何让CSS只在当前组件中起作用?
  • 20.<keep-alive></keep-alive>的作用是什么?
  • 21.delete和Vue.delete删除数组的区别?
  • 22.$nextTick是什么?
  • 23.v-on可以监听多个方法吗?
  • 24.v-on 常用修饰符
  • 25.v-for key的作用。
  • 26.v-for 与 v-if 的优先级
  • 27.Vue子组件调用父组件的方法
  • 29.axios的特点有哪些?
  • 30.vue中的 ref 是什么?
  • 31.Vue的路由模式,实现方式?
  • 32.$route和$router的区别?
  • 33.vue.js的两个核心是什么?
  • 34.vue如何兼容ie的问题。
  • 35.页面刷新vuex被清空解决办法?
  • 36.如何优化SPA应用的首屏加载速度慢的问题?
  • 37.Vue 改变数组触发视图更新
  • 38.DOM 渲染在哪个周期中就已经完成?
  • 39.简述每个周期具体适合哪些场景
  • 40.第一次加载会触发哪几个钩子?
  • 41.动态绑定class
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档