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


本文题目:Vue3响应性基础API实例分析
文章起源:http://pwwzsj.com/article/ipddsp.html