【前端vue3面试题】2024最新面试实录vue3(1)，2024年最新2024Web前端大厂面试真题

new Proxy(data, {
   // 拦截读取属性值
   get (target, prop) {
       return Reflect.get(target, prop)
   },
   // 拦截设置属性值或添加新属性
   set (target, prop, value) {
       return Reflect.set(target, prop, value)
   },
   // 拦截删除属性
   deleteProperty (target, prop) {
       return Reflect.deleteProperty(target, prop)
   }
})

proxy.name = 'tom'   

• 存在问题: 解决了vue2响应式的短板, 但是也存在兼容性问题(新特性, 老浏览器不支持)

3问: 有哪些vue3响应性判断函数?

• isRef: 检查一个值是否为一个 ref 对象
• isReactive: 检查一个对象是否是由 reactive 创建的响应式代理
• isReadonly: 检查一个对象是否是由 readonly 创建的只读代理
• isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理

4问: setup函数怎么用?

• setup使用:

 setup(props, context) {
    /\*\*\* Setup props \*/
    // 请注意如果你解构了 props 对象，解构出的变量将会丢失响应性, 推荐使用props.title形式
    console.log(props.title)
    // 将 `props` 转为一个其中全是 ref 的对象，然后解构
    const { title } = toRefs(props)
    // `title` 是一个追踪着 `props.title` 的 ref
    console.log(title.value)
    // 或者，将 `props` 的单个属性转为一个 ref
    const title = toRef(props, 'title')
    
    /\*\*\* Setup 上下文 \*/
    // 透传 Attributes（非响应式的对象，等价于 $attrs）
    console.log(context.attrs)
    // 插槽（非响应式的对象，等价于 $slots）
    console.log(context.slots)
    // 触发事件（函数，等价于 $emit）
    console.log(context.emit)
    // 暴露公共属性（函数）
    console.log(context.expose)
  }

• 注意点, 当使用

5问: Composition API 和 React Hook 很像, 它们有什么区别?