vue3组合api中setup、,ref、reactive的使用大全-mile米乐体育
1.初识setup的使用
简单介绍下面的代码功能：
使用ref函数，去使用监听某一个变量的变化，并且把它渲染到视图上。
setup函数是组合api的入口函数。这个是非常重要的。
setup可以去监听变量的变化哈！我们将会利用它
ref 在vue中内置，需要导入。
{{ countnum}}
2认识reactive的使用
ref函数只能够去监听简单类型的数据变化。
不能够去监听，复杂类型的变化(数组、对象)。
所以我们的主角reactive就出现了。
setup 中的函数会自动执行一次。
3使用reactive
实现视图的删除
4将删除的逻辑分离出去
形成一个单独的模块
5. 实现添加功能
事件之间传递参数
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
主文件
以上就是vue3组合api中setup、 ref、reactive的用法的详细内容，更多关于vue组合api的资料请关注趣讯吧其它相关文章！