Vue 2.x 와 Vue 3.x 의 양 방향 연결 원리 에 대한 상세 한 설명

양 방향 연결 의 원리
Object.defineproperty()를 통 해 대상 속성 을 재 정의 하 는 set 방법,get 방법 으로 이 루어 집 니 다.이 속성 에서 값 을 추출 할 때 get 방법 이 실 행 됩 니 다.이 속성 을 변경 할 때 set 방법 이 실 행 됩 니 다.따라서 저 희 는 view 를 업데이트 해 야 하 는 방법 을 여기에 넣 으 면 data 업데이트 view 를 실현 할 수 있 습 니 다.view 업데이트 data 는 이벤트 감청 을 통 해 이 루어 집 니 다.
보기 의 데이터 가 바 뀌 었 을 때 data 의 데이터 도 바 뀌 었 습 니 다.data 의 데이터 가 바 뀌 었 을 때 보기 의 데이터 도 Object.defineProperty()가 바 뀌 었 습 니 다.
4.567915.방법 은 한 대상 에 새로운 속성 을 직접 정의 하거나 한 대상 의 기 존 속성 을 수정 하여 이 대상 을 되 돌려 줍 니 다.
문법:Object.defineProperty(obj, prop, descriptor)인자:

obj
속성의 대상 을 정의 하려 면..

prop
정의 하거나 수정 할 속성의 이름 이나 Symbol..

descriptor
정의 하거나 수정 할 속성 설명자 입 니 다.

반환 값
함수 에 전 달 된 대상.
대상 에 현재 존재 하 는 속성 설명 자 는 두 가지 주요 형식 이 있 습 니 다.데이터 설명자 와 액세스 설명자 입 니 다.데이터 설명 자 는 값 을 가 진 속성 입 니 다.이 값 은 쓸 수도 있 고 쓸 수도 없습니다.액세스 설명 자 는 getter 함수 와 setter 함수 가 설명 하 는 속성 입 니 다.하나의 설명 자 는 이 두 가지 중 하나 일 뿐이다.둘 다 는 아니 야.
역할.
*대상 의 속성 을 두 가지 방법 으로 설정 할 수 있 습 니 다.
*get:이 속성 에서 값 을 추출 할 때 get 방법 이 적 용 됩 니 다
*set:이 속성 에 값 을 부여 할 때 set 방법 이 적 용 됩 니 다.


 let obj = {}
 //  obj name        get&set
 Object.defineProperty(obj,'name',{
 set:function (value){//value   name     
  console.log('   set');
  this._name=value//             name,     set
 },
 get:function(){
  console.log('   get');
  //          
  return this._name
 }
 })

name 속성 에 값 을 부여 할 때 set 방법 을 터치 하여 set 방법 에 값 을 저장 합 니 다.
값 을 가 져 올 때 get 방법 을 터치 하여 get 방법 에서 값 을 되 돌려 줍 니 다.
vue2.x 양 방향 귀속 원리


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <!--      V -->
 <div id="v"></div>
 <input type="text" id="ipt">
</body>
<script>
 // MVVM：
 //  V  ，M    
 //  M  ，V    
 //      M

 let data = {}
 //  data  name        get ，set
 Object.defineProperty(data,'name',{
 set:function(value){
  //  M   ，V    
  document.querySelector('#v').innerHTML = value
 },
 get:function(){
  return this._name
 }
 })
 //  input                 
 document.querySelector('#ipt').oninput = function(e){
 data.name = e.target.value
 }
</script>
</html>

입력 상자 의 내용 이 바 뀌 면 oninput 이벤트 가 발생 하여 data 의 내용 을 즉시 변경 합 니 다.data 의 name 이 바 뀌 면 set 방법 을 촉발 하여 최신 값 을 v 에 할당 합 니 다.그러면 데이터 의 양 방향 바 인 딩 을 실현 합 니 다.

vue 3.x 양 방향 귀속 원리
Vue 3.x 는 proxy(에이전트)를 통 해 이 루어 진 데이터 의 양 방향 바 인 딩 입 니 다.
proxy
Object.defineProperty 와 마찬가지 로 대상 의 속성 에 두 가지 방법 을 추가 할 수 있 습 니 다 get&set
구별:

Object.defineProperty 는 대상 의 한 속성 에 만 get&set 방법 을 추가 할 수 있 습 니 다

프 록 시:대상 에 게 모든 속성 을 한꺼번에 get&set 방법 으로 설정

사용법:
새로운 proxy 대상 을 만 듭 니 다


	let p = new Proxy(obj,{get:function(){},set:function(){}})


<script>
 let obj = {}
 let p = new Proxy(obj,{
 get:function(obj,prop){
  //obj :       prop:      
  console.log('   get');
  return obj[prop]
 },
 set:function(obj,prop,value){
  // obj:      
  // prop      
  // value      
  console.log('   set');
  //           
  obj[prop] = value
 }
 })
</script>

vue 3.x 데이터 의 양 방향 연결 실현
총결산
Vue2.x 와 Vue3.x 의 양 방향 바 인 딩 원리 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.Vue2.x 와 Vue3.x 의 양 방향 바 인 딩 원리 에 관 한 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 부탁드립니다!

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Hibernate 단 방향 / 양 방향 다 대 다

모든 학생 에 게 그 는 여러 선생님 이 그 에 게 강 의 를 해 주 었 고 모든 선생님 에 게 그 가 강의 해 야 할 학생 도 많 습 니 다.이런 상황 은 여러 쌍 으로 묘사 할 수 있다.즉, 두 표 사이 에 모든...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Vue 2.x 와 Vue 3.x 의 양 방향 연결 원리 에 대한 상세 한 설명

좋은 웹페이지 즐겨찾기