广告：宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取~~~

简单介绍下面的代码功能：使用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>

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>

实现视图的删除

<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<satte.arr.length;i++){        if(index==i){          satte.arr.splice(i,1)        }      }    }    return { satte, del}  },}</script>

形成一个单独的模块

<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<satte.arr.length;i++){        if(index==i){          satte.arr.splice(i,1)        }      }    }    // 将数据satte 和方法 del 暴露出去    return { satte,del }}</script>

事件之间传递参数

<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<satte.arr.length;i++){        if(index==i){          satte.arr.splice(i,1)        }      }    }    // 将数据satte 和方法 del 暴露出去    return { satte,del }}</script>

我们想在想将添加删除相关的逻辑，单独抽离成一个文件。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<satte.arr.length;i++){        if(index==i){          satte.arr.splice(i,1)        }      }    }    // 将数据satte 和方法 del 暴露出去    return { satte,del }}export default  onlyDelLuoJi

主文件

<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/del"import OnlyaddHander from "./components/add"export default {  name: 'App',  setup(){    // onlyDelLuoJi() 方法中含有一个数组 和一个方法；类似于解构    let {satte,del }=onlyDelLuoJi();        // 传递参数    let {  addobj,addHander  }=OnlyaddHander(satte);    // 暴露给外界使用    return { satte,del,addobj, addHander}  },}</script>

以上就是如何在vue3中使用setup、 ref、reactive的详细内容，更多请关注9543建站博客其它相关文章！