# setup() 函數、ref、reactive

## ==setup 起手式==

* 我們使用setup基本的架構上會使用==Vue.createApp== 開啟應用程式，並mount到指定HTML架構上

<div id="app"></div>
    <script src="./js/vue.js"></script>
    <script>
      const appTo ={
        // setup 起手式
        setup() {
          return ();
        }

      }
      Vue.createApp(appTo).mount("#app");
    </script>

## ==ref 使用==

* 在基本使用上 我們透過 {{ }} return 一個變數顯示，但使用setTimeout()函式會無法使用

    <div id="app">
      //顯示變數
      <h1> {{text}} </h1>
    </div>
    <script src="./js/vue.js"></script>
    <script>
      const App = {
        setup() {
          let text = "Bryan";

          setTimeout(() => {
              text = "Mars"
          }, 1000);

          return { text };
        },
      };
      Vue.createApp(App).mount("#app");
    </script>

* 改成 const 並改用 ref 封裝起來，在改動的變數中需要加入 ref物件包裝後的value取得值

   const App = {
        setup() {
          //改成const 並改用ref封裝起來
          const text = Vue.ref("Bryan");

          setTimeout(() => {
              //在改動的變數中需要加入 ref物件包裝後的value取得值
              text.value = "Mars"
              
              console.log(text);
          }, 1000);

          return { text };
        },
      };
      Vue.createApp(App).mount("#app");

vue包裝後的text中 顯示的值

* 解構式用法，方便ref 沿用的方式

//解構式用法，方便ref 沿用的方式
      const { ref } = Vue;  

      const App = {
        setup() {
          //改成ref 沿用
          const text = ref("Bryan");

          setTimeout(() => {

              //在改動的變數中需要加入 ref物件包裝後的value取得值
              text.value = "Mars"

              console.log(text);
          }, 1000);

          return { text };
        },
      };
      Vue.createApp(App).mount("#app");

## ==reactive==

<div class="alert alert-danger text-center">
reactive 只能接受物件與陣列的形式
</div>

 //解構式用法，使用reactive
      const { reactive } = Vue;  

      const App = {
        setup() {
          //改成ref 沿用
          const message = reactive( { name : "Bryan" });

          return { message, };
        },
      };
    Vue.createApp(App).mount("#app");

## ==選擇 ref ? 還是 reactive?==