這篇文章主要介紹“如何在vue3中使用setup、 ref、reactive”的相關(guān)知識，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“如何在vue3中使用setup、 ref、reactive”文章能幫助大家解決問題。

創(chuàng)新互聯(lián)成立與2013年，先為龍灣等服務(wù)建站，龍灣等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為龍灣企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

1.初識setUp的使用

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

2認(rèn)識reactive的使用

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

3使用reactive

實(shí)現(xiàn)視圖的刪除

4將刪除的邏輯分離出去

形成一個(gè)單獨(dú)的模塊

5. 實(shí)現(xiàn)添加功能

事件之間傳遞參數(shù)

6 將他們抽離成單獨(dú)的文件

我們想在想將添加刪除相關(guān)的邏輯，單獨(dú)抽離成一個(gè)文件。
add.js 是添加相關(guān)的邏輯
del.js 是刪除的相關(guān)邏輯

import { reactive } from "vue"
function OnlyaddHander(satte){
  console.log('初始化添加',satte)
    let addobj=reactive({
        watchTv:{
          name:"",
          id:""
        }
     });
    function addHander(e){
        // 重置清空 錯(cuò)吳做法
        // 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'},
       ]
    })
    // 刪除被點(diǎn)擊的元素
    function del(index){
      for(let i=0;i
主文件

關(guān)于“如何在vue3中使用setup、 ref、reactive”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點(diǎn)。
            
            
                        

            網(wǎng)頁題目：如何在vue3中使用setup、ref、reactive            

            轉(zhuǎn)載注明：http://weahome.cn/article/jpocjs.html