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