Vue3响应性基础API实例分析

这篇"Vue3响应性基础API实例分析"文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇"Vue3响应性基础API实例分析"文章吧。

响应性基础 API

reactive

为什么有这个属性了，其实我猜测是为了满足不同团队的写代码风格，因为有的团队可能喜欢如下方式：

const x = 10;

const y = 20;

有的团队则喜欢这种方式：

const obj = {

x: 10,

y: 20

}

而 reactive 则是为了满足第二种情况的团队，返回对象的响应式副本，响应式转换是深层的，它会影响对象的属性，返回的 proxy 是不等于原始对象的，所以我们建议使用 proxy ，避免依赖原始对象。

readonly

根据英文单词的字面就知道这个方法代表只读，可以将一个原始的对象，或者是响应式对象，或者是 ref 返回的副本对象，我们知道响应式转换是深层的，会影响到深层属性，所以对象的任何属性都是只读的：

isProxy

用于检测对象是否被 reactive 或者readonly 创建的 proxy

isReactive

检测对象是否是 reactive 创建的响应式对象：

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实例分析"这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注行业资讯频道。