怎么在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(&＃39;初始化添加&＃39;,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(&＃39;删除初始化&＃39;)
   let satte=reactive({
       arr:[
         {name:"司藤",id:&＃39;0011&＃39;},
         {name:"皮囊之下",id:&＃39;0011&＃39;},
         {name:"百岁之约",id:&＃39;0012&＃39;},
         {name:"三生三世",id:&＃39;0013&＃39;},
       ]
    })
    // 删除被点击的元素
    function del(index){
      for(let i=0;i
主文件

上述内容就是怎么在vue3中使用setup、 ref、reactive，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注编程笔记行业资讯频道。