簡單介紹下面的程式碼功能:
使用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>
實作視圖的刪除
<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>
事件之間傳遞參數
<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>
我們想要在想將新增刪除相關的邏輯,單獨抽離成一個文件。
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中使用setup、 ref、reactive的詳細內容。更多資訊請關注PHP中文網其他相關文章!