vue 3 조합 API 에서 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>

이상 은 vue 3 조합 API 에서 setup,ref,reactive 의 용법 에 대한 상세 한 내용 입 니 다.vue 조합 API 에 관 한 자 료 는 다른 관련 글 을 주목 하 십시오!