vue3中如何使用setup、ref和reactive

vue3中如何使用setup、ref和reactive

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

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

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

[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。

[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[