Web前端企业面试题

　　1、display和visibility的区别？
　　答：
　　一、display和visibility的相同与不同点
　　1、相同点：display和visibility都有讲元素隐藏的意思
　　2、不同点：display是元素隐藏，隐藏的元素不占文档流style｛padding：0；margin：0；liststyle：none；｝p｛margin：0auto；｝p1｛width：200px；height：100px；bottom：09f；display：none；｝p2｛width：200px；height：150px；background：F6F；｝style元素用display：none隐藏下面的元素
　　而visibility隐藏的元素仍然占文档流style｛padding：0；margin：0；liststyle：none；｝p｛margin：0auto；｝p1｛width：200px；height：100px；bottom：09f；visibility：hidden；｝p2｛width：200px；height：150px；background：F6F；｝style元素用visibility：hidden；隐藏下面的元素
　　二、display和visibility的属性值
　　1、displaydisplay：block；将元素设置为块级元素，独占一行，能设置宽高display：inlineblock；将元素设置为行内快显示，能设置宽高，但是不独占一行display：none；将元素设置为隐藏，后面的元素能自动往上填充
　　2、visibilityvisibility：visible；元素可见，默认值visibility：hidden；将元素设置成隐藏，隐藏的元素仍然占据文档流visibility：collapse；只对table对象起作用，用在其他元素中表示隐藏visibility：inherit；继承其父级元素样式
　　2、for循环in、of和forEach的区别？
　　答：
　　在开发过程中经常需要循环遍历数组或者对象，使用最多的方法forEach、forin、forof，整理一下他们的异同点
　　for循环
　　其实除了这三种方法以外还有一种最原始的遍历，自Javascript诞生起就一直用的就是for循环，它用来遍历数组vararr〔1，2，3，4〕for（vari0；iarr。length；i）｛console。log（arr〔i〕）｝
　　for循环中可以使用return、break等来中断循环
　　结果：
　　forEach
　　对数组的每一个元素执行一次提供的函数（不能使用return、break等中断循环），不改变原数组，无返回值undefined。letarr〔a，b，c，d〕arr。forEach（function（val，idx，arr）｛console。log（val，indexidx）val是当前元素，index当前元素索引，arr数组console。log（arr）｝）
　　输出结果：a，index0（4）〔a，b，c，d〕b，index1（4）〔a，b，c，d〕c，index2（4）〔a，b，c，d〕d，index3（4）〔a，b，c，d〕
　　forin
　　循环遍历的值都是数据结构的键值letobj｛a：1，b：2，c：3，d：4｝for（letoinobj）｛console。log（o）遍历的实际上是对象的属性名称a，b，c，dconsole。log（obj〔o〕）这个才是属性对应的值1，2，3，4｝
　　总结一句：forin也可以循环数组但是特别适合遍历对象
　　结果：
　　forof
　　它是ES6中新增加的语法，用来循环获取一对键值对中的值
　　循环一个数组letarr〔China，America，Korea〕for（letoofarr）｛console。log（o）China，America，Korea｝
　　循环一个普通对象（报错）letobj｛a：1，b：2，c：3，d：4｝for（letoofobj）｛console。log（o）UncaughtTypeError：obj〔Symbol。iterator〕isnotafunction｝
　　3、px、em、rem之间有什么区别，移动端响应式布局方式有哪些？
　　答：
　　px：像素（Pixel），相对长度单位。像素px是相对于显示器屏幕分辨率而言的。即分辨率不同的机型当前对应的距离可能发生变化。（1InchesxPx）。
　　所以相对于同一机型来说是一个绝对的长度单位。
　　em：是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
　　以其父级元素为基准来变化长度。所以其算法不是一个固定的值。
　　rem：是CSS3新增的一个相对单位（rootem，根em）。
　　那么其好用在用可以直接设置HTML的fontsize，然后在其子类都是以这个大小为基准变化的值。
　　在移动设备上，我们常常设置metanameviewportcontentwidthdevicewidth，initialscale1。0，minimumscale1。0，maximumscale1。0
　　此方式的目的是为了将当前屏幕（PC）分辨率的px转化成手机端的px，让px在手机上能够兼容此方式。
　　因此，此时看见的12px与PC端的12px无异。但是，如果不写着个meta的话，那么，浏览器会一直以PC的视图来决定手机端的px的大小，让视图看起来变小了很多。
　　那么，响应式页面则经常配合媒体查询media来设置不同分辨率下手机的各种不同的配置机构，然后根据父级来变化所有的相对长度。
　　4、Js中操作数组的方法有哪些？
　　基础篇
　　1。shift
　　删除原数组的第一项，并返回删除元素的值，如果数组为空则返回undefinedvara〔1，2，3，4，5〕varba。shift（）a：〔2，3，4，5〕b：1
　　2。unshift
　　将参数添加到原数组开头，并返回数组的长度vara〔1，2，3，4，5〕varba。unshift（2，1）a；〔2，1，1，2，3，4，5〕b：7
　　注：此方法在ie6。0下
　　测试的返回值始终为undefined，在firefox下测试的返回值为7，所以此方法不可靠
　　一般需要用返回值时可用splice代替
　　3。pop
　　删除原数组的最后一项，并返回删除元素的值；如果数组为空则返回undefinedvara〔1，2，3，4，5〕varba。pop（）a：〔1，2，3，4〕b：5
　　4。push
　　将参数添加到原数组末尾，并返回数组的长度vara〔1，2，3，4，5〕varba。push（6，7）a：〔1，2，3，4，5，6，7〕b：7
　　5。concat
　　返回一个新数组，是将参数添加到原数组中构成的vara〔1，2，3，4，5〕varba。concat（6，7）a：〔1，2，3，4，5〕b：〔1，2，3，4，5，6，7〕
　　6。splicesplice（start，deleteCount。val1，val2，）：从start开始删除deleteCount项并从该位置起插入val1，val2，vara〔1，2，3，4，5〕varba。splice（2，2，7，8，9）a：〔1，2，7，8，9，5〕b：〔3，4〕
　　7。reverse将数组反序vara〔1，2，3，4，5〕varba。reverse（）a：〔5，4，3，2，1〕b：〔5，4，3，2，1〕
　　8。sort（orderfunction）按指定的参数对数组进行排序vara〔1，2，3，4，5〕varba。sort（）a：〔1，2，3，4，5〕b：〔1，2，3，4，5〕
　　9。slice（start，end）返回从原数组指定开始的下标到结束下标之间的项组成的新数组不改变原数组vara〔1，2，3，4，5〕varba。slice（2，5）a：〔1，2，3，4，5〕b：〔3，4，5〕
　　10。join（separator）将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认的逗号为分隔符vara〔1，2，3，4，5〕varba。join（）a：〔1，2，3，4，5〕b：12345
　　11。indexOf数组元素索引并返回元素索引，不存在返回1，索引从0开始，是从前往后查找vara〔a，b，c，d，e〕a。indexOf（a）0a。indexOf（a）1a。indexOf（f）1a。indexOf（e）4
　　12。lastIndexOf接受两个参数：查找的值、查找起始位置不存在，返回1；存在，返回位置。是从后往前查找vara〔2，5，9，2〕a。lastIndexOf（2）3a。lastIndexOf（7）1a。lastIndexOf（2，3）3a。lastIndexOf（2，2）0a。lastIndexOf（2，2）0a。lastIndexOf（2，1）3
　　13。Array。isArray（）判断对象是否是数组，返回布尔值。不改变原数组。vara1vartest〔1，2，3，4〕console。log（Array。isArray（a））falseconsole。log（Array。isArray（test））true
　　14。Array。toString（）将数组转化为字符串，返回字符串，不改变原数组vartest〔1，2，3，4〕test1test。toString（）console。log（test）〔1，2，3，4〕console。log（test1）1，2，3，4
　　进阶篇
　　1。forEach
　　是最为常用的情景，它至于遍历，可以在获取当前数据项的前提下，对数据进行修改。它没有返回值。理解起来也是最容易的。letxxb〔北京，南京，广州，重庆，西安，拉萨〕；xxb。forEach（item｛console。log（item，forEach）；｝）
　　2。map
　　map的本意就是映射，也就是将一个值从一种形式映射到另一种形式，比如将key映射到value。它的每一次遍历都会有一个返回值。这些返回值组合成最终的结果数组。事实就是如此letxxb〔北京，南京，广州，重庆，西安，拉萨〕；letxxbmapxxb。map（（item，index，list）｛console。log（item，mapitem）；console。log（index，mapindex）；console。log（list，maplist）；returnitem市｝）console。log（xxbmap，58）
　　forEach和map对比
　　相同点
　　1）都是循环遍历数组中的每一项；
　　2）forEach（）和map（）匿名函数的参数相同，参数分别是item（当前每一项）、index（索引值）、arr（原数组）；
　　3）this都是指向调用方法的数组；
　　4）只能遍历数组；
　　不相同点
　　1）map（）创建了新数组，不改变原数组；forEach（）可以改变原数组。
　　2）遇到空缺的时候map（）虽然会跳过，但保留空缺；forEach（）遍历时跳过空缺，不保留空缺。
　　3）map（）按照原始数组元素顺序依次处理元素；forEach（）遍历数组的每个元素，将元素传给回调函数。
　　3。filter
　　它致力于从已有的数组中筛选出符合一定条件的数据项，最后的返回值是所有符合条件的数据项构成的数组。它不会修改原来的数组。记住，它的立足点就是筛选。也仅仅是筛选。还有一点需要注意：每一次遍历都会有一个返回值，它的类型是布尔类型。返回值只有是true，当前遍历项才会被筛选中。不要试图在filter中去修改原始数组。
　　理解：就是在一堆数据里面去筛选你需要的数据或者剔除你不需要的数据functionCity（province，school，level）｛this。provinceprovince；this。schoolschool；this。levellevel；｝letbeijingnewCity（北京都，〔北京大学，清华大学〕，1）；letxiannewCity（西安都，〔西安交通大学，西北工业大学〕，2）；lethubeinewCity（湖北省，〔武汉大学，华中科技大学〕，2）；lethunannewCity（湖南省，〔湖南大学，中南大学〕，3）；letsichuannewCity（四川省，〔四川大学，电子科技大学〕，3）；letcities〔beijing，xian，hubei，hunan，sichuan〕；lettopscities。filter（function（item，index，list）｛returnitem。level！1；筛选出level不为1的数组｝）；console。log（tops，77）；
　　4。find（）
　　返回通过测试的数组的第一个元素的值，
　　理解：假如你去一个一群人的地方去找人你说我找xxb他要是在那里就找到不在那里就是undefined
　　在第一次调用callback函数时会确定元素的索引范围，因此在find方法开始执行之后添加到数组的新元素将不会被callback函数访问到。如果数组中一个尚未被callback函数访问到的元素的值被callback函数所改变，那么当callback函数访问到它时，它的值是将是根据它在数组中的索引所访问到的当前值。被删除的元素仍旧会被访问到。
　　语法
　　array。find（function（value，index，arr），thisValue）
　　value：必须，代表当前元素，其他四个参数都是可选，index代表当前索引值，arr代表当前的数组，thisValue代表传递给函数的值，一般用this值，如果这个参数为空，undefined会传递给this值
　　返回值：返回符合测试条件的第一个数组元素的值，如果没有符合条件的则返回undefined。vararr〔1，2，3，4，5，6，7〕；varararr。find（function（elem）｛returnelem5；｝）；console。log（ar）；6console。log（arr）；〔1，2，3，4，5，6，7〕
　　扩展：findIndex（）方法的用法与find（）方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回1。自己try吧
　　5。every
　　它地用武之地在哪里呢？不期望它能对原始数组进行修改。它地定位是考察数组地整体特性。也就是考察数组中所有元素的共性。比如所有元素是否都是奇数，或者所有元素是否都是偶数。它关注的是数组整体元素的共性。只要有一个不满足，循环就会结束，接下来的数据就不会继续判断。
　　理解：这个就像上课了老师说昨天布置的作业只要有一个人没有写完今天就不讲课然后挨个检查当检查到有一个没有写完的时候就不检查了返回不讲课了（false）varnumbers〔1，2，3，4，5，6，7，8，9〕；varnumbers〔2，4，，6，8，9，10〕；letboolnumbers。every（function（item，index，list）｛console。log（item，90）；returnitem20；｝）；console。log（bool，93）；
　　6。some
　　它地用武之地在哪里呢？它的定位是考察数组的个性。比如考察数组中是否存在一个等于0的数。它关注的是数组的个性。只要有一个满足，循环就会结束，接下来的数据就不会继续判断。
　　理解：相当于在一个数组里面找你想要的那个数找到了就返回true找不到就返回falsevarnumbers〔2，4，6，8，9，10〕；letboolnumbers。some（function（item，index，list）｛console。log（item，97）；returnitem4；｝）；console。log（bool，100）；
　　7。reduce
　　它这个方法是接收一个函数作为累加器，将数组中的值（从左向右）开始合并，最总为一个值然后返回出来，callback
　　他可以传四个参数：
　　1，previousValue：上一次调用回调返回的值，或者是提供的初始值（initialValue）
　　2，currentValue：数组中当前被处理的元素
　　3，index：不啰嗦，自己顾名思义去吧
　　4，array：返回调用reduce的数组获取购物车中商品列表的价格总和letgoodList〔｛id：1，price：10，qty：5｝，｛id：2，price：15，qty：2｝，｛id：3，price：20，qty：1｝〕lettotalPricegoodList。reduce（（prev，cur，index，arr）｛prev就是每次合并返回的值第一次返回时还没有做合并就是返回的默认值0下面分别是10550；152305080；2012080100console。log（prev，，cur，，index，，arr）returnprevcur。pricecur。qty这个0就是prev的默认值｝，0）console。log（totalPrice，totalPrice）
　　vararrStringabcdaabc获取字符中中每个字母出现的次数letcountarrString。split（）。reduce（function（res，cur）｛console。log（res，cur，res，cur）res〔cur〕？res〔cur〕：res〔cur〕1returnres｝，｛｝）console。log（count，count）｛a：3，b：2，c：2，d：1｝
　　彩蛋：这里附上前几天某某人比较喜欢的切割字符串的方法
　　substring（）和substr（）
　　相同点：如果只是写一个参数，两者的作用都一样：都是是截取字符串从当前下标以后直到字符串最后的字符串片段。substr（startIndex）substring（startIndex）varstr123456789console。log（str。substr（2））3456789console。log（str。substring（2））3456789
　　不同点：第二个参数
　　substr（startIndex，lenth）第二个参数是截取字符串的长度（从起始点截取某个长度的字符串）；
　　substring（startIndex，endIndex）第二个参数是截取字符串最终的下标（截取2个位置之间的字符串，‘含头不含尾）。console。log（123456789。substr（2，5））34567console。log（123456789。substring（2，5））345
　　5、Vue中created钩子和mounted钩子有什么区别？
　　1：在使用vue框架的过程中，我们经常需要给一些数据做一些初始化处理，这时候我们常用的就是在created与mounted选项中作出处理。
　　首先来看下官方解释，官方解释说created是在实例创建完成后呗立即调用。在这一步，实例已完成以下配置：数据观测（dataobserver），属性和方法的运算，watchevent事件回调。然而，挂载阶段还没开始，el属性目前不可见。
　　这话的意思我觉得重点在于说挂架阶段还没开始，什么叫还没开始挂载，也就是说，模板还没有被渲染成html，也就是这时候通过id什么的去查找页面元素是找不到的。下面看下实例来证明。
　　所以，一般creadted钩子函数主要是用来初始化数据。
　　2：mounted钩子函数一般是用来向后端发起请求拿到数据以后做一些业务处理。官方解释如下：
　　el被新创建的vm。el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时vm。el也在文档内。
　　这意思是该钩子函数是在挂在完成以后也就是模板渲染完成以后才会被调用。下面看实例
　　下面是结果
　　nihao
　　取到了值，这说明这时候vue模板已经渲染完毕。因此，Dom操作一般是在mounted钩子函数中进行的
　　computed：｛｝计算属性，什么是计算属性呢，我个人理解就是对数据进行一定的操作，可以包含逻辑处理操作，对计算属性中的数据进行监控。计算属性是基于它的以来进行更新的，只有在相关依赖发生改变时侧能更新变化，以函数的形式返回结果。然后可以像绑定普通属性一样在模板中绑定计算属性。body｛｛msg｝｝网址｛｛msg｝｝的网络协议是：｛｛msg2｝｝body
　　总结：
　　通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart。js的使用：varctxdocument。getElementById（ID）；通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选。
　　methods：｛｝中的方法都需要主动去触发，比如点击click之类的
　　而created（）｛｝、mounted（）｛｝、里面的代码都是自动去执行的，即vue生命周期到了哪一步就直接去执行对应钩子函数里面的代码了，无需手动去执行
　　created中主要放初始化获取数据之类，mounted（）中挂载到具体的DOM节点
　　computed：｛｝计算属性，什么是计算属性呢，我个人理解就是对数据进行一定的操作，可以包含逻辑处理操作，对计算属性中的数据进行监控。计算属性是基于它的以来进行更新的，只有在相关依赖发生改变时侧能更新变化，以函数的形式返回结果。然后可以像绑定普通属性一样在模板中绑定计算属性。body｛｛msg｝｝网址｛｛msg｝｝的网络协议是：｛｛msg2｝｝body
　　mounted是生命周期钩子，vue的生命周期中一个实例的mounted只会运行一次。mounted在vue的渲染模板挂载到el元素上才会调用，很显然你export的时候el都么有自然不会运行mounted钩子函数了。
　　所有的方法都应该在methods里定义，然后在created或者mounted里使用this调用方法，用这种方式实现初始化
　　6、Vue中组件之间的传参方式有哪些方式？
　　Vue组件传参的八种方式总结
　　Vue组件的使用不管是在平常工作还是在面试面试中，都是频繁出现的。因此系统的梳理一下组件之间的传参还是非常有必要的
　　一、props传参
　　子组件定义props有三种方式：
　　第一种数组方式props：〔xxx，xxx，xxx〕
　　第二种对象方式props：｛xxx：Number，xxx：String｝
　　第三种对象嵌套对象方式props：｛xxx：｛类型不匹配会警告type：Number，default：0，required：true，返回值不是true，会警告validator（val）｛returnval10｝｝｝
　　第三种对象默认支持4种属性，并且都是非必填的。可以随意使用
　　父组件传参的俩种方式
　　第一种静态属性传参
　　注意：
　　1、在不定义props类型的情况下props接受到的均为String。
　　2、当props属性指定为Boolean时，并且只有属性key没有值value时接受到的是true！props接受到的均为Stringchildrenxxx123children！有只有属性没有值，这种情况props指定类型是Boolean则接收到的是truechildrenxxxchildren
　　第二种动态属性传参
　　注意：
　　1、需要区分非简写形式传入的值是对象，则会对应props中多个值
　　2、会保留传入值的类型
　　3、如果是表达式则获取到的是表达式的计算结果！prop接收到Number类型的123children：xxx123children！prop接收到Array类型的〔1，2，3〕childrenvbind：xxx〔1，2，3〕children！prop会接收到xxx1和xxx2俩个参数。这种不支持简写形式childrenvbind｛xxx1：1，xxx2：2｝children
　　二、attrs和listeners
　　attrs
　　attrs会获取到props中未定义的属性（class和style属性除外），支持响应式。常用的场景有俩种：
　　组件嵌套组件时可以使用attrs来支持过多的属性支持。比如elementUI的table组件。支持的属性十几个，而平常封装的时候用的最多的也就一俩个。
　　属性默认是添加在父组件上的，有时候想把多余的属性添加在子组件上（可以结合inheritAttrs：false属性，让父属性不接受多余的属性）
　　listeners定义的事件都在子组件的根元素上，有时候想加到其他元素上。就可以使用listerners。它包含了父组件中的事件监听器（除了带有。native修饰符的监听器）
　　三、emit通知
　　Vue默认有onemitonceoff几种方法来实现发布订阅模式，这也应用在了组件传参上。在组件上添加的特殊方法abcmethods就相当于使用了on来监听这个方法。因此组件内可以使用emit来进行通知。
　　这里有一道考题：for循环的时候如何拿到子组件的传值和for中循环的值
　　答案有俩种，一是event，二是闭包。只是需要注意event只能获取到第一个值templatevforitemin〔1，2，3〕childrenabc（（val，val2）getValue（val，item））childrentemplate
　　四、vmodel
　　这个其实是一种通过emit，on的组合方式。优点再于同步值方便，写法优雅。下面三种写法其实是一个意思写法1childrenvmodelachildren｛model：｛prop：value，event：update：a，｝，methods：｛a（）｛this。emit（update：a，1）｝｝｝写法2children：aaupdate：aaeventchildren｛props：〔a〕methods：｛a（）｛this。emit（update：a，1）｝｝｝写法31。事件名必须是update：属性名2。参数不能是表达式，最好是data里面的属性children：a。syncachildren｛props：〔a〕methods：｛a（）｛this。emit（update：a，1）｝｝｝
　　五、插槽template！默认插槽slotslot！另一种默认插槽的写法slotnamedefaultslot！具名插槽slotnamefooterslot！传参插槽slotvbind：userusernameheaderslottemplate！使用children！跑到默认插槽中去123！另一种默认插槽的写法templatevslot：defaulttemplate！跑到具名插槽footer中去templatevslot：footertemplate！缩写形式templatefootertemplate！获取子组件的值templatevslot：headerslot｛｛slot。user｝｝template！结构插槽值templatevslot：header｛user：person｝｛｛person｝｝template！老式写法，可以写到具体的标签上面templateslotfooterslotscopescopetemplatechildren
　　六、refs，root，parent，children
　　root获取根组件
　　parent获取父组件
　　children获取子组件（所有的子组件，不保证顺序）
　　refs组件获取组件实例，元素获取元素
　　七、projectinject
　　注意：注入的值是非响应的！父组件提供｛project（）｛return｛parent：this｝｝｝！子组件注入｛写法一inject：〔parent〕写法二inject：｛parent：parent｝写法三inject：｛parent：｛from：parent，default：222｝｝｝
　　八、Vuex
　　这个相当于单独维护的一组数据，就不过多的说了。
　　7、Vue中watch和computed之间有什么区别？
　　watch，computed和methods的关系
　　1。watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的相关数据自动发生变化，也就是自动调用相关的函数去实现数据的变动。
　　2。对methods：methods里面是用来定义函数的，很显然，它需要手动调用才能执行。而不像watch和computed那样，自动执行预先定义的函数
　　watch和computed各自处理的数据关系场景不同
　　1。watch擅长处理的场景：一个数据影响多个数据
　　2。computed擅长处理的场景：一个数据受多个数据影响
　　watch用法监听下记haiZeiTuanName的值，会改变其他所有的值在watch中，一旦haiZeiTuanName（海贼团名称）发生改变data选项中的船员名称全部会自动改变（suoLong，naMei，xiangJiShi），并把它们打印出来多个）船员名称数据依赖于（1个）海贼团名称数据一个数据变化多个数据全部变化data：｛haiZeiTuanName：草帽海贼团，suoLong：草帽海贼团索隆，（haiZeiTuanName海贼名称）naMei：草帽海贼团娜美，xiangJiShi：草帽海贼团香吉士｝，watch：｛haiZeiTuanName：function（newName）｛this。suoLongnewName索隆this。naMeinewName娜美this。xiangJiShinewName香吉士console。log（this。suoLong）console。log（this。naMei）console。log（this。xiangJiShi）｝｝更改watch选项中监控的主数据vm。haiZeiTuanName橡胶海贼团
　　结果：this。suoLong会变为橡胶海贼团索隆，以此类推
　　computed用法监听下记firstName，secName，thirdName的值，会改变luFeiName的值data：｛路飞的全名：蒙奇D路飞firstName：蒙奇，secName：D，thirdName：路飞｝，computed：｛luFeiName：function（）｛returnthis。firstNamethis。secNamethis。thirdName｝｝将路飞改为海军王vm。thirdName海军王蒙奇D海军王
　　methods和computed的区别例子newVue（｛el：app，设置两个button，点击分别调用getMethodsDate，getComputedDate方法template：buttonclickgetMethodsDatemethodsbuttonbuttonclickgetComputedDatecomputedbutton，methods：｛getMethodsDate：function（）｛alert（newDate（））｝，返回computed选项中设置的计算属性computedDategetComputedDate：function（）｛alert（this。computedDate）｝｝，computed：｛computedDate：function（）｛returnnewDate（）｝｝
　　注意两次点击computed返回的时间是相同的！！
　　1。两次点击methods返回的时间是不同的
　　2。注意两次点击computed返回的时间是相同的
　　【注意】为什么两次点击computed返回的时间是相同的呢？newDate（）不是依赖型数据（不是放在data等对象下的实例数据），所以computed只提供了缓存的值，而没有重新计算
　　只有符合：1。存在依赖型数据2。依赖型数据发生改变这两个条件，computed才会重新计算。
　　参考：http：www。cnblogs。compenghuwanp7194133。html
　　8、在Vue项目中用到哪些性能优化问题？是这么处理的？
　　答：https：codecat。blog。csdn。netarticledetails100031285
　　9、async和promise的作用和用法分别有哪些？
　　1、Promise
　　Promise是异步编程的一种解决方案，比传统的解决方案回调函数和事件更合理和更强大，简单地说，Promise好比容器，里面存放着一些未来才会执行完毕（异步）的事件的结果，而这些结果一旦生成是无法改变的
　　2、asyncawait
　　asyncawait也是异步编程的一种解决方案，他遵循的是Generator函数的语法糖，他拥有内置执行器，不需要额外的调用直接会自动执行并输出结果，它返回的是一个Promise对象。
　　两者的主要用法、语法就不赘述了，感兴趣的同学可以自行查阅es6中文文档
　　两者的区别
　　1、Promise的出现解决了传统callback函数导致的地域回调问题，但它的语法导致了它向纵向发展行成了一个回调链，遇到复杂的业务场景，这样的语法显然也是不美观的。而asyncawait代码看起来会简洁些，使得异步代码看起来像同步代码，await的本质是可以提供等同于同步效果的等待异步返回能力的语法糖，只有这一句代码执行完，才会执行下一句。
　　2、asyncawait与Promise一样，是非阻塞的。
　　3、asyncawait是基于Promise实现的，可以说是改良版的Promise，它不能用于普通的回调函数。
　　简单来看，这两者除了语法糖不一样外，他们解决的问题、达到的效果是大同小异的，我们可以在不同的应用场景，根据自己的喜好来选择使用。promise方法letp1newPromise（（resolve，reject）｛setTimeout（（）｛resolve（我是p1）｝，4000）｝）letp2newPromise（（resolve，reject）｛setTimeout（（）｛resolve（我是p2）｝，200）｝）letp3newPromise（（resolve，reject）｛setTimeout（（）｛resolve（我是p3）｝，200）｝）想让p1完成后再执行P2再执行P3数量太多只能这么写p1。then（（res）｛console。log（res）；p2。then（（res）｛console。log（res）；p3。then（（res）｛console。log（res）；｝）｝）｝）下面大神回答的挺好的p1。then（（res）｛console。log（res）returnp2｝）。then（（res）｛console。log（res）returnp3｝）。then（（res）｛console。log（res）｝）asyncawait语法糖leta1（）｛returnnewPromise（（resolve，reject）｛setTimeout（（）｛resolve（我是a1）｝，4000）｝）｝leta2（）｛returnnewPromise（（resolve，reject）｛setTimeout（（）｛resolve（我是a2）｝，40）｝）｝leta3（）｛returnnewPromise（（resolve，reject）｛setTimeout（（）｛resolve（我是a3）｝，40）｝）｝想让a1完成后再执行a2再执行a3能避免回调asyncfunctionasy（）｛awaita1（）。then（（res）｛console。log（res）｝）；awaita2（）。then（（res）｛console。log（res）｝）；；awaita3（）。then（（res）｛console。log（res）｝）；；｝asy（）；