2-1 響應式資料 ref、reactive及 v-model 雙向綁定

1. 響應式資料 ref 用法，修改其值必須用 變數.value 才行，可以接受任何型態的資料，但是不會對物件或陣列內部的屬性變動做監聽。
2. 響應式資料 reactive 用法，只能用[陣列]或{物件}。可以做深層的監聽，以及訪問資料不需要 .value。
3. 利用 v-model 可以做到雙向綁定（修改input，h1內容也會修改）。

   <div id="app">
       <h1>{{refMsg}}</h1>
       <input type="text" v-model="refMsg">
       <h1>{{reactiveMsg.Text}}</h1>
       <input type="text" v-model="reactiveMsg.Text">
   </div>
   <script src="./js/vue.js"></script>
   <script>
       const {
           ref,
           reactive
       } = Vue;
       const App = {
           setup() {
               const refMsg = ref("Hello Vue ref!");
               const reactiveMsg = reactive({
                   Text: "Hello Vue reactive!"
               });
               setTimeout(() => {
                   refMsg.value = "Hi ref!"
                   reactiveMsg.Text = "Hi reactive!"
               }, 3000);
               return {
                   refMsg,
                   reactiveMsg,
               };
           },
       };
       Vue.createApp(App).mount("#app");
   </script>

   Copy

完整範例