在 vue 3 中读取数据的方法包括：模板中使用响应性数据；使用 ref 获取元素引用；使用 computed 计算属性；使用 watch 监听响应性数据变更；使用 provide/inject 传递数据。

Vue 3 中如何读取数据

在 Vue 3 中，有以下几种方法可以读取数据：

1. 模板中使用响应性数据：

通过使用插值语法 {{}}，可以在模板中访问响应性数据。

立即学习“前端免费学习笔记（深入）”；

<template><p>{{ message }}</p>
</template><script>
export default {
  data() {
    return {
      message: 'Hello Vue 3!'
    }
  }
}
</script>

2. 使用 ref 获取元素引用：

ref 属性允许访问 DOM 元素或子组件的引用。

<template><input ref="input"></template><script>
export default {
  mounted() {
    // 在挂载后获取 input 元素的引用
    console.log(this.$refs.input);
  }
}
</script>

3. 使用 computed 计算属性：

computed 属性是一种只读属性，用于根据其他响应性数据计算值。

<template><p>{{ fullName }}</p>
</template><script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
}
</script>

4. 使用 watch 监听响应性数据变更：

watch 选项允许监听响应性数据的变化并执行回调函数。

<template><input v-model="message"></template><script>
export default {
  data() {
    return {
      message: 'Hello Vue 3!'
    }
  },
  watch: {
    message(newVal, oldVal) {
      console.log('Message changed:', newVal, oldVal);
    }
  }
}
</script>

5. 使用 provide/inject 传递数据：

provide 和 inject 选项用于在祖先和后代组件之间传递数据。

<!-- 祖先组件 -->
<template><component-a><component-b></component-b></component-a></template><script>
export default {
  provide() {
    return {
      sharedData: 'This data is shared between components'
    }
  }
}
</script><!-- 后代组件 --><template><p>{{ sharedData }}</p>
</template><script>
export default {
  inject: ['sharedData']
}
</script>