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)인자:속성의 대상 을 정의 하려 면..
정의 하거나 수정 할 속성의 이름 이나 Symbol..
정의 하거나 수정 할 속성 설명자 입 니 다.
함수 에 전 달 된 대상.
대상 에 현재 존재 하 는 속성 설명 자 는 두 가지 주요 형식 이 있 습 니 다.데이터 설명자 와 액세스 설명자 입 니 다.데이터 설명 자 는 값 을 가 진 속성 입 니 다.이 값 은 쓸 수도 있 고 쓸 수도 없습니다.액세스 설명 자 는 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>
vue 3.x 양 방향 귀속 원리
Vue 3.x 는 proxy(에이전트)를 통 해 이 루어 진 데이터 의 양 방향 바 인 딩 입 니 다.
proxy
Object.defineProperty 와 마찬가지 로 대상 의 속성 에 두 가지 방법 을 추가 할 수 있 습 니 다 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 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
js 를 이용 하여 Vue 2.0 데이터 의 양 방향 연결 기능 을 실현 합 니 다.이벤트 감청 oninput 을 사용 하여 사용자 의 입력 을 감청 합 니 다(이 이 벤트 는또는요소 의 값 이 바 뀌 었 을 때 촉발 합 니 다).<br>ipt.value 의 값 을 data.name 의 value ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
