Vue面试问题&答案

一.VUE爷孙组件、父子、兄弟如何传值？

①.父子组件传值：
子向父：子组件使用this.$emit(“事件名”,数据1,数据2,数据3…)来向父组件发送一个事件，这个事件携带的数据就是向父组件传递的数据；父组件在元素属性里面用“@事件名=“方法名””来绑定当子组件发送这个事件时要执行的方法，方法需要在methods里面定义，比如“treenodeclick(参数1,参数2,参数3){}”，这里的参数123对应子组件所传递的数据123。
父向子：父组件向子组件传递参数时，可以通过prop来传递参数，子组件在props里面定义需要接收的参数名，里面还可以限定参数的类型、默认值等等，父组件在元素里面用"v-bind:参数名=“数据”"来传递数据，这里的数据是动态绑定的，可以动态传递。
vue官方文档：https://cn.vuejs.org/v2/guide/components-props.html

②.兄弟组件传值：
bus.js方式，参考：https://zhuanlan.zhihu.com/p/169395955
pubsub-js方式，参考：https://www.jb51.net/article/182458.htm
https://www.xiaohongshu.com/discovery/item/sgh/5e6e26af000000000100426f

③.爷孙(不限于爷孙)传值：
一部分朋友做的项目比较小，组件通信的情况不是很多，懒得引入vuex，那么provide/inject（vue提供的发布订阅模式的一种实现）就是爷孙（不限于爷孙/父子，中间隔了多少级都可以）通信问题的最好解决方案；这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
基本用法：

// 祖先组件代码：提供foo
//第一种写法
export default {
 name: "grandfather",
 provide(){
  return{
   foo:'halo'
  }
 },
}
//第二种写法
export default {
 name: "grandfather",
 provide:{
  foo:'halo~~~~'
 },
}

//后代组件代码：注入foo
export default {
 inject:['foo'],
}

参考：https://www.jb51.net/article/173928.htm
provide/inject官方文档：https://cn.vuejs.org/v2/api/#provide-inject
用法：https://www.jb51.net/article/173928.htm

④.vuex：
关于通信和状态管理就必须了解vuex了，但是vuex就涉及到大项目了，如果开发的程序并不是很庞大，一个页面中的组件不是很多并且他们之间并不需要大量频繁的互相读写操作，那么用以上2种方式足够了，否则才需要用到vuex。
参考：https://zhuanlan.zhihu.com/p/25701238
vuex官方文档：https://vuex.vuejs.org/zh/

---

二.箭头函数this指向问题？

在日常js里面，this的值是可以用call方法修改的，而且只有在调用的时候我们才能确定this的值。但是箭头函数不能用call方法修改里面的this，而当我们使用箭头函数的时候，箭头函数会默认帮我们绑定外层this的值，所以在箭头函数中this的值和外层的this是一样的。多层对象嵌套里箭头函数里this是和最最外层保持一致的。

参考：https://juejin.cn/post/6844903573428371464

---

三.typeScript？

TypeScript是JavaScript的超集，具有可选的类型并可以编译为纯JavaScript；从技术上讲TypeScript就是具有静态类型的JavaScript。
那么，向JavaScript添加静态类型的原因是什么？
我想原因至少有三个：
①.您可以避免经典的错误 ‘undefined’ is not a function.
②.在不严重破坏代码的情况下，重构代码更容易。
③.使大型、复杂的应用程序源码更易阅读。

参考：
https://zhuanlan.zhihu.com/p/189485106
https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html

---

四.js处理数组的方法？

join()
push()和pop()
shift() 和 unshift()
sort()
reverse()
concat()
slice()
splice()
indexOf()和 lastIndexOf() （ES5新增）
forEach() （ES5新增）
map() （ES5新增）
filter() （ES5新增）
every() （ES5新增）
some() （ES5新增）
reduce()和 reduceRight() （ES5新增）

参考：https://www.cnblogs.com/obel/p/7016414.html

---

五.v-if、v-for优先级问题，一起使用问题？

1.在同一级v-for的优先级高于v-if。
2.如果在同一级同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能。
3.避免出现同时使用这种情况，如果实在需要，则在外嵌套template，在这一层进行v-if判断，然后在内部进行v-for循环，避免每次只有v-if只渲染很少一部分元素，也需要遍历同级的所有元素。
4.如果条件出现在循环内部，可通过计算属性提前过滤掉那些不需要显示的项。

参考：https://www.jianshu.com/p/4ac031f5d81b

---

六.什么是模块化？

模块化编程：
①.将程序按照功能分为不同的模块。
②.不同模块的程序写在不同的包中；共同的代码抽取出来形成Util类，为方便调用一般为static的。
③.项目初期，按照业务功能划分模块，即自上而下的方法；开发的过程中，按照功能划分，即自下而上法。

参考：https://www.cnblogs.com/minshia/p/6724366.html

---

七.构造函数是什么？

在Java当中 ，构造函数一般都是创建对象时初始化对象，即为对象成员变量赋初始值，使用时必须和new运算符一起使用。
构造函数与普通函数的区别：
①.一般函数是用于定义对象应该具备的功能。而构造函数定义的是，对象在调用功能之前，在建立时，应该具备的一些内容。也就是对象的初始化内容。
②. 构造函数是在对象建立时由jvm调用, 给对象初始化。一般函数是对象建立后，当对象调用该功能时才会执行。
③. 普通函数可以使用对象多次调用，构造函数就在创建对象时调用。
④.构造函数的函数名要与类名一样，而普通的函数只要符合标识符的命名规则即可。
⑤.构造函数没有返回值类型。

参考：http://www.cnblogs.com/smallprogrammer/p/7885346.html

---

八.规划一个项目该如何考虑，需要注意些什么？

项目规划：
1.对项目进行前期调查、收集整理相关资料，制定初步的项目可行性研究报告，为决策层提供建议。协同配合制定和申报立项报告材料。
2.对项目进行分析和需求策划。
3.对项目的组成部分或模块进行完整系统设计。
4.制定项目目标及项目计划、项目进度表。
5.制定项目执行和控制的基本计划。
6.建立项目管理的信息系统。
7.项目进程控制，配合上级管理层对项目进行良好的控制。
8.跟踪和分析成本。
9.记录并向上级管理层传达项目信息。
10.管理项目中的问题、风险和变化。
11.项目团队建设。
12.各部门、各项目组之间的协调并组织项目培训工作。
13.项目及项目经理考核。
14.理解并贯彻公司长期和短期的方针与政策，用以指导公司所有项目的开展。 项目管理的应用。
需要注意：一个功能，用户需要的效果和自己理解的是否一样，需求文档是否清晰、够细；功能、模块设计是否合理；到具体开发时，是否达到了代码规范化，代码易扩展，可复用等。

参考：https://wenwen.sogou.com/z/q727014877.htm