【Vue五分钟】 vue练习题、面试题解答

博客主页：@丘比特惩罚陆

欢迎关注：点赞收藏⭐留言✒
系列专栏：web前端、嵌入式、笔记专栏
加入社区： 丘比特惩罚陆
人生格言：选对方向，每走一步都是进步！
✒️欢迎大佬指正，一起学习！一起加油！

希望大家能小手一动，帮忙点个赞！

资源邮箱：[email protected]

目录

1.第一题：Vue监控属性警告问题

2.第二题：this.$emit问题

3. 第三题：同名插槽问题

4.第四题：为什么index不可用做key?

5.第五题：底层原理问题

6. 第六题：防抖改造问题

7.第七题：设计秒杀倒计时组件

8.第八题：生命周期和指令钩子顺序

9.第九题：v-ant-ref指令回调问题

---

1.第一题：Vue监控属性警告问题

   子组件为什么不可以修改父组件传递的Prop，如果修改了，Vue是如何监控到属性的修改并给出相应的警告呢？

解答：

  因为 vue 是单向数据流。如果一开始没有 created 则可以修改，加上 created 里面的 proxy 就可以阻止子组件 proxy.vue去修改父组件的 info ，当然如果是通过 $emit 就可以。 Proxy.js 是对 Vue 底层处理方式的一个最简化情况。

proxy.js

const sharedPropertyDefinition = {
  enumerable: true,
  configurable: true
};
  export default function proxy(target,temp，key) {
  sharedPropertyDefinition.get = function proxyGetter() {
  return temp[key];
};
sharedPropertyDefinition.set = function proxySetter(val){
  temp[key) = val;
  if (!window.isUpdatingChildComponent) {
   console.error('不可以直接更改:$ikey'} ;
  window.isUpdatingChildComponent= false;;
Object.defineProperty(target, key,sharedPropertyDefinition);,

---

2.第二题：this.$emit问题

问题：this.$emit的返回值是什么？  --this；--如果需要返回值可以使用回调参数。

解答：

   

handleChange(e){
const res = this.$emit("change",e.target.value,val →> {console.log(val);
});
console.log(res,res =ss this);
}，

handleEventChange(val,callback){
this.name = val;
callback("hello")Areturn "hello";
}

子组件返回了值和回调函数，我们这里就接受了值和回调函数即 callback 则不需要后面的 return 了。

---

3. 第三题：同名插槽问题

 问题：

     相同名称的插槽是否合并还是替换？

解答：

     Vue2.5版本，普通插槽合并、替换；Vue2.6版本，都是替换；

methods: {
validate(phone = "") {
  return phone 8& /^1[8-9]{10$/. test (phone);
}
}

---

4.第四题：为什么index不可用做key?

问题：

    为什么不能用index作为key?

解答;

   因为index设计到更新DOM性能问题以及会引起状态BUG问题，所以不可以用为key；

如图每次点击添加的时候就会往数组加 1 ，而删除的时候则是数组变成了长度为 2 ， index 也跟着变了，那么删除的就是最后一个了，不管点的是哪一个。

修改后：（这样就正常了！！！）