利用Vue3怎么实现一个响应式侦听与计算功能

Vue3响应式依赖收集

在Vue3中，我们可以使用 reactive 和 ref 来创建响应式数据。每当响应式的数据被访问时，Vue会自动依赖于该数据的相应getter，并且在更新数据时重新执行相应的函数。

import { reactive, effect } from 'vue'

const state = reactive({
  count: 0,
})

effect(() => {
  console.log(`count is now ${state.count}`)
})

state.count++ // 打印 "count is now 1"

计算属性的实现

在Vue3中，我们可以使用 computed 来创建计算属性。计算属性会依赖于响应式的数据，当依赖的数据发生变化时，计算属性会重新计算。

import { reactive, computed } from 'vue'

const state = reactive({
  firstName: 'Foo',
  lastName: 'Bar',
})

const fullName = computed(() => {
  return `${state.firstName} ${state.lastName}`
})

console.log(fullName.value) // "Foo Bar"

state.firstName = 'Jack'
console.log(fullName.value) // "Jack Bar"

Watch的实现

在Vue3中，我们可以使用 watchEffect 来监视响应式的数据。当响应式的数据变化时，watchEffect会自动更新响应式依赖的数据和计算属性。

import { reactive, watchEffect } from 'vue'

const state = reactive({
  count: 0,
})

watchEffect(() => {
  console.log(`count is now ${state.count}`)
})

state.count++ // 打印 "count is now 1"

Provide与Inject的实现

在Vue3中，我们可以使用 provide 和 inject 实现组件之间的通信。使用 provide 可以提供值，而使用 inject 可以注入值。

// parent.js
import { provide } from 'vue'
import Child from './Child.vue'

export default {
  components: { Child },
  setup() {
    provide('name', 'Foo')
  },
}

// child.vue
import { inject } from 'vue'

export default {
  setup() {
    const name = inject('name')
    console.log(name) // "Foo"
  },
}