VUE3 响应式API

• ref

// 使用 ref 包裹使其变为响应式数据, 使用ref访问时需用setupValue.value
// Proxy将值封装在一个对象中如: new Proxy({ value: 'setup事例 })
const setupValue = ref('setup事例')

• reactive：返回一个对象的响应式代理。使用isReactive()检测。

// 使用 reactive 包裹使其变为响应式数据
const dataList = reactive({
  count: 0,
  arr: [],
  obj: {
    name: 'Anna',
    age: 18
  }
})

• 事例：

<script setup>
import { reactive, readonly, ref, shallowReactive, shallowReadonly } from 'vue'

// 使用 ref 包裹使其变为响应式数据, 使用ref访问时需用setupValue.value
// Proxy将值封装在一个对象中如: new Proxy({ value: 'setup事例 })
const setupValue = ref('setup事例')

const handleClick = () => {
  setupValue.value = 'change'
}

// 使用 reactive 包裹使其变为响应式数据
const dataList = reactive({
  count: 0,
  arr: [],
  obj: {
    name: 'Anna',
    age: 18
  }
})

const handleCountClick = () => {
  dataList.count++
}
const handleAgeClick = () => dataList.obj.age++

// shallowReactive 只能处理外层数据
const dataList2 = shallowReactive({
  count: 0,
  arr: [],
  obj: {
    name: 'Anna',
    age: 18
  }
})

const handleCountClick2 = () => dataList2.count++
const handleAgeClick2 = () => dataList2.obj.age++

// readonly 包裹只读属性 不可修改 非响应式
const dataList3 = readonly({
  count: 0,
  arr: [],
  obj: {
    name: 'Anna',
    age: 18
  }
})

const handleCountClick3 = () => dataList3.count++
const handleAgeClick3 = () => dataList3.obj.age++

// shallowReadonly 外层数据只读 非响应式
const dataList4 = shallowReadonly({
  count: 0,
  arr: [],
  obj: {
    name: 'Anna',
    age: 18
  }
})

const handleCountClick4 = () => dataList4.count++
const handleAgeClick4 = () => {
  dataList4.obj.age = 35
  console.log(dataList4.obj.age)
}
</script>

<template>
  <div>
    <div v-text="setupValue">
    </div>
    <button @click="handleClick">change</button>
  </div>
  <hr />
  <div>
    <div v-text="dataList.count"></div>
    <button @click="handleCountClick">Count</button>
    <div v-text="dataList.obj.age"></div>
    <button @click="handleAgeClick">Age</button>
  </div>
  <hr />
  <div>
    <div v-text="dataList2.count"></div>
    <button @click="handleCountClick2">Count</button>
    <div v-text="dataList2.obj.age"></div>
    <button @click="handleAgeClick2">Count</button>
  </div>
  <hr />
  <div>
    <div v-text="dataList3.count"></div>
    <button @click="handleCountClick3">Count</button>
    <div v-text="dataList3.obj.age"></div>
    <button @click="handleAgeClick3">Count</button>
  </div>
  <hr />
  <div>
    <div v-text="dataList4.count"></div>
    <button @click="handleCountClick4">Count</button>
    <div v-text="dataList4.obj.age"></div>
    <button @click="handleAgeClick4">Count</button>
  </div>
  <hr />
</template>

<style scoped></style>

• toRefs：用于将响应式对象转换为普通对象，且属性均为ref类型

  <script setup>
  import { reactive, toRefs } from 'vue'
  
  const data = reactive({
    count: 0,
    str: 'demo'
  })
  
  const { count } = toRefs(data)
  
  const handleCountChange = () => {
    count.value++
  }
  </script>
  
  <template>
    <div v-text="count"></div>
    <button @click="handleCountChange">Count</button>
  </template>
  
  <style scoped></style>
  

• toRef：基于响应式对象上的一个属性，创建一个对应的 ref。这样创建的 ref 与其源属性保持同步：改变源属性的值将更新 ref 的值，反之亦然。

  <script setup>
  import { reactive, toRef } from 'vue'
  
  const data = reactive({
    count: 0,
    str: 'demo'
  })
  
  const count = toRef(data, 'count')
  
  const handleCountChange = () => {
    count.value++
  }
  </script>
  
  <template>
    <!-- <div v-text="data.count"></div> -->
    <div v-text="count"></div>
    <button @click="handleCountChange">Count</button>
  </template>
  
  <style scoped></style>
  
  

• computed: 计算属性

  <script setup>
  import { computed, ref } from 'vue'
  
  const num = ref(0)
  const count = computed({
    get: () => {
      console.log('run computed')
      return `物品个数：${num.value}`
    },
    set: (newValue) => {
      num.value = newValue
      console.log(count)
    }
  })
  
  const handleCountChange = () => num.value++
  const handleSetCount = () => { count.value = 3 }
  
  </script>
  
  <template>
    <div v-text="count"></div>
    <button @click="handleCountChange">Count</button>
    <button @click="handleSetCount">setCount</button>
  </template>
  
  <style scoped></style>
  
  

• watch: watch() 默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数

  <script setup>
  import { reactive, watch, ref } from 'vue'
  
  const data = reactive({
    count: 0,
    num: 10
  })
  // 侦听单个源（某个属性）
  watch(
    () => data.num,
    (newValue, oldValue) => { console.log(newValue, oldValue) }
  )
  // 侦听单个源（整个对象）
  watch(
    data,
    (newValue, oldValue) => { console.log(newValue, oldValue) }
  )
  
  const count = ref(0)
  // 侦听多个源
  watch(
    [count, () => data.num],
    ([newCount, newNum], [oldCount, oldNum]) => {
      console.log(newCount, oldCount)
      console.log(newNum, oldNum)
    },
    {
      // 强制深度遍历
      deep: true,
      // 在侦听器创建时立即触发回调
      immediate: true,
      // 调整回调函数的刷新时机, 默认在update之前
      flush: 'post'
    }
  )
  
  const handleNumChange = () => data.num++
  
  </script>
  
  <template>
    <div v-text="data.num"></div>
    <button @click="handleNumChange">num++</button>
  </template>
  
  <style scoped></style>
  
  

• watchEffect:

  <script setup>
  import { reactive, watchEffect, ref } from 'vue'
  
  const data = reactive({
    num: 10
  })
  
  const count = ref(0)
  
  watchEffect(() => { console.log(count.value, data.num) })
  
  const handleDataChange = () => {
    count.value++
    data.num++
  }
  
  </script>
  
  <template>
    <button @click="handleDataChange">change</button>
  </template>
  
  <style scoped></style>