怎么在vue3中使用setup、ref和reactive

本文小編為大家詳細介紹“怎么在vue3中使用setup、 ref和reactive”，內容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“怎么在vue3中使用setup、 ref和reactive”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

站在用戶的角度思考問題，與客戶深入溝通，找到宣城網站設計與宣城網站推廣的解決方案，憑借多年的經驗，讓設計與互聯網技術結合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：做網站、網站建設、企業(yè)官網、英文網站、手機端網站、網站推廣、申請域名、網站空間、企業(yè)郵箱。業(yè)務覆蓋宣城地區(qū)。

1.初識setUp的使用

簡單介紹下面的代碼功能：
使用ref函數，去使用監(jiān)聽某一個變量的變化，并且把它渲染到視圖上。
setUp函數是組合API的入口函數。這個是非常重要的。
setUp可以去監(jiān)聽變量的變化哈！我們將會利用它
ref 在vue中內置，需要導入。

<template>
 <div>{{ countNum}}</div>
 <button @click="handerFunc">按鈕</button>
</template>
<script>
import {ref} from 'vue'
export default {
  name: 'App',
  setup() {
    // 這一句表示的是定義了一個變量count。這個變量的初始值是100
    let countNum=ref(100);

    // 在組合API中，如果想定義一個方法，不用定義到methods中去。直接定義就可以了
    function handerFunc(){
      // console.log(countNum);//countNum是一個對象
      countNum.value += 10;
    }
    //在組合api中定義的方法，或者變量。如果外界需要使用，那么必須通過 return  {aaa,func} 的方式暴露出去
    return { countNum ,handerFunc}
  }
}
</script>

2認識reactive的使用

ref函數只能夠去監(jiān)聽簡單類型的數據變化。
不能夠去監(jiān)聽，復雜類型的變化(數組、對象)。
所以我們的主角reactive就出現了。
setup 中的函數會自動執(zhí)行一次。

<template>
 <div>
   <ul>
     <li v-for="item in satte.arr" :key="item.id">
       {{item.name  }}
     </li>
   </ul>

 </div>
</template>
<script>
import {reactive} from 'vue'
export default {
  name: 'App',
  setup(){
    console.log("setUp會自動執(zhí)行的")
    // ref函數的注意點：
    // ref函數只能夠去監(jiān)聽簡單類型的數據變化，不能夠去監(jiān)聽，復雜類型的變化(數組、對象)
    // reactive  方法里面是一個對象
    let satte=reactive({
       arr:[
         {name:"司藤",id:'0011'},
         {name:"皮囊之下",id:'0011'},
         {name:"百歲之約",id:'0012'},
         {name:"三生三世",id:'0013'},
       ]
    })
    return { satte }
  },
}
</script>

3使用reactive

實現視圖的刪除

<template>
 <div>
   <ul>
     <li v-for="(item,index) in satte.arr" :key="index" @click="del(index)">
       {{item.name  }}
     </li>
   </ul>

 </div>
</template>
<script>
import {reactive} from 'vue'
export default {
  name: 'App',
  setup(){
    let satte=reactive({
       arr:[
         {name:"司藤",id:'0011'},
         {name:"皮囊之下",id:'0011'},
         {name:"百歲之約",id:'0012'},
         {name:"三生三世",id:'0013'},
       ]
    })
    // 刪除被點擊的元素
    function del(index){
      for(let i=0;i<satte.arr.length;i++){
        if(index==i){
          satte.arr.splice(i,1)
        }
      }
    }
    return { satte, del}
  },
}
</script>

4將刪除的邏輯分離出去

形成一個單獨的模塊

<template>
 <div>
   <ul>
     <li v-for="(item,index) in satte.arr" :key="index" @click="del(index)">
       {{item.name  }}
     </li>
   </ul>

 </div>
</template>
<script>
import {reactive} from 'vue'
export default {
  name: 'App',
  setup(){
    // onlyDelLuoJi() 方法中含有一個數組 和一個方法；類似于解構
    let {satte,del }=onlyDelLuoJi();
    
    // 暴露給外界使用
    return { satte,del}
  },
}

function onlyDelLuoJi(){
   let satte=reactive({
       arr:[
         {name:"司藤",id:'0011'},
         {name:"皮囊之下",id:'0011'},
         {name:"百歲之約",id:'0012'},
         {name:"三生三世",id:'0013'},
       ]
    })
    // 刪除被點擊的元素
    function del(index){
      for(let i=0;i<satte.arr.length;i++){
        if(index==i){
          satte.arr.splice(i,1)
        }
      }
    }
    // 將數據satte 和方法 del 暴露出去
    return { satte,del }
}
</script>

5. 實現添加功能

事件之間傳遞參數

<template>
 <div>
   <div>
      <input type="text" v-model="addobj.watchTv.name">
      <button @click="addHander">添加</button>
   </div>
   
   <ul>
     <li v-for="(item,index) in satte.arr" :key="index" @click="del(index)">
       {{item.name  }}
     </li>
   </ul>

 </div>
</template>
<script>
import {reactive} from 'vue'
export default {
  name: 'App',
  setup(){
    // onlyDelLuoJi() 方法中含有一個數組 和一個方法；類似于解構
    let {satte,del }=onlyDelLuoJi();
    
    // 傳遞參數satte 是onlyDelLuoJi函數中提供的satte。進行傳遞
    let {  addobj,addHander  }=OnlyaddHander(satte);

    // 暴露給外界使用
    return { satte,del,addobj, addHander}
  },
}

//添加功能模塊
function OnlyaddHander(satte){
  console.log('初始化添加',satte)
    let addobj=reactive({
        watchTv:{
          name:"",
          id:""
        }
     });

    function addHander(){
      // 重置清空 錯吳做法
        // satte.arr.push(addobj.watchTv)
        // addobj.watchTv.name = ""; 
        // addobj.watchTv.id = "";
        

          // 正確做法
        let oldobj = Object.assign({}, addobj.watchTv)
        satte.arr.push(oldobj)
    }
    return { addobj,addHander }
}

//刪除功能模塊
function onlyDelLuoJi(){
  console.log('刪除初始化')
   let satte=reactive({
       arr:[
         {name:"司藤",id:'0011'},
         {name:"皮囊之下",id:'0011'},
         {name:"百歲之約",id:'0012'},
         {name:"三生三世",id:'0013'},
       ]
    })
    // 刪除被點擊的元素
    function del(index){
      for(let i=0;i<satte.arr.length;i++){
        if(index==i){
          satte.arr.splice(i,1)
        }
      }
    }
    // 將數據satte 和方法 del 暴露出去
    return { satte,del }
}
</script>

6 將他們抽離成單獨的文件

我們想在想將添加刪除相關的邏輯，單獨抽離成一個文件。
add.js 是添加相關的邏輯
del.js 是刪除的相關邏輯

import { reactive } from "vue"
function OnlyaddHander(satte){
  console.log('初始化添加',satte)
    let addobj=reactive({
        watchTv:{
          name:"",
          id:""
        }
     });
    function addHander(e){
        // 重置清空 錯吳做法
        // satte.arr.push(addobj.watchTv)
        // addobj.watchTv.name = ""; 
        // addobj.watchTv.id = "";
        // 正確做法
        let oldobj = Object.assign({}, addobj.watchTv)
        satte.arr.push(oldobj)
        e.preventDefault();
    }
    return { addobj,addHander }
}
export default  OnlyaddHander

adel.js

import {reactive } from "vue"
function onlyDelLuoJi() {
  console.log('刪除初始化')
   let satte=reactive({
       arr:[
         {name:"司藤",id:'0011'},
         {name:"皮囊之下",id:'0011'},
         {name:"百歲之約",id:'0012'},
         {name:"三生三世",id:'0013'},
       ]
    })
    // 刪除被點擊的元素
    function del(index){
      for(let i=0;i<satte.arr.length;i++){
        if(index==i){
          satte.arr.splice(i,1)
        }
      }
    }
    // 將數據satte 和方法 del 暴露出去
    return { satte,del }
}
export default  onlyDelLuoJi

主文件

<template>
 <div>
   <div>
      <input type="text" v-model="addobj.watchTv.name">
      <button @click="addHander">添加</button>
   </div>
   
   <ul>
     <li v-for="(item,index) in satte.arr" :key="index" @click="del(index)">
       {{item.name  }}
     </li>
   </ul>

 </div>
</template>
<script>
import onlyDelLuoJi from "./components/del"
import OnlyaddHander from "./components/add"
export default {
  name: 'App',
  setup(){
    // onlyDelLuoJi() 方法中含有一個數組 和一個方法；類似于解構
    let {satte,del }=onlyDelLuoJi();
    
    // 傳遞參數
    let {  addobj,addHander  }=OnlyaddHander(satte);

    // 暴露給外界使用
    return { satte,del,addobj, addHander}
  },
}
</script>

讀到這里，這篇“怎么在vue3中使用setup、 ref和reactive”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注創(chuàng)新互聯行業(yè)資訊頻道。

網站題目：怎么在vue3中使用setup、ref和reactive
分享鏈接：http://www.rwnh.cn/article42/gpopec.html

成都網站建設公司_創(chuàng)新互聯，為您提供App開發(fā)、、網頁設計公司、ChatGPT、網站維護、網站設計公司

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯

猜你還喜歡下面的內容