本文会列举一些平时面试时问到的问题和答案,并说明面试官在当时问到这个问题时所期望对方的回答:

vue生命周期(钩子函数)问题

请说一下vue的生命周期函数(钩子函数)。问题描述
首先关于生命周期函数,一般我的第一个问题就是这个,我认为是每个使用vue的都要清楚的,如果这个问题答的问题很大其实我都不太想继续往下进行了。
即使英语不标准(我就是不标准的人,并不是说这是个问题)也要去把关键点说清楚,哪个地方有ed哪个地方没有ed其实是很关键的,或者可以手写下来,因为常用的就是created和mounted所以前4个可以清楚的手写出来并不难,后面4个不去详细说明都没事。(我自己工作中基本没用过后面4个)
在哪个周期能够首次拿到data数据和在哪个周期能够首次拿到mounted中的dom元素,如果没有说到这个问题,我一般会一直往下问,直到他说出来这两个答案。期望答案
beforeCreate、created(此时需说明可以在created中首次拿到data中定义的数据)、beforeMount、mounted(此时需说明dom树渲染结束,可访问dom结构)、beforeUpdate、updated、beforeDestroy、destroyedcomputed中的getter和setter问题
说一下computed中的getter和setter。问题描述
很多情况,我问到这个问题的时候对方的回答都是vue的getter和setter、订阅者模式之类的回答,我就会直接说问的并不是这个,而是computed,直接让对方说computed平时怎么使用。
很多时候得到的回答是computed的默认方式,只使用了其中的getter,就会继续追问如果想要再把这个值设置回去要怎么做,当然一般会让问到这个程度的这个问题他都答不上来了。期望答案

watch监听对象问题
如何watch监听一个对象内部的变化。问题描述
这个问题我感觉是一个不应该不会的问题,可是我遇到的人大部分都没有给出我所期望的答案,有些人会说直接监听obj,好一点的会说直接点出来监听obj.key,但是很少有人回答deep,开始我还会去问immediate,但是太多人不知道了,所以后来我就只问监听对象了,只有回答出deep的才会去问immediate的作用。期望答案
如果只是监听obj内的某一个属性变化,可以直接obj.key进行监听。

如果对整个obj深层监听

immediate的作用:当值第一次进行绑定的时候并不会触发watch监听,使用immediate则可以在最初绑定的时候执行。v-for循环key的作用问题
v-for循环时为什么要加key。问题描述
问这个问题时,好多人再先回答的都是页面有警告,编辑器有提示,我会直接说不考虑报错和提示的问题,或者会问如果不加key的话,页面会不会出现什么异常情况。有的人会说是一个标识,标识他的唯一性,我会继续追问为什么要标识唯一性呢,不加又怎么样?期望答案
vue的dom渲染是虚拟dom,数据发生变化时,diff算法会只比较更改的部分,如果数据项的顺序被改变,Vue将不是移动DOM元素来匹配数据项的改变,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。
举例说明:有一个列表我们现在在中间插入了一个元素,diff算法会默认复用之前的列表并在最后追加一个,如果列表存在选中一类的状态则会随着复用出现绑定错误的情况而不是跟着原元素,key的作用就可以给他一个标识,让状态跟着数据渲染。$nextTick问题
$nextTick用过吗,有什么作用。问题描述
问到这个问题时,很多人都会说到可以处理异步,而往下追问为什么要用nextTick,他解决了什么问题,不用他会怎么样的时候就很多人说不上来了。期望答案
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。(官网解释)
解决的问题:有些时候在改变数据后立即要对dom进行操作,此时获取到的dom仍是获取到的是数据刷新前的dom,无法满足需要,这个时候就用到了$nextTick。

$set问题
vue中的$set用过吗,为什么要用它,解决了什么问题问题描述
这个问题知道的人就基本都能说出来,但是不知道的就是一点不了解,有的还会说到es6的set结构期望答案
向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')(官方示例)
我自己的理解就是,在vue中对一个对象内部进行一些修改时,vue没有监听到变化无法触发视图的更新,此时来使用$set来触发更新,使视图更新为最新的数据。组件间的传值问题
说一下组件间的传值方式,你知道的所有方式都说一下问题描述
这个问题其实就是想看官方文档有没有具体看过,因为很多传值方式官方文档上有描述,但是项目中用的相对较少。
基本都能回答上来,父传子:props;子传父:$emit;兄弟:eventbus;vuex;有一些会说到sessionStorage和localStorage、路由传参(这个答案其实并不是我想要问的,不过也可以实现一定的传值)期望答案
1、ovide / inject
这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。
2、Vue.observable
让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。
返回的对象可以直接用于渲染函数和计算属性内,并且会在发生改变时触发相应的更新。也可以作为最小化的跨组件状态存储器,用于简单的场景:

3、$attrs
包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
4、$listeners
包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。
5、props
6、$emit
7、eventbus
8、vuex
9、$parent / $children / ref
以上就是前端面试时面试官想要听到什么答案(关于一些Vue的问题)的详细内容

vue computed 传参_前端面试时面试官想要听到什么答案(关于一些Vue的问题)相关推荐

  1. 前端面试时面试官想要听到什么答案(关于一些Vue的问题)

    本文会列举一些平时面试时问到的问题和答案,并说明面试官在当时问到这个问题时所期望对方的回答: vue生命周期(钩子函数) 问题 请说一下vue的生命周期函数(钩子函数). 问题描述 首先关于生命周期函 ...

  2. vue router传参_新手使用vue-router传参时注意事项

    1. 使用name和params组合传参 this.$router.push({name: 'details', params: {'id': 233}}) 路由配置 import Vue from ...

  3. @query传参_前端框架vue中query和params传参

    注意(用params传参,F5强制刷新参数会被清空,用query,由于参数适用路径传参的所以F5强制刷新也不会被清空.(传参强烈建议适用string)) 也可以选用sessionstorage/loc ...

  4. Vue路由传参params 与 query

    一.路由传参分为 params 传参与 query 传参 1. params params 传参类似于网络请求中的 post 请求,params 传过去的参数不会显示在地址栏中(但是不能刷新).par ...

  5. vue路由+ elementUI表格组件:loop文章列表页enter内容页(vue路由传参userid)- 代码篇

    elementUI表格组件,response.data.newsLists列表如何循环出来?如何点击传参numId,并进入对应的内容页? 本文意图: 使用官方table组件:实现API调用:文章遍历. ...

  6. vue路由传参的三种方式/含页面刷新参数丢失解决方案(详细)

    vue路由传参的三种方式以及页面刷新参数丢失问题 一.路由传参的三种方式 1.传参方式一:params传参 2.传参方式二:路由属性配置传参 3.传参方式三:query传参 二.三种传递方式的区别 一 ...

  7. 详解vue路由传参的三种方式

    在我们开发vue项目的时候,路由传参几乎是我们必须要用到的,一般出现场景是,当我们点击某个组件的某个按钮时跳转到另一个组件中,并携带参数,便于第二个组件获取数据.下面我就来说说vue路由传参的三种方式 ...

  8. vue路由传参,对参数值编码处理

    vue路由传参: 问题: 很明显vue路由传参在没有任何处理的情况下,参数值会裸露在URL中,这并不是我们所希望的.但因为某些因素一定要用路由传参,最起码也要对这种裸露在URL中的参数值做个编码 Ja ...

  9. Vue路由传参详解(params 与 query)

    Vue路由传参详解(params 与 query) 前言: 路由传参分为 params 传参与 query 传参 params 传参类似于网络请求中的 post 请求,params 传过去的参数不会显 ...

  10. 【vue】vue路由传参的三种方式

    前言 vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转.传参方式可划分为 params 传参和 query 传参,而 params 传参又可分为在 url 中显示参数和不显示 ...

最新文章

  1. 新数学丛书《连分数》 习题 3.2
  2. sourceTree 的使用教程
  3. Flex3.0 图片浏览器(平移、光标中心点放缩、任意角度旋转)
  4. 从零开始学ios开发(十):Multiview Applications(多个xib之前的切换)
  5. Linux下使用Speedtest测试网速
  6. c语言作业模拟虚拟内存,如何用c语言实现虚拟内存
  7. (221)FPGA芯片结构组成
  8. 一文搞懂List 、ListObject、List?的区别以及? extends T与? super T的区别
  9. php基础系列之 数据的存储和读取
  10. 仿宋gb2312字体 官方版
  11. sqlserver2005 安装图解教程以及SQL 2005 SP3补丁安装图文教程
  12. 国内外知名的待办事项app有哪些
  13. 微信公众账号开发教程(一) 基本原理及微信公众账号注册 ——转自http://www.cnblogs.com/yank/p/3364827.html...
  14. 多次重复原生进入RN优化Catalyst Instance has already disappeared
  15. MapReduce统计以某字母开头的单词的平均长度
  16. 老米之家域名投资是什么?域名怎么购买?域名的购买方式?
  17. 408 知识点笔记——操作系统(绪论、进程管理)
  18. 计算机管理员工作目标任务书,毕业论文任务书中主要任务及目标怎么写
  19. MATLAB 设置msgbox若干秒后自动关闭
  20. window下python安装包问题小结

热门文章

  1. Windows 10 预览版安装
  2. HTTP协议 (五) 代理
  3. php中读取session,php中如何注册和读取Session会话
  4. 架构运维篇(四):Centos7/Linux中Tomcat安装SSL证书实践
  5. PHP之JWT接口鉴权(一)
  6. win10系统下安装Consul
  7. PHP用户连续签到赠送额外积分
  8. PHP查看内存使用量
  9. 举例说明指针的运算方法c语言,C语言中指针的使用方法
  10. Android远程过程通讯,Android系统进程间通信(IPC)机制Binder中的Client获得Server远程接口过程源代码分析(3)...