1.初識setUp的使用
簡單介紹下面的程式碼功能:
使用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>
2認識reactive的使用
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>
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() 方法中含有一個陣列 和一個方法;類似於解構
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 是刪除的相關邏輯
add.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>
如果你覺得不錯請點一個推薦。
你的推薦是我寫下去的動力。非常感謝!