1.初識setUp的使用

  1. 簡單介紹下面的程式碼功能：
  2. 使用ref函式，去使用監聽某一個變數的變化，並且把它渲染到檢視上。
  3. setUp函式是組合API的入口函式。這個是非常重要的。
  4. setUp可以去監聽變數的變化哈！我們將會利用它
  5. ref 在vue中內建，需要匯入。

  2. <template>
  3.  <div>{{ countNum}}</div>
  4.  <button @click="handerFunc">按鈕</button>
  5. </template>
  6. <script>
  7. import {ref} from 'vue'
  8. export default {
  9.   name: 'App',
  10.   setup() {
  11.     // 這一句表示的是定義了一個變數count。這個變數的初始值是100
  12.     let countNum=ref(100);
  14.     // 在組合API中，如果想定義一個方法，不用定義到methods中去。直接定義就可以了
  15.     function handerFunc(){
  16.       // console.log(countNum);//countNum是一個物件
  17.       countNum.value += 10;
  18.     }
  19.     //在組合api中定義的方法，或者變數。如果外界需要使用，那麼必須通過 return  {aaa,func} 的方式暴露出去
  20.     return { countNum ,handerFunc}
  21.   }
  22. }
  23. </script>

2認識reactive的使用

  1. ref函式只能夠去監聽簡單型別的資料變化。
  2. 不能夠去監聽，複雜型別的變化(陣列、物件)。
  3. 所以我們的主角reactive就出現了。
  4. setup 中的函式會自動執行一次。

  2. <template>
  3.  <div>
  4.    <ul>
  5.      <li v-for="item in satte.arr" :key="item.id">
  6.        {{item.name  }}
  7.      </li>
  8.    </ul>
  10.  </div>
  11. </template>
  12. <script>
  13. import {reactive} from 'vue'
  14. export default {
  15.   name: 'App',
  16.   setup(){
  17.     console.log("setUp會自動執行的")
  18.     // ref函式的注意點：
  19.     // ref函式只能夠去監聽簡單型別的資料變化，不能夠去監聽，複雜型別的變化(陣列、物件)
  20.     // reactive  方法裡面是一個物件
  21.     let satte=reactive({
  22.        arr:[
  23.          {name:"司藤",id:'0011'},
  24.          {name:"皮囊之下",id:'0011'},
  25.          {name:"百歲之約",id:'0012'},
  26.          {name:"三生三世",id:'0013'},
  27.        ]
  28.     })
  29.     return { satte }
  30.   },
  31. }
  32. </script>

3使用reactive 實現檢視的刪除

  1. <template>
  2.  <div>
  3.    <ul>
  4.      <li v-for="(item,index) in satte.arr" :key="index" @click="del(index)">
  5.        {{item.name  }}
  6.      </li>
  7.    </ul>
  9.  </div>
  10. </template>
  11. <script>
  12. import {reactive} from 'vue'
  13. export default {
  14.   name: 'App',
  15.   setup(){
  16.     let satte=reactive({
  17.        arr:[
  18.          {name:"司藤",id:'0011'},
  19.          {name:"皮囊之下",id:'0011'},
  20.          {name:"百歲之約",id:'0012'},
  21.          {name:"三生三世",id:'0013'},
  22.        ]
  23.     })
  24.     // 刪除被點選的元素
  25.     function del(index){
  26.       for(let i=0;i<satte.arr.length;i++){
  27.         if(index==i){
  28.           satte.arr.splice(i,1)
  29.         }
  30.       }
  31.     }
  32.     return { satte, del}
  33.   },
  34. }
  35. </script>

4將刪除的邏輯分離出去，形成一個單獨的模組

  1. <template>
  2.  <div>
  3.    <ul>
  4.      <li v-for="(item,index) in satte.arr" :key="index" @click="del(index)">
  5.        {{item.name  }}
  6.      </li>
  7.    </ul>
  9.  </div>
  10. </template>
  11. <script>
  12. import {reactive} from 'vue'
  13. export default {
  14.   name: 'App',
  15.   setup(){
  16.     // onlyDelLuoJi() 方法中含有一個數組 和一個方法；類似於解構
  17.     let {satte,del }=onlyDelLuoJi();
  19.     // 暴露給外界使用
  20.     return { satte,del}
  21.   },
  22. }
  24. function onlyDelLuoJi(){
  25.    let satte=reactive({
  26.        arr:[
  27.          {name:"司藤",id:'0011'},
  28.          {name:"皮囊之下",id:'0011'},
  29.          {name:"百歲之約",id:'0012'},
  30.          {name:"三生三世",id:'0013'},
  31.        ]
  32.     })
  33.     // 刪除被點選的元素
  34.     function del(index){
  35.       for(let i=0;i<satte.arr.length;i++){
  36.         if(index==i){
  37.           satte.arr.splice(i,1)
  38.         }
  39.       }
  40.     }
  41.     // 將資料satte 和方法 del 暴露出去
  42.     return { satte,del }
  43. }
  44. </script>

5. 實現新增功能，事件之間傳遞引數

  1. <template>
  2.  <div>
  3.    <div>
  4.       <input type="text" v-model="addobj.watchTv.name">
  5.       <button @click="addHander">新增</button>
  6.    </div>
  8.    <ul>
  9.      <li v-for="(item,index) in satte.arr" :key="index" @click="del(index)">
  10.        {{item.name  }}
  11.      </li>
  12.    </ul>
  14.  </div>
  15. </template>
  16. <script>
  17. import {reactive} from 'vue'
  18. export default {
  19.   name: 'App',
  20.   setup(){
  21.     // onlyDelLuoJi() 方法中含有一個數組 和一個方法；類似於解構
  22.     let {satte,del }=onlyDelLuoJi();
  24.     // 傳遞引數satte 是onlyDelLuoJi函式中提供的satte。進行傳遞
  25.     let {  addobj,addHander  }=OnlyaddHander(satte);
  27.     // 暴露給外界使用
  28.     return { satte,del,addobj, addHander}
  29.   },
  30. }
  32. //新增功能模組
  33. function OnlyaddHander(satte){
  34.   console.log('初始化新增',satte)
  35.     let addobj=reactive({
  36.         watchTv:{
  37.           name:"",
  38.           id:""
  39.         }
  40.      });
  42.     function addHander(){
  43.       // 重置清空 錯吳做法
  44.         // satte.arr.push(addobj.watchTv)
  45.         // addobj.watchTv.name = "";
  46.         // addobj.watchTv.id = "";
  48.           // 正確做法
  49.         let oldobj = Object.assign({}, addobj.watchTv)
  50.         satte.arr.push(oldobj)
  51.     }
  52.     return { addobj,addHander }
  53. }
  55. //刪除功能模組
  56. function onlyDelLuoJi(){
  57.   console.log('刪除初始化')
  58.    let satte=reactive({
  59.        arr:[
  60.          {name:"司藤",id:'0011'},
  61.          {name:"皮囊之下",id:'0011'},
  62.          {name:"百歲之約",id:'0012'},
  63.          {name:"三生三世",id:'0013'},
  64.        ]
  65.     })
  66.     // 刪除被點選的元素
  67.     function del(index){
  68.       for(let i=0;i<satte.arr.length;i++){
  69.         if(index==i){
  70.           satte.arr.splice(i,1)
  71.         }
  72.       }
  73.     }
  74.     // 將資料satte 和方法 del 暴露出去
  75.     return { satte,del }
  76. }
  77. </script>

6 將他們抽離成單獨的檔案

  1. 我們想在想將新增刪除相關的邏輯，單獨抽離成一個檔案。
  2. add.js 是新增相關的邏輯
  3. del.js 是刪除的相關邏輯
add.js

  2. import { reactive } from "vue"
  3. function OnlyaddHander(satte){
  4.   console.log('初始化新增',satte)
  5.     let addobj=reactive({
  6.         watchTv:{
  7.           name:"",
  8.           id:""
  9.         }
  10.      });
  11.     function addHander(e){
  12.         // 重置清空 錯吳做法
  13.         // satte.arr.push(addobj.watchTv)
  14.         // addobj.watchTv.name = "";
  15.         // addobj.watchTv.id = "";
  16.         // 正確做法
  17.         let oldobj = Object.assign({}, addobj.watchTv)
  18.         satte.arr.push(oldobj)
  19.         e.preventDefault();
  20.     }
  21.     return { addobj,addHander }
  22. }
  23. export default  OnlyaddHander
adel.js

  2. import {reactive } from "vue"
  3. function onlyDelLuoJi() {
  4.   console.log('刪除初始化')
  5.    let satte=reactive({
  6.        arr:[
  7.          {name:"司藤",id:'0011'},
  8.          {name:"皮囊之下",id:'0011'},
  9.          {name:"百歲之約",id:'0012'},
  10.          {name:"三生三世",id:'0013'},
  11.        ]
  12.     })
  13.     // 刪除被點選的元素
  14.     function del(index){
  15.       for(let i=0;i<satte.arr.length;i++){
  16.         if(index==i){
  17.           satte.arr.splice(i,1)
  18.         }
  19.       }
  20.     }
  21.     // 將資料satte 和方法 del 暴露出去
  22.     return { satte,del }
  23. }
  24. export default  onlyDelLuoJi
主檔案
  1. <template>
  2.  <div>
  3.    <div>
  4.       <input type="text" v-model="addobj.watchTv.name">
  5.       <button @click="addHander">新增</button>
  6.    </div>
  8.    <ul>
  9.      <li v-for="(item,index) in satte.arr" :key="index" @click="del(index)">
  10.        {{item.name  }}
  11.      </li>
  12.    </ul>
  14.  </div>
  15. </template>
  16. <script>
  17. import onlyDelLuoJi from "./components/del"
  18. import OnlyaddHander from "./components/add"
  19. export default {
  20.   name: 'App',
  21.   setup(){
  22.     // onlyDelLuoJi() 方法中含有一個數組 和一個方法；類似於解構
  23.     let {satte,del }=onlyDelLuoJi();
  25.     // 傳遞引數
  26.     let {  addobj,addHander  }=OnlyaddHander(satte);
  28.     // 暴露給外界使用
  29.     return { satte,del,addobj, addHander}
  30.   },
  31. }
  32. </script>
  1. 如果你覺得不錯請點一個推薦。
  2. 你的推薦是我寫下去的動力。非常感謝！