讲解vue3组合API中setup、 ref、reactive的用法

.初识setUp的使用
简单介绍下面的代码功能：
使用ref函数，去使用监听某一个变量的变化，并且把它渲染到视图上。
setUp函数是组合API的入口函数。这个是非常重要的。
setUp可以去监听变量的变化哈！我们将会利用它
ref 在vue中内置，需要导入。

{{ countNum}}

}
}

2认识reactive的使用
ref函数只能够去监听简单类型的数据变化。
不能够去监听，复杂类型的变化(数组、对象)。
所以我们的主角reactive就出现了。
setup 中的函数会自动执行一次。

• {{item.name }}

3使用reactive 实现视图的删除

4将删除的逻辑分离出去，形成一个单独的模块

},
}

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 }
}

5. 实现添加功能，事件之间传递参数

},
}

//添加功能模块
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 }
}

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
主文件

},
}

USB Microphone https://www.soft-voice.com/
Wooden Speakers https://www.zeshuiplatform.com/
亚马逊测评 www.yisuping.cn
深圳网站建设www.sz886.com