这篇文章主要介绍“如何在vue3中使用setup、 ref、reactive”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“如何在vue3中使用setup、 ref、reactive”文章能帮助大家解决问题。
创新互联成立与2013年,先为龙湾等服务建站,龙湾等地企业,进行企业商务咨询服务。为龙湾企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
简单介绍下面的代码功能:
使用ref函数,去使用监听某一个变量的变化,并且把它渲染到视图上。
setUp函数是组合API的入口函数。这个是非常重要的。
setUp可以去监听变量的变化哈!我们将会利用它
ref 在vue中内置,需要导入。
{{ countNum}}
ref函数只能够去监听简单类型的数据变化。
不能够去监听,复杂类型的变化(数组、对象)。
所以我们的主角reactive就出现了。
setup 中的函数会自动执行一次。
- {{item.name }}
实现视图的删除
- {{item.name }}
形成一个单独的模块
- {{item.name }}
事件之间传递参数
- {{item.name }}
我们想在想将添加删除相关的逻辑,单独抽离成一个文件。
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主文件
- {{item.name }}
关于“如何在vue3中使用setup、 ref、reactive”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。
文章名称:如何在vue3中使用setup、ref、reactive
标题网址:http://njwzjz.com/article/jpocjs.html