vue3組合API中setup、 ref、reactive的使用大全
更新時間：2021年06月09日 14:43:32 作者：明月人倚樓
本文給大家介紹vue3組合API中setup、 ref、reactive的用法，初步了解reactive的使用及具體用法，通過示例代碼給大家介紹的非常詳細，需要的朋友參考下吧
1.初識setUp的使用
簡單介紹下面的代碼功能：
使用ref函數(shù)，去使用監(jiān)聽某一個變量的變化，并且把它渲染到視圖上。
setUp函數(shù)是組合API的入口函數(shù)。這個是非常重要的。
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函數(shù)只能夠去監(jiān)聽簡單類型的數(shù)據(jù)變化。
不能夠去監(jiān)聽，復雜類型的變化(數(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)聽，復雜類型的變化(數(shù)組、對象)
// reactive 方法里面是一個對象
let satte=reactive({
arr:[
{name:"司藤",id:'0011'},
{name:"皮囊之下",id:'0011'},
{name:"百歲之約",id:'0012'},
{name:"三生三世",id:'0013'},
]
})
return { satte }
},
}
</script>
3使用reactive
實現(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>
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() 方法中含有一個數(shù)組 和一個方法；類似于解構
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>
5. 實現(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ù)組 和一個方法；類似于解構
let {satte,del }=onlyDelLuoJi();
// 傳遞參數(shù)satte 是onlyDelLuoJi函數(shù)中提供的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)
}
}
}
// 將數(shù)據(jù)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)
}
}
}
// 將數(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ù)組 和一個方法；類似于解構
let {satte,del }=onlyDelLuoJi();
// 傳遞參數(shù)
let { addobj,addHander }=OnlyaddHander(satte);
// 暴露給外界使用
return { satte,del,addobj, addHander}
},
}
</script>
以上就是vue3組合API中setup、 ref、reactive的用法的詳細內容，更多關于vue組合API的資料請關注腳本之家其它相關文章！
相關文章
一文搞懂vue中provide和inject實現(xiàn)原理對抗平庸
這篇文章主要為大家介紹了vue中provide和inject實現(xiàn)原理的深入理解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
這篇文章主要介紹了解決vue 退出動畫無效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue如何動態(tài)給data中添加變量問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
詳解解決使用axios發(fā)送json后臺接收不到的問題
這篇文章主要介紹了詳解解決使用axios發(fā)送json后臺接收不到的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
本篇文章主要介紹了解讀vue生成的文件目錄結構及說明，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
本篇文章主要介紹了詳解vue-cli中配置sass ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
在開發(fā)現(xiàn)代?Web?應用時,前端和后端通常分離部署在不同的服務器上,這就會引發(fā)跨域請求問題,所以本文將詳細介紹如何在?Vue?項目中使用?Axios?發(fā)起跨域請求時解決跨域問題的相關資料,需要的朋友可以參考下2024-09-09
今天看了vuejs的組件，看到了prop組件，主要作用是在傳入數(shù)據(jù)的時候對傳入的值做判斷，今天小編通過一個小例子給大家分享VueJs組件prop驗證簡單理解，感興趣的朋友一起看看吧2017-09-09
這篇文章主要介紹了Vue中關于computed計算屬性的妙用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-11-11
VueJs里利用CryptoJs實現(xiàn)加密及解密的方法示例
這篇文章主要介紹了VueJs里利用CryptoJs實現(xiàn)加密及解密的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04