vue3 响应性api

ref

接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property，指向该内部值。

<template>
  <div class="hello">
    <span class="decbox" @click="dec">decrease</span>
    <span class="decbox" @click="add">increase</span>
    <h2>
      {{ count }} // 注意这里和下边的注意刚好相反，使用的是count，因为setup返回之后它会被自动浅解包。直接使用count就可以了。
    </h2>
  </div>
</template>

<script setup> // 这里使用setup语法糖，就不用写return了
import { ref } from 'vue'

let count = ref(1)
const dec = () =>{
  count.value--  // 注意这里使用的是 .value，而不是直接用count
}
const add = () =>{
  count.value++
  data.sortOrders.push(6)
} 
const data = reactive({
  sortKey: '',
  sortOrders: [1,2,3,4,5]
})
</script>

reactive

返回对象的响应式副本，也是创建响应式的方法

// 使用方法，使用时不用向ref那样 .value,直接使用就行，
const obj = reactive({ count: 0 })
console.log(obj.count) // 0

toref

可以用来为源响应式对象上的某个 property 新创建一个 ref。然后，ref 可以被传递，它会保持对其源 property 的响应式连接。也即改变任意一个也会影响另一个。

const state = reactive({
  foo: 1,
  bar: 2
})

const fooRef = toRef(state, 'foo') // 接收两个参数，一是响应式对象，二是对象上的某个属性名

fooRef.value++ //转换为ref之后需要 .value去访问
console.log(state.foo) // 2

state.foo++
console.log(fooRef.value) // 3 // 转换为ref之后需要 .value去访问

torefs

将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的 ref。 它和toref的区别：toRefs 只会为源对象中包含的 property 生成 ref。如果要为特定的 property 创建 ref，则应当使用 toRef

const state = reactive({
  foo: 1,
  bar: 2
})

const stateAsRefs = toRefs(state)

readonly

接受一个对象 (响应式或纯对象) 或 ref 并返回原始对象的只读代理。只读代理是深层的：任何被访问的嵌套 property 也是只读的。如果是ref的话，也会自动解包。

    const { repositories } = userReport(user)
    // torefs 将变量转换为ref的响应式，但是前提是参数必须存在，如果参数可能不存在，可以使用toref代替
    const original = reactive({
      count:0
    })
    const copy = readonly(original)
    original.count ++ 
    console.log('copy1',copy.count); // 1 // 虽然copy只读但是如果传入的是响应对象，让然可以改掉copy的值。
    copy.count ++ // 报错

markRaw

标记一个对象，使其永远不会转换为 proxy。返回对象本身。

const foo = markRaw({})
console.log(isReactive(reactive(foo))) // false

// 嵌套在其他响应式对象中时也可以使用
const bar = reactive({ foo })
console.log(isReactive(bar.foo)) // false

shallowReactive

创建一个响应式代理，它跟踪其自身 property 的响应性，但不执行嵌套对象的深层响应式转换 (暴露原始值)。

const state = shallowReactive({
  foo: 1,
  nested: {
    bar: 2
  }
})

// 改变 state 本身的性质是响应式的
state.foo++
// ...但是不转换嵌套对象
isReactive(state.nested) // false
state.nested.bar++ // 非响应式 ，数组也是不行的哦

shallowReadonly

创建一个 proxy，使其自身的 property 为只读，但不执行嵌套对象的深度只读转换 (暴露原始值)。