vue3组合API中setup、 ref、reactive的使用大全

简单介绍下面的代码功能：使用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>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<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>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<satte.arr.length;i++){if(index==i){ satte.arr.splice(i,1)} } } // 将数据satte 和方法 del 暴露出去 return { satte,del }}</script>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<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组合API中setup、 ref、reactive的用法的详细内容，更多关于vue组合API的资料请关注好吧啦网其它相关文章！