setup 定義響應式資料

阿新 • • 發佈：2022-05-11

1.setup定義響應式資料（ref單值）

 <script src="https://unpkg.com/vue@next"></script>
 <body>
   <div id="app">
     <h3>setup-ref響應式</h3>
     <p>希望這裡返回的b是響應式的</p>
     a:{{a}} - b: {{b}}
     <button @click="f">f</button>
     <button @click="f1">f1</button>
   </div>
   <script>
     const { createApp, ref }  
= Vue
     const app = createApp({
       data() {
          return {
            a: 1
          }
       },
       setup() {
        // 希望這裡返回的b是響應式的：改了b的值，頁面也會更新
        // ref: 會對基礎資料進行包裝
        // 它其實是用proxy代理了一個物件  `{ value: 0 }`
        const b = ref(0)
        const f1 = () => { b.value = 200}
         
return { b , f1  }
       },
       methods: {
         f () {
           // 這裡不能寫this.b.value
           this.b = 100
         }
       }
      })
     app.mount("#app")
</script>

如果希望在setup中返回具有響應式效果的資料，你可以用ref函式對資料進行處理。具體步驟：

在setup中返回一個ref()處理的資料

在檢視中正常用插值{{b}}（不需要加.value）

如果要修改這個值，有兩種方式：

1) 在setup中暴露一個函式，直接去修改.value

2) 在methods中定義一個方法，在此方法的內部通過this.XX=新值來修改

2.setup 定義響應式資料（reactive物件）

<script src="https://unpkg.com/vue@next"></script>
 <body>
   <div id="app">
     <h3>setup-reactive響應式</h3>
     <p>希望這裡返回的複合資料-obj是響應式的</p>
    obj.b: {{obj.b}},  obj.arr:{{obj.arr}}
     <button @click="f">f</button>
     <button @click="f1">f1</button>
     <button @click="f2">f2</button>
   </div>
   <script>
   const { createApp, reactive } = Vue
   const app = createApp({
     data() {
        return {
        }
     },
     setup() {
      // reactive: 會對物件進行包裝
      const obj = reactive({b: 1, arr: [1,2]})
      const f1 = () => { obj.b = 200 }
      const f2 = () => { obj.arr.push(3)}
      return { obj, f1, f2  }
     },
     methods: {
       f () {
         this.obj.b = 100
       }
     }
    })
   app.mount("#app")
</script>
</body>

步驟：

在setup中返回一個reactive()處理的物件obj
在檢視中正常用插值,但是要加上obj.
如果要修改這個值，有兩種方式：

1) 在setup中暴露一個函式，直接去修改

2) 在methods中定義一個方法，在內部通過this.ojb.XX=新值來修改

setup 返回響應式資料（reactive物件+toRefs）

上面的例子，我們需要用{{obj.b}}這種方式在檢視中渲染資料，下面我們來優化一下，通過引入toRefs包裝一個這個物件，然後再展開，就可以省略obj這個字首了

<script src="https://unpkg.com/vue@next"></script>
 <body>
   <div id="app">
     <h3>setup-ref響應式</h3>
     <p>希望這裡返回的複合資料-obj是響應式的</p>
    obj.b: {{b}},  obj.arr:{{arr}}
     <button @click="f">f</button>
     <button @click="f1">f1</button>
     <button @click="f2">f2</button>
   </div>
   <script>
    // vue3中提供一個概念：組合api
     const { createApp, reactive, toRefs } = Vue
     const app = createApp({
       data() {
          return {
          }
       },
      //  步驟：
      //  1. 在setup中返回一個reactive()處理的物件obj
      //  2. 在檢視中正常用插值,但是要加上obj.
      //  3. 如果要修改這個值，有兩種方式：
      //   1) 在setup中暴露一個函式，直接去修改
      //   2) 在methods中定義一個方法，在內部通過this.XX=新值來修改
       setup() {
        // reactive: 會對物件進行包裝
        // 它其實是用proxy代理了這個物件,只是第一個級別，所以不能直接解構
        // 如果直接解構，就失去了響應式的特性了
        // 這裡再用toRefs來包裝一下
        const obj = reactive({b: 1, arr: [1,2]})
        const f1 = () => { obj.b = 200}
        const f2 = () => { obj.arr.push(3)}
        return { ...toRefs(obj), f1, f2  }
       },
       methods: {
         f () {
           this.b = 100
         }
       }
      })
     app.mount("#app")
</script>
</body>