文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

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组合API中setup、 ref、reactive的用法的详细内容,更多关于vue组合API的资料请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯