Vue笔记3

组合式API

• 无需通过 export default 对外抛出，而是直接通过setup 抛出

• 示例

<script setup>

</script>

 基本语法

ref()

• ref 函数用于创建一个基本的响应式引用，它将一个普通值转换为响应式的，通过 ref 创建的响应式数据可以直接访问和修改。ref函数内部的实现依赖于reactive 函数

• 示例

const count = ref(0)
console.log(count.value) // 0

count.value = 1
console.log(count.value) // 1

reactive()

• reactive 函数用于创建一个复杂的响应式对象或数组，它可以使整个对象或数组成为响应式的,当其中的属性被修改时，视图会自动更新。

• 示例

const obj = reactive({ count: 0 })
obj.count++

 computed()

• computed函数用于创建一个计算属性，它通过接受一个 getter 函数 ，返回一个只读的响应式 ref 对象。

• 示例

        创建一个只读的计算属性 ref：

const count = ref(1)
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2

plusOne.value++ // 错误

        创建一个可写的计算属性 ref：

const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: (val) => {
    count.value = val - 1
  }
})

plusOne.value = 1
console.log(count.value) // 0

readonly()

• 将一个 (不论是响应式还是普通的)对象变为一个只读的对象

• 示例

const original = reactive({ count: 0 })

const copy = readonly(original)

watchEffect(() => {
  // 用来做响应性追踪
  console.log(copy.count)
})

// 更改源属性会触发其依赖的侦听器
original.count++

// 更改该只读副本将会失败，并会得到一个警告
copy.count++ // warning!

watchEffect()​

• 立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。

• 示例

const count = ref(0)

watchEffect(() => console.log(count.value))
// -> 输出 0

count.value++
// -> 输出 1

        副作用清除：

watchEffect(async (onCleanup) => {
  const { response, cancel } = doAsyncWork(id.value)
  // `cancel` 会在 `id` 更改时调用
  // 以便取消之前
  // 未完成的请求
  onCleanup(cancel)
  data.value = await response
})

        停止侦听器：

const stop = watchEffect(() => {})

// 当不再需要此侦听器时:
stop()

        选项：

watchEffect(() => {}, {
  flush: 'post',
  onTrack(e) {
    debugger
  },
  onTrigger(e) {
    debugger
  }
})

watch()​

• watch函数用于创建一个监听器，它可以侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。

• 示例

• 侦听一个 getter 函数：

  const state = reactive({ count: 0 })
  watch(
    () => state.count,
    (count, prevCount) => {
      /* ... */
    }
  )

  侦听一个 ref：

  const count = ref(0)
  watch(count, (count, prevCount) => {
    /* ... */
  })

  当侦听多个来源时，回调函数接受两个数组，分别对应来源数组中的新值和旧值：

  watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
    /* ... */
  })

  当使用 getter 函数作为源时，回调只在此函数的返回值变化时才会触发。如果你想让回调在深层级变更时也能触发，你需要使用 { deep: true } 强制侦听器进入深层级模式。在深层级模式时，如果回调函数由于深层级的变更而被触发，那么新值和旧值将是同一个对象。

  const state = reactive({ count: 0 })
  watch(
    () => state,
    (newValue, oldValue) => {
      // newValue === oldValue
    },
    { deep: true }
  )

  当直接侦听一个响应式对象时，侦听器会自动启用深层模式：

  const state = reactive({ count: 0 })
  watch(state, () => {
    /* 深层级变更状态所触发的回调 */
  })

  watch() 和 watchEffect() 享有相同的刷新时机和调试选项：

  watch(source, callback, {
    flush: 'post',
    onTrack(e) {
      debugger
    },
    onTrigger(e) {
      debugger
    }
  })

  停止侦听器：

  const stop = watch(source, callback)
  
  // 当已不再需要该侦听器时：
  stop()

  副作用清理：

  watch(id, async (newId, oldId, onCleanup) => {
    const { response, cancel } = doAsyncWork(newId)
    // 当 `id` 变化时，`cancel` 将被调用，
    // 取消之前的未完成的请求
    onCleanup(cancel)
    data.value = await response
  })