Vue的常用测试点（一）

0.原序中有36道Vue常见面试题。考虑到Vue面试题太多，分为三部分：Part1,Part2,Part2。如果你能看懂这三篇文章，相信你不会害怕面试中的vue题。1、在页面定义一个定时器，在哪个阶段会被清零？答：在beforeDestroy中销毁定时器。①为什么要销毁：我在a页写了一个定时器，比如每秒打印1。当我点击按钮进入b页时，会发现定时器还在执行，这对性能消耗很大。②方案一：mounted(){this.timer=setInterval(()=>{console.log(1)},1000)},beforeDestroy(){clearInterval(this.timer)}方案一有两个不好的地方在引用Yuda的地方：它需要在这个组件实例中保存这个定时器，如果可能的话，最好只有生命周期钩子才能访问它。这不是一个严重的问题，但它可以被认为是碎片。我们的构建代码独立于我们的清理代码，这使得我们更难以编程方式清理我们构建的所有内容。方案二（推荐）：该方法是在定义定时器mounted(){consttimer=setInterval(()=>{console.log(1)},1000)this后，通过$once事件监听器的位置清除定时器.$once('hook:beforeDestroy',()=>{clearInterval(timer)})}官网参考链接：https://cn.vuejs.org/v2/guide...2.父组件如何获取子组件的数据，子组件如何获取父组件的数据，父子组件如何传值？①一、父组件如何主动获取子组件的数据？方案一：$children$children用于访问子组件实例。要知道一个组件的子组件可能不是唯一的，所以它的返回值是一个数组。现在，我们定义Header、HelloWorld两个组件mounted(){console.log(this.$children)}打印一个数组，可以使用foreach分别获取需要的数据缺点：无法确定子组件顺序不对反应灵敏。如果您确切知道要访问什么子组件，建议使用$refs。方案二：$refs在调用helloworld子组件的时候直接定义一个ref，这样就可以通过this.$refs获取需要的数据。this.$refs.hello.propertythis.$refs.hello.method②子组件如何主动获取父组件中的数据？Pass：$parent用于访问父组件实例，通常父组件是唯一确定的，类似于childrenthis.$parent。属性this.$parent。Method父子组件通信除了上面三种，还有props和attrs③inheritAttrs是@2.4新增的属性和接口。inheritAttrs属性控制父组件提供的属性是否显示在子组件的html属性上。如果我们将父组件Index中的desc、keywordsword、message这三个属性传递给子组件HelloWorld，在父组件Index部分如下子组件：HelloWorld，props:{message:String}中只接受messageprops，实际上我们只需要message，其他两个属性会作为普通的html元素插入到子组件的根元素。如图所示这样做会掩盖组件的预期功能。这时在子组件中写入，inheritAttrs:false，这些不用的属性会被去掉，如果为true，则显示出来。如果父组件中不需要的属性与子组件的原有属性冲突，则父组件子组件:HelloWorld此时父组件中type="text"，子组件中type="number"，但是type="text"显示在最后在实践中，这不是我们想要的，所以只要你设置：inheritAttrs:false，type就会变成number。上面这些没有用到的属性，怎么获取呢？这里用到了$attrs③$attrs的作用：可以获取未使用的注册属性，如果有需要，我们可以在这里继续往下传递。上面没有用到的desc和关键字可以通过$attrs获取。通过$attrs的这个特性，可以将父组件传递给孙子组件，省去了父组件传递给子组件，再从子组件传递给孙子组件的麻烦。代码如下：父组件Index部分