簡單介紹下面的代碼功能：使用ref函數，去使用監聽某一個變量的變化，并且把它渲染到視圖上。setUp函數是組合API的入口函數。這個是非常重要的。setUp可以去監聽變量的變化哈！我們將會利用它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>

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

<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會自動執行的') // ref函數的注意點： // ref函數只能夠去監聽簡單類型的數據變化，不能夠去監聽，復雜類型的變化(數組、對象) // 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>

形成一個單獨的模塊

<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組合API中setup、 ref、reactive的用法的詳細內容，更多關于vue組合API的資料請關注好吧啦網其它相關文章！