这篇文章主要讲解了“vue3中如何使用setup、 ref和reactive”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue3中如何使用setup、 ref和reactive”吧!
简单介绍下面的代码功能:
使用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”的内容了,经过本文的学习后,相信大家对vue3中如何使用setup、 ref和reactive这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。