ref与reactive的不同用法

<template>
  <div>
    <input type="text" ref="myInput" @input="updateInputValue" />
    <p>{{ myInput }}</p>
    <p>{{ myReactiveData2.inputValue }}</p>

    <p>{{ myReactiveData.value }}</p>
    <p>{{ myReactiveData.message}}</p>
  </div>
</template>

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

export default {
  name: 'HelloWorld',
  setup() {
    const myInput = ref(null);
    const myReactiveData = reactive({
      message: 'Hello World'
    });

    const myReactiveData2 = reactive({
      inputValue: ''
    });

    const updateInputValue = (event) => {
      myReactiveData2.inputValue = event.target.value;
    };

    // 使用ref访问输入元素
    console.log(myInput.value);
    

    // 使用.value访问响应式数据的值
    console.log(myReactiveData.message.value);
    console.log(myReactiveData.message);

    return {
      myInput,
      myReactiveData,
      myReactiveData2,
      updateInputValue
    };
  }
};
</script>