Vue3响应性基础API实例分析

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

响应性基础 API

reactive

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

const x = 10;

const y = 20;

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

const obj = {

    x: 10,

    y: 20

}

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

<template>

  <div>

    <p>x --- {{obj.x}}</p>

    <p>y --- {{obj.y}}</p>

  </div>

</template>

<script>

import {

  reactive,

} from 'vue'

export default {

  setup() {

    const obj = reactive({

      x: 10,

      y: 20

    })

    return {

      obj

    }

  },

}

</script>

readonly

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

<template>

  <div>

    <p>x --- {{obj.x}}</p>

    <p>y --- {{obj.y}}</p>

  </div>

</template>

<script>

import {

  reactive,

  readonly,

  watchEffect

} from 'vue'

export default {

  setup() {

    const obj = reactive({

      x: 10,

      y: 20

    })

    const readonlyObj = readonly(obj)

    watchEffect(() => {

      console.log("用于追踪 obj", obj.x)

    })

    obj.x++ // 会进行加法运算

    readonlyObj.x++ // 发生警告

    return {

      obj

    }

  },

}

</script>

isProxy

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

<template>

  <div>

    <p>x --- {{obj.x}}</p>

    <p>y --- {{obj.y}}</p>

  </div>

</template>

<script>

import {

  reactive,

  readonly,

  watchEffect,

  isProxy,

  isReactive,

  isReadonly

} from 'vue'

export default {

  setup() {

    const obj = reactive({

      x: 10,

      y: 20

    })

    const readonlyObj = readonly(obj)

    watchEffect(() => {

      console.log("用于追踪 obj", obj.x)

    })

    console.log("isReadonly(obj)",isReadonly(obj), isReadonly(readonlyObj))

    console.log("isProxy(obj)", isProxy(obj), isProxy(readonlyObj))

    console.log("isReactive(obj)", isReactive(obj), isReactive(readonlyObj))

    obj.x++ // 会进行加法运算

    readonlyObj.x++ // 发生警告

    return {

      obj

    }

  },

}

</script>

isReactive

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

<template>

  <div>

    <p>x --- {{obj.x}}</p>

    <p>y --- {{obj.y}}</p>

  </div>

</template>

<script>

import {

  reactive,

  readonly,

  watchEffect,

  isProxy,

  isReactive,

  isReadonly

} from 'vue'

export default {

  setup() {

    const obj = reactive({

      x: 10,

      y: 20

    })

    const readonlyObj = readonly(obj)

    watchEffect(() => {

      console.log("用于追踪 obj", obj.x)

    })

    console.log("isReadonly(obj)",isReadonly(obj), isReadonly(readonlyObj))

    console.log("isProxy(obj)", isProxy(obj), isProxy(readonlyObj))

    console.log("isReactive(obj)", isReactive(obj), isReactive(readonlyObj))

    obj.x++ // 会进行加法运算

    readonlyObj.x++ // 发生警告

    return {

      obj

    }

  },

}

</script>

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