每天10道题，100天后，搞定所有前端面试的高频知识点，加油！！！在看文章的同时，希望不要直接看答案，先思考一下自己会不会，如果会，自己的答案是什么？想过之后再与答案比对，是不是会更好一点，当然如果你有比我更好的答案，欢迎评论区留言，一起探讨技术之美。
目录
面试官：请你简述一下Proxy 与 Object.defineProperty优劣对比？
面试官：请说明给vue中的元素设置key值时可以使用math中的random方法吗？
面试官：请说明一下vue中watch是怎么深度监听对象变化的？
面试官：请你简述一下vue中子组件为什么不可以修改父组件传递的props？
面试官：请你简述一下Proxy 与 Object.defineProperty优劣对比？
目前开发者已经普遍使用Proxy，因其提供了更多的功能和更好的性能，它已经成为许多开发人员更常用的工具之一，需要注意就是确保目标环境支持这一特性。
面试官：请问Vue如何快速定位哪个组件出现性能问题？
面试官：请说明scoped是如何实现样式传统的？
举个例子，假设我们有以下 Vue 单文件组件：
<template>
<div class="example">Hello World</div>
</template>
<style scoped>
.example {
color: red;
}
</style>
// 在编译后，Vue 会将样式转换为类似下面的代码：
.example[data-v-f3f3eg9] {
color: red;
}
// 同时，模板中的根元素会被添加一个对应的属性，以便匹配上面的选择器：
<div class="example" data-v-f3f3eg9>Hello World</div>通过这种方式，.example 样式就只会应用到当前组件的 <div> 元素上，而不会影响到其他组件或页面上的 .example 样式，但是scoped 样式并不是完全隔离的。由于 CSS 的特性，有些情况下样式可能会“泄漏”到其他组件。例如，如果一个子组件的深度超过了 scoped 样式的作用范围，或者使用了像 ::v-deep（在 Vue 3 中是 ::deep 或 >>>）这样的深度选择器，那么样式就可能会影响到其他组件。因此，在使用 scoped 样式时，仍然需要注意样式的隔离性和可维护性。
面试官：请问Vue中的数据为什么频繁变化但只会更新一次？
面试官：请说明给vue中的元素设置key值时可以使用math中的random方法吗？
建议使用列表项中某个唯一的、稳定的属性来作为 key，例如，如果你正在渲染一个用户列表，并且每个用户都有一个唯一的 id，那么你应该使用 id 作为 key。