您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“怎么在vue3中使用setup、 ref和reactive”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“怎么在vue3中使用setup、 ref和reactive”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識吧。
簡單介紹下面的代碼功能:
使用ref函數(shù),去使用監(jiān)聽某一個變量的變化,并且把它渲染到視圖上。
setUp函數(shù)是組合API的入口函數(shù)。這個是非常重要的。
setUp可以去監(jiān)聽變量的變化哈!我們將會利用它
ref 在vue中內(nèi)置,需要導(dǎo)入。
<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>
ref函數(shù)只能夠去監(jiān)聽簡單類型的數(shù)據(jù)變化。
不能夠去監(jiān)聽,復(fù)雜類型的變化(數(shù)組、對象)。
所以我們的主角reactive就出現(xiàn)了。
setup 中的函數(shù)會自動執(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函數(shù)的注意點: // ref函數(shù)只能夠去監(jiān)聽簡單類型的數(shù)據(jù)變化,不能夠去監(jiān)聽,復(fù)雜類型的變化(數(shù)組、對象) // reactive 方法里面是一個對象 let satte=reactive({ arr:[ {name:"司藤",id:'0011'}, {name:"皮囊之下",id:'0011'}, {name:"百歲之約",id:'0012'}, {name:"三生三世",id:'0013'}, ] }) return { satte } }, } </script>
實現(xiàn)視圖的刪除
<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>
形成一個單獨的模塊
<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() 方法中含有一個數(shù)組 和一個方法;類似于解構(gòu) 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) } } } // 將數(shù)據(jù)satte 和方法 del 暴露出去 return { satte,del } } </script>
事件之間傳遞參數(shù)
<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() 方法中含有一個數(shù)組 和一個方法;類似于解構(gòu) let {satte,del }=onlyDelLuoJi(); // 傳遞參數(shù)satte 是onlyDelLuoJi函數(shù)中提供的satte。進(jìn)行傳遞 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) } } } // 將數(shù)據(jù)satte 和方法 del 暴露出去 return { satte,del } } </script>
我們想在想將添加刪除相關(guān)的邏輯,單獨抽離成一個文件。
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){ // 重置清空 錯吳做法 // 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) } } } // 將數(shù)據(jù)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() 方法中含有一個數(shù)組 和一個方法;類似于解構(gòu) let {satte,del }=onlyDelLuoJi(); // 傳遞參數(shù) let { addobj,addHander }=OnlyaddHander(satte); // 暴露給外界使用 return { satte,del,addobj, addHander} }, } </script>
讀到這里,這篇“怎么在vue3中使用setup、 ref和reactive”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會,如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。