189 8069 5689
这篇“Vue3响应性基础API实例分析”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue3响应性基础API实例分析”文章吧。
成都创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站制作、成都网站建设、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的双江网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！
响应性基础 API
reactive
为什么有这个属性了，其实我猜测是为了满足不同团队的写代码风格，因为有的团队可能喜欢如下方式：
const x = 10;
const y = 20;
有的团队则喜欢这种方式：
const obj = {
x: 10,
y: 20
}
而 reactive 则是为了满足第二种情况的团队，返回对象的响应式副本，响应式转换是深层的，它会影响对象的属性，返回的 proxy 是不等于原始对象的，所以我们建议使用 proxy ，避免依赖原始对象。
x --- {{obj.x}}
y --- {{obj.y}}
readonly
根据英文单词的字面就知道这个方法代表只读，可以将一个原始的对象，或者是响应式对象，或者是 ref 返回的副本对象，我们知道响应式转换是深层的，会影响到深层属性，所以对象的任何属性都是只读的：
x --- {{obj.x}}
y --- {{obj.y}}
isProxy
用于检测对象是否被 reactive 或者readonly 创建的 proxy
x --- {{obj.x}}
y --- {{obj.y}}
isReactive
检测对象是否是 reactive 创建的响应式对象：
x --- {{obj.x}}
y --- {{obj.y}}
isReadonly
检测对象是否是 readonly 创建的只读对象：
console.log("isReadonly(obj)",isReadonly(obj), isReadonly(readonlyObj))
toRaw
返回 reactive 或者 readonly proxy 的原始对象，
const xt = {}
const xy = reactive(xt)
console.log("toRaw===>", toRaw(xy) == xt) // true
markRaw
标记一个对象，使其永远不会转换为 proxy 响应式对象：
const foo = markRaw({})
console.log(isReactive(reactive(foo))) // false
shallowReactive
创建一个响应式 proxy，跟踪其自身 property 的响应性，但不执行嵌套对象的深度响应式转换 (暴露原始值)。
const state = shallowReactive({
foo: 1,
nested: {
bar: 2
}
})
// 改变状态本身的性质是响应式的
state.foo++
// ...但是不转换嵌套对象
isReactive(state.nested) // false
state.nested.bar++ // 非响应式
shallowReadonly
创建一个 proxy，使其自身的 property 为只读，但不执行嵌套对象的深度只读转换 (暴露原始值)。
const state = shallowReadonly({
foo: 1,
nested: {
bar: 2
}
})
// 改变状态本身的property将失败
state.foo++
// ...但适用于嵌套对象
isReadonly(state.nested) // false
state.nested.bar++ // 适用
以上就是关于“Vue3响应性基础API实例分析”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注创新互联行业资讯频道。