4.新建一个单文件组件Ref.vue，采用“响应式数据绑定”的方法，实现在页面输出自己的座右铭，并将更改以后的数据输出在控制台。

为了创建一个名为`Ref.vue`的单文件组件，我们将在其中使用Vue3的响应式系统，特别是`ref`和`v-model`。`ref`用于创建响应式的引用，而`v-model`则实现了双向数据绑定。以下是`Ref.vue`的代码实现：

<template>
  <div>
    <!-- 使用ref创建一个响应式的输入框引用 -->
    <input type="text" v-model="quote" @input="$emit('update:quote', $event.target.value)">
    <p>{{ quote }}</p>
    <button @click="logQuote">更新并查看控制台</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'RefComponent',
  data() {
    // 初始化一个响应式的值
    return {
      // 使用ref包装一个初始值
      quoteRef: ref('My Motto'),
    };
  },
  methods: {
    logQuote() {
      console.log('当前座右铭:', this.quoteRef.value);
      // 当输入发生变化时，更新引用的值，并触发视图更新
      this.$emit('update:quote', this.quoteRef.value);
    },
  },
};
</script>

<style scoped></style>

在这个组件中，用户可以在输入框中修改座右铭，输入框的内容会实时反映到显示的文字上。点击按钮`logQuote`时，它会在控制台打印出当前的座右铭。