vue3中ref的两种写法

在 Vue3 中，可以使用两种方式来创建 ref：

1. 使用函数方式：可以通过 `import { ref } from 'vue'` 导入 `ref` 函数，然后通过 `ref()` 函数来创建 ref，如下所示：

import { ref } from 'vue'

const count = ref(0)

console.log(count.value) // 0

count.value++

console.log(count.value) // 1

2. 使用对象方式：可以通过 `import { reactive } from 'vue'` 导入 `reactive` 函数，然后通过 `{ value: xxx }` 的形式来创建 ref，如下所示：

import { reactive } from 'vue'

const state = reactive({
  count: 0
})

console.log(state.count) // 0

state.count++

console.log(state.count) // 1

需要注意的是，使用对象方式创建的 ref，我们需要通过 `state.count` 的方式来访问和修改 ref 的值，而不是 `state.value`。

相关问题

vue中watch ref

### 如何在 Vue 中使用 `watch` 监听 `ref`

在 Vue 组件中，可以利用组合式 API 或选项式 API 来实现对响应式数据的监听。对于 `ref` 的变化监控，在现代 Vue 版本（Vue 3.x），推荐采用组合式 API 方式来处理。

#### 使用组合式 API 实现

通过定义一个由 `ref()` 创建的数据属性，并借助于 `watchEffect()` 或者 `watch()` 函数来进行侦测其变动情况：

import { defineComponent, ref, watch } from 'vue';

export default defineComponent({
  setup() {
    const count = ref(0);

    // 当count发生变化时触发回调函数
    watch(count, (newVal, oldVal) => {
      console.log(`Count changed from ${oldVal} to ${newVal}`);
    });

    return {
      count,
    };
  },
});

如果希望只关注特定依赖项的变化而不立即执行副作用，则可以选择 `watch` 而不是 `watchEffect`[^1]。

#### 使用选项式 API 实现

当项目还在使用 Vue 2.x 或偏好传统写法的情况下，可以在组件内部声明周期钩子外设置 watcher 对象来监视指定变量：

data() {
  return {
    message: '',
  }
},
mounted(){
  this.message = "hello";
},
watch: {
  message(newValue, oldValue){
     console.log('message has been updated', newValue, oldValue);
  }
}

上述两种方法都可以有效地监测到基于 `ref` 定义的状态改变事件并作出相应反应。值得注意的是，虽然这里展示的例子都是针对简单类型的 `ref` 变量操作，但对于复杂对象同样适用，只需注意深浅拷贝的区别即可[^2]。

vue3 setup语法糖 watch写法

Vue 3 的 `setup` 函数提供了一种新的编写组件的方式，其中 `watch` 的写法更为简洁直观。传统的 `watch` 在 `created` 或者 `beforeUpdate` 生命周期钩子中使用，但在 `setup` 中，你可以这样使用：

import { watch } from 'vue'

setup() {
  // 定义响应式的数据或计算属性
  const count = ref(0)

  // 使用 watch 来监听某个数据的变化并执行回调
  // 第一个参数是要监视的变量，第二个参数是更新函数
  // 如果你想监听的是两个或更多变量，可以传递一个数组
  // 如果需要在变化发生前得到旧值，可以传入第三个参数为 { immediate: true }
  watch(
    count,
    (newCount) => {
      console.log(`计数已更新为：`, newCount)
    },
    { deep: true } // 如果需要深度监听对象或数组
  )

  // 可以返回 render 函数或其他副作用
  return () => <div>{{ count }}</div>
}