簡單介紹下面的代碼功能：使用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ù)的注意點(diǎn)： // 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>3使用reactive

實(shí)現(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’}, ] }) // 刪除被點(diǎn)擊的元素 function del(index){ for(let i=0;i<satte.arr.length;i++){if(index==i){ satte.arr.splice(i,1)} } } return { satte, del} },}</script>

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

<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’}, ] }) // 刪除被點(diǎn)擊的元素 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>5. 實(shí)現(xiàn)添加功能

事件之間傳遞參數(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’}, ] }) // 刪除被點(diǎn)擊的元素 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>6 將他們抽離成單獨(dú)的文件

我們想在想將添加刪除相關(guān)的邏輯，單獨(dú)抽離成一個文件。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’}, ] }) // 刪除被點(diǎn)擊的元素 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組合API中setup、 ref、reactive的用法的詳細(xì)內(nèi)容，更多關(guān)于vue組合API的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！