1.初识setup的使用简单介绍下面的代码功能：
使用ref函数，去使用监听某一个变量的变化，并且把它渲染到视图上。
setup函数是组合api的入口函数。这个是非常重要的。
setup可以去监听变量的变化哈！我们将会利用它
ref 在vue中内置，需要导入。
<template> <div>{{ countnum}}</div> <button @click="handerfunc">按钮</button></template><script>import {ref} from 'vue'export default {  name: 'app',  setup() {    // 这一句表示的是定义了一个变量count。这个变量的初始值是100    let countnum=ref(100);    // 在组合api中，如果想定义一个方法，不用定义到methods中去。直接定义就可以了    function handerfunc(){      // console.log(countnum);//countnum是一个对象      countnum.value += 10;    }    //在组合api中定义的方法，或者变量。如果外界需要使用，那么必须通过 return  {aaa,func} 的方式暴露出去    return { countnum ,handerfunc}  }}</script>
2认识reactive的使用ref函数只能够去监听简单类型的数据变化。
不能够去监听，复杂类型的变化(数组、对象)。
所以我们的主角reactive就出现了。
setup 中的函数会自动执行一次。
<template> <div>   <ul>     <li v-for="item in satte.arr" :key="item.id">       {{item.name  }}     </li>   </ul> </div></template><script>import {reactive} from 'vue'export default {  name: 'app',  setup(){    console.log(setup会自动执行的)    // ref函数的注意点：    // ref函数只能够去监听简单类型的数据变化，不能够去监听，复杂类型的变化(数组、对象)    // reactive  方法里面是一个对象    let satte=reactive({       arr:[         {name:司藤,id:'0011'},         {name:皮囊之下,id:'0011'},         {name:百岁之约,id:'0012'},         {name:三生三世,id:'0013'},       ]    })    return { satte }  },}</script>
3使用reactive实现视图的删除
<template> <div>   <ul>     <li v-for="(item,index) in satte.arr" :key="index" @click="del(index)">       {{item.name  }}     </li>   </ul> </div></template><script>import {reactive} from 'vue'export default {  name: 'app',  setup(){    let satte=reactive({       arr:[         {name:司藤,id:'0011'},         {name:皮囊之下,id:'0011'},         {name:百岁之约,id:'0012'},         {name:三生三世,id:'0013'},       ]    })    // 删除被点击的元素    function del(index){      for(let i=0;i 4将删除的逻辑分离出去形成一个单独的模块
<template> <div>   <ul>     <li v-for="(item,index) in satte.arr" :key="index" @click="del(index)">       {{item.name  }}     </li>   </ul> </div></template><script>import {reactive} from 'vue'export default {  name: 'app',  setup(){    // onlydelluoji() 方法中含有一个数组 和一个方法；类似于解构    let {satte,del }=onlydelluoji();        // 暴露给外界使用    return { satte,del}  },}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 5. 实现添加功能事件之间传递参数
<template> <div>   <div>      <input type="text" v-model="addobj.watchtv.name">      <button @click="addhander">添加</button>   </div>      <ul>     <li v-for="(item,index) in satte.arr" :key="index" @click="del(index)">       {{item.name  }}     </li>   </ul> </div></template><script>import {reactive} from 'vue'export default {  name: 'app',  setup(){    // onlydelluoji() 方法中含有一个数组 和一个方法；类似于解构    let {satte,del }=onlydelluoji();        // 传递参数satte 是onlydelluoji函数中提供的satte。进行传递    let {  addobj,addhander  }=onlyaddhander(satte);    // 暴露给外界使用    return { satte,del,addobj, addhander}  },}//添加功能模块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 6 将他们抽离成单独的文件我们想在想将添加删除相关的逻辑，单独抽离成一个文件。
add.js 是添加相关的逻辑
del.js 是删除的相关逻辑
import { reactive } from vuefunction 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 vuefunction 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 主文件
<template> <div>   <div>      <input type="text" v-model="addobj.watchtv.name">      <button @click="addhander">添加</button>   </div>      <ul>     <li v-for="(item,index) in satte.arr" :key="index" @click="del(index)">       {{item.name  }}     </li>   </ul> </div></template><script>import onlydelluoji from ./components/delimport onlyaddhander from ./components/addexport default {  name: 'app',  setup(){    // onlydelluoji() 方法中含有一个数组 和一个方法；类似于解构    let {satte,del }=onlydelluoji();        // 传递参数    let {  addobj,addhander  }=onlyaddhander(satte);    // 暴露给外界使用    return { satte,del,addobj, addhander}  },}</script>
以上就是vue3中如何使用setup、 ref和reactive的详细内容。