Vue 3.0 에서 Ref 와 Reactive 의 차이 점 에 대한 상세 한 분석

Ref 와 Reactive
Ref
Ref 는 기본 형식의 응답 식 데 이 터 를 만 드 는 데 사 용 됩 니 다.템 플 릿 은 기본적으로 value 디 스 플레이 데 이 터 를 호출 합 니 다.방법 에서 수정 하려 면 value 의 값 을 수정 해 야 수정 할 수 있 습 니 다.

<!--     > 
<template>
   <div>{{state}}</div>
</template> 
//js   
setup(){
     let state = ref(10) 
     state.value = 11
     return {state}
}

Reactive
Reactive 는 인용 형식의 응답 식 데 이 터 를 만 드 는 데 사 용 됩 니 다.

<!--     > 
<template>
   <div>{{state.name}}</div>
</template> 
//js   
setup(){
     let state = reactive({name:'aaa'}}) 
     state.name = 'zhangsan'
     return {state}
}

Ref 와 Reactive 의 차이
Ref 의 본질은 Reactive 를 통 해 만들어 진 것 입 니 다.Ref(10)=>Reactive({value:10});
Ref 템 플 릿 호출 은 value 를 직접 생략 할 수 있 습 니 다.방법 에서 변수의 값 을 바 꾸 려 면 value 의 값 을 수정 해 야 수정 할 수 있 습 니 다.Reactive 는 템 플 릿 에 전 체 를 써 야 합 니 다.그렇지 않 으 면 전체 데 이 터 를 표시 합 니 다.
Reactive 의 본질은 모든 층 의 수 를 proxy 대상 으로 해석 하 는 것 입 니 다.Reactive 의 응답 식 은 기본적으로 재 귀적 입 니 다.특정한 층 의 값 을 바 꾸 면 재 귀적 으로 호출 되 고 dom 을 다시 렌 더 링 합 니 다.
shallow Ref 와 shallow Reactive
Ref 와 Reactive 가 만 든 것 은 모두 재 귀적 인 응답 입 니 다.각 층 의 json 데 이 터 를 proxy 대상 으로 분석 합 니 다.shallow Ref 와 shallow Reactive 가 만 든 비 재 귀적 인 응답 대상 입 니 다.shallow Reactive 가 만 든 데이터 1 층 데이터 변 화 는 dom 을 다시 렌 더 링 합 니 다.

 var state = shallowReactive({
    a:'a',
    gf:{
       b:'b',
       f:{
          c:'c',
          s:{d:'d'}
       }
    }
 })
 state.a = '1'
 //                 
 //state => Proxy {a:"a",gf:{...}}
//                              state.gf.b = 2

shallow Ref 를 통 해 만 든 응답 대상 은 전체 value 를 수정 해 야 dom 을 다시 렌 더 링 할 수 있 습 니 다.

var state = shallowRef({
   a:'a',
    gf:{
       b:'b',
       f:{
          c:'c',
          s:{d:'d'}
       }
    }
})
state.value.a = 1
/*
       ，shallowRef       shallowReactive({value:{}})   ，   value      
*/
state.value = {
    a:'1',
    gf:{
       b:'2',
       f:{
          c:'3',
          s:{d:'d'}
       }
    }
}

shallow Ref 를 사용 했다 면 한 층 의 데이터 만 업데이트 하려 면 triggerRef 를 사용 할 수 있 습 니 다.

var state = shallowRef({
   a:'a',
    gf:{
       b:'b',
       f:{
          c:'c',
          s:{d:'d'}
       }
    }
})
state.value.gf.f.s.d = 4
triggerRef(state)

페이지 가 다시 렌 더 링 됩 니 다.
toRaw---데이터 만 수정 하고 페이지 를 렌 더 링 하지 않 습 니 다.
응답 식 데이터 만 수정 하고 페이지 렌 더 링 을 일 으 키 지 않 으 려 면 toRaw 를 사용 하 십시오.

var obj = {name:'test'}
var state = reactive(obj)
var obj2 = toRaw(state)
obj2.name = 'zs'//          

----
//    ref         value 
var obj = {name:'test'}
var state = ref(obj)
var obj2 = toRaw(state.value)

markRaw---데이터 추적 하지 않 음
데이터 가 추적 되 지 않 으 려 면 응답 식 데이터 로 이 방법 을 호출 할 수 있 습 니 다.수정 데 이 터 를 추적 하여 페이지 를 다시 렌 더 링 할 수 없습니다.

var obj = {name:'test'}
obj = markRaw(obj)
var state = reactive(obj)
state.name = 'zs'//              

toRef---데이터 원본 과 관련 하여 UI 를 수정 하지 않 음
ref 에서 만 든 응답 변 수 를 사용 하면 원본 데이터 와 연결 되 지 않 습 니 다.원본 데이터 와 연결 하려 고 하지만 데이터 변경 이 UI 를 업데이트 하지 않 으 면 toRef 로 만 듭 니 다.

var obj = {name:'test'}
var state = ref(obj.name)
state.name = 'zs' //  obj name         ，UI     

///
var obj = {name:'test'}
var state = toRef(obj,'name') //         
state.name = 'zs'//  obj   name        ，  UI     

toRefs---여러 개의 toRef 속성 값 설정
toRef 속성 값 을 여러 개 설정 하려 면 toRefs 를 사용 할 수 있 습 니 다.

var obj = {name:'test',age:16}
var state = toRefs(obj)
state.name.value = 'zs'//obj name        ， UI    
state.age.value = 18//obj age        ， UI    

custom Ref---ref 사용자 정의
customeRef 이 방법 을 통 해 응답 식 ref 방법 을 사용자 정의 할 수 있 습 니 다.

function myRef(value){
   /*
    customRef        ，     2   ，get/set  ，                 get  ，              set   
    customRef   2   ，track/trigger，track        ，get        ，          。trigger           ，set           UI  
   */
    return customRef((track,trigger)=>{
       return {
          get(){
             track()//    
             return value     
          },
          set(newVal){
             value = newVal
             trigger()//  UI  
          }
       }
    })

}

setup(){
   var age = myRef(18)
   age.value = 20
}

ref 페이지 묶 기 탭
vue 2.0 은 this.refs 를 통 해 dom 요 소 를 얻 을 수 있 습 니 다.vue 3 는 이 조작 을 취 소 했 습 니 다.refs 가 dom 요 소 를 얻 지 못 했 습 니 다.vue 3 는 dom 요 소 를 얻 지 못 했 습 니 다.vue 3 는 이 조작 을 취 소 했 습 니 다.refs 라 는 속성 값 이 없 으 면 ref()방 법 으로 응답 식 변수 와 dom 요 소 를 묶 을 수 있 습 니 다.

<template>
   <div ref="box"></div>

</template>
import {ref,onMounted} from 'vue'
/*
 setup           beforeCreate created   
*/
<script>
   setup(){
      var box = ref(null)
      onMounted(()=>{
         console.log('onMounted',box.value)
      })
      console.log(box.value)
      return {box}

   }

</script>

총결산
Vue 3.0 에서 Ref 와 Reactive 의 차이 점 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.Vue 3.0 Ref 와 Reactive 의 차이 점 에 관 한 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 읽 어 주시 기 바 랍 니 다.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!