vue3中如何使用setup、ref和reactive

这篇文章主要介绍"vue3中如何使用setup、ref和reactive"，在日常操作中，相信很多人在vue3中如何使用setup、ref和reactive问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"vue3中如何使用setup、ref和reactive"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

1.初识setUp的使用

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

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中如何使用setup、ref和reactive"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！