Vue中是否存在与Svelte的destiny operator类似的特性？

开发者阿泽

2026-9-29

Vue 对应 Svelte 响应式声明的实现方案

Svelte 中 $: 开头的响应式声明可以自动追踪内部依赖的变量，变量变化时自动触发执行，Vue 中存在完全对应的实现，不同版本的使用方式如下：

Vue3 组合式API

1. `watchEffect`（最接近Svelte响应式声明的用法）

watchEffect 不需要手动指定监听源，会自动收集回调内部用到的所有响应式变量，任意依赖更新时都会自动重新执行回调，和Svelte的$:行为完全一致：

import { ref, watchEffect } from 'vue'

const someVar = ref('初始值')
const count = ref(0)

// 自动追踪someVar、count的变化，任意值更新就执行打印
watchEffect(() => {
  console.log({ someVar: someVar.value, count: count.value })
})

2. 手动指定监听源的`watch`

如果需要明确指定监听某一个或几个变量，可以用watch API，适合需要获取新旧值对比的场景：

import { ref, watch } from 'vue'

const someVar = ref('初始值')

// 仅监听someVar的变化，回调可拿到更新前后的值
watch(someVar, (newVal, oldVal) => {
  console.log('someVar更新了', { 新值: newVal, 旧值: oldVal })
})

Vue2 选项式API

Vue2 中可以通过watch配置项或者实例方法$watch实现同等效果：

export default {
  data() {
    return {
      someVar: '初始值',
      count: 0
    }
  },
  watch: {
    // 单独监听单个变量
    someVar(newVal) {
      console.log({ someVar: newVal })
    },
    // 同时监听多个变量可以用计算属性形式的监听源
    '$data'(newVal) {
      console.log({ someVar: newVal.someVar, count: newVal.count })
    }
  },
  created() {
    // 也可以用$watch手动创建监听，匹配动态生成监听逻辑的场景
    this.$watch(
      () => [this.someVar, this.count],
      ([newSome, newCount]) => {
        console.log({ someVar: newSome, count: newCount })
      },
      { deep: true, immediate: true }
    )
  }
}