So verwenden Sie setup, ref, reactive in vue3

1. Erste Einführung in die Verwendung von setUp

Eine kurze Einführung in die folgenden Codefunktionen:
Verwenden Sie die Ref-Funktion, um Änderungen in einer bestimmten Variablen zu überwachen und sie in der Ansicht darzustellen.
Die SetUp-Funktion ist die Eingabefunktion der Kombinations-API. Das ist sehr wichtig.
setUp kann Änderungen in Variablen überwachen! Wir werden es nutzen.
ref ist in Vue integriert und muss importiert werden.

<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 Verstehen Sie die Verwendung von reaktiv

Die Ref-Funktion kann nur einfache Arten von Datenänderungen überwachen.
Änderungen in komplexen Typen (Arrays, Objekte) können nicht überwacht werden.
So erscheint unser Protagonist reaktiv.
Die Funktionen im Setup werden einmalig automatisch ausgeführt.

<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 Verwenden Sie reaktiv

, um das Löschen der Ansicht zu realisieren.

<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 Trennen Sie die Löschlogik, um ein separates Modul zu bilden Sie werden in eine separate Datei extrahiert

Wir möchten die Logik für das Hinzufügen und Löschen in eine separate Datei trennen.

add.js ist die Logik zum Hinzufügen.

del.js ist die Logik zum Löschen.

<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>

adel.js

<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>

Hauptdatei

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

Das obige ist der detaillierte Inhalt vonSo verwenden Sie setup, ref, reactive in vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!