响应性基础 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++ // 适用