Vue3中Composition的API用法详解

<script setup>
import { reactive, readonly, isProxy } from 'vue'
let foo = readonly({ name: 'WFT1' }) // 其中的属性不可修改
let bar = reactive({ name: 'WFT2' })
console.log(isProxy(foo)) // true
console.log(isProxy(bar)) // true
</script>

<script setup>
import { reactive, readonly, isReactive } from 'vue'
let foo = reactive({ name: 'WFT2' })
let bar = readonly(reactive({ name: 'WFT1' }))
let info = readonly({ age: 18 })
console.log(isReactive(foo)) // true
console.log(isReactive(bar)) // true
console.log(isReactive(info)) // false
</script>

<script setup>
import { readonly, isReadonly } from 'vue'
let foo = readonly({ name: 'WFT1' })
console.log(isReadonly(foo)) // true
</script>

<script setup>
import { reactive, readonly, toRaw } from 'vue'
let obj1 = { name: 'WFT1' }
let obj2 = { name: 'WFT2' }
let foo = reactive(obj1)
let bar = readonly(obj2)
let myObj1 = toRaw(foo)
let myObj2 = toRaw(bar)
console.log(myObj1 === obj1) // true
console.log(myObj2 === obj2) // true
</script>

<template>
  <div class="main">
    <h3>{{ obj.info.name }}</h3>
    <button @click="edit">深层修改</button>
  </div>
</template>
<script setup>
import { shallowReactive } from 'vue'
let obj = shallowReactive({
  info: {
    name: 'WFT'
  }
})
const edit = () => {
  obj.info.name = '哈哈哈'
  console.log(obj)
}
</script>

<script setup>
import { readonly } from 'vue'
let obj = readonly({
  info: {
    name: 'WFT'
  }
})
const edit = () => {
  obj.info.name = '哈哈哈'
}
</script>

<script setup>
import { shallowReadonly } from 'vue'
let obj = shallowReadonly({
  info: {
    name: 'WFT'
  }
})
const edit = () => {
  obj.info.name = '哈哈哈'
}
</script>

<script setup>
import { ref, isRef } from 'vue'
const name = ref('WFT')
console.log(isRef(name)) // true
</script>

<template>
  <div class="main">
    <h3>{{ info.age }}</h3>
    <h3>{{ age }}</h3>
    <button @click="edit">修改age</button>
  </div>
</template>
<script setup>
import { reactive, toRefs } from 'vue'
let info = reactive({ age: 18 })
let { age } = toRefs(info)
const edit = () => {
  age.value++
}
</script>

<template>
  <div class="main">
    <h3>{{ info.age }}</h3>
    <h3>{{ age }}</h3>
    <button @click="edit">修改age</button>
  </div>
</template>
<script setup>
import { reactive, toRef } from 'vue'
let info = reactive({ name: 'wft', age: 18 })
let age = toRef(info, 'age')
const edit = () => {
  age.value++
}
</script>

<script setup>
import { reactive, toRef } from 'vue'
const state = reactive({ name: 'wft', age: 18 })
// 如果我们只希望转换一个reactive对象中的属性为ref响应式变量，那么可以使用toRef方法
const name = toRef(state, 'name')
const { age } = state // 这个age不是响应式数据
const changeName = () => state.name = 'WFT'
</script>

<script setup>
import { ref, unref } from 'vue'
const name = ref('WFT')
test(name)
test('这个名字不是由ref方法包裹的')
function test(name) {
  console.log(unref(name))
}
</script>

<template>
  <div class="main">
    <h3>{{ obj.info.age }}</h3>
    <button @click="editAge">修改age</button>
  </div>
</template>
<script setup>
import { shallowRef } from 'vue'
const obj = shallowRef({ info: { name: 'wft', age: 18 } })
const editAge = () => {
  obj.value.info.age++
  console.log(obj.value.info.age) // 19  但是页面没有更新
}
</script>

<template>
  <div class="main">
    <h3>{{ obj.info.age }}</h3>
    <button @click="editAge">修改age</button>
  </div>
</template>
<script setup>
import { shallowRef, triggerRef } from 'vue'
const obj = shallowRef({ info: { name: 'wft', age: 18 } })
const editAge = () => {
  obj.value.info.age++
  triggerRef(obj)
}
</script>