阅读量:0
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 很像, 它们有什么区别?
是很像, Comp