vue 3 에서 setup 과 reactive 함수 의 용법 을 자세히 설명 합 니 다.

1 setUp 의 실행 시기
지금 vue 3 는 methods 를 정상적으로 사용 할 수 있다 는 것 을 잘 알 고 있 습 니 다.
그러나 우 리 는 setUp 에서 methods 의 방법 을 호출 할 수 없다.
왜?
우 리 는 먼저 아래 의 이 두 생명 주기 함 수 를 알 아 보 자.각각:
beforeCreate 는 data 의 데이터 가 초기 화 되 지 않 았 음 을 나타 내 며 사용 할 수 없습니다.
Created:data 가 초기 화 되 었 습 니 다.사용 할 수 있 습 니 다.
setUp 은 beforeCreate 와 Created 두 함수 사이 에 있 습 니 다.
왜 setup 에서 methods 의 방법 을 호출 하면 안 되 는 지 알 겠 지?
2.setUp 에서 data 의 데이터 와 methods 를 호출 하 는 방법 을 사용 할 수 없습니다.

<script>
export default {
  name: 'App',
  data:function(){
    return {
      mess:"  data"
    }
  },
  methods:{
    func(){
      console.log("methods  func")
    },
  },
  setup(){
    console.log('this',this);//undefined
    this.func();//      
  },
}
</script>

3.setup 함수 의 주의 점
(1)setUp 함수 에서 data 와 methods 를 사용 할 수 없 기 때 문 입 니 다.
그래서 vue 는 우리 의 오 류 를 피하 기 위해 setUp 함수 중의 this 를 직접
수정 이 undefined 가 되 었 습 니 다.
(2)setUp 함 수 는 동기 화 할 수 있 을 뿐 비동기 가 될 수 없습니다.
그 러 니까 이렇게 하면 안 된다 는 거 야.
async setup(){
  
},
이렇게 하면 화면 공백 이 생 길 수 있어 요.
4 Vue 3 의 reactive
Vue 2 에서 응답 식 데 이 터 는 de fineperty 를 통 해 이 루어 집 니 다.
Vue 3 에서 응답 식 데 이 터 는 ES6 의 Proxy 를 통 해 이 루어 집 니 다.
reactive 에 필요 한 주의 점
reactive 매개 변 수 는 대상 이 어야 합 니 다(json/arr)
하면,만약,만약...
기본 상황 에서 대상 을 수정 하면 인터페이스 가 자동 으로 업데이트 되 지 않 습 니 다.
업데이트 하려 면 다시 할당 하 는 방식 으로
5 reactive 문자열 데이터 가 새 것 과 같 지 않 습 니 다.

<template>
 <div>
    <div>
      <li>{{str}}</li>
      <button @click="func1">  </button>
    </div>
 </div>
</template>
<script>
import {reactive} from 'vue'
export default {
  name: 'App',
   setup(){
    //  reactive                proxy  
    //         ，         ，          。
    let str=reactive(123)
    function func1(){
      console.log(str);//123
      str=666;
    }
    return {str,func1 }
  },
}
</script>

우 리 는 단 추 를 눌 렀 을 때 보기 가 업데이트 되 지 않 은 것 을 발견 했다.
우 리 는 대상 이 아니 기 때 문 입 니 다.새로운 보 기 를 원한 다 면.
ref 함 수 를 사용 해 야 합 니 다.

6 reactive 전송 배열

<template>
 <div>
    <div>
      <li>{{arr}}</li>
      <button @click="func1">  </button>
    </div>
 </div>
</template>
<script>
import {reactive} from 'vue'
export default {
  name: 'App',
   setup(){
    let arr=reactive([{name:'  ',age:19},{name:'  ',age:39}])
    function func1(){
      arr[0].name="       "
    }
    return {arr,func1 }
  },
}
</script>

7 reactive 가 다른 대상 에 게 전달 되 는 새로운 방식

<template>
 <div>
    <div>
      <li>{{sate.time}}</li>
      <button @click="func1">  </button>
    </div>
 </div>
</template>
<script>
import {reactive} from 'vue'
export default {
  name: 'App',
   setup(){
    let  sate=reactive({
      time:new Date()
    })
    function func1(){
      //        ，    
      sate.time="2021 -6 -9 ";
    }
    return {sate,func1 }
  },
}
</script>

이상 은 vue 3 setup 과 reactive 함수 에 대한 상세 한 설명 입 니 다.vue 3 setup 과 reactive 함수 에 관 한 자 료 는 다른 관련 글 을 주목 하 세 요!