vue.js 는 Object.defineProperty 를 이용 하여 양 방향 연결 을 실현 합 니 다.

Object.defineProperty 라 는 방법 은 일어나 지 않 습 니 다.vue.js 는 이 를 통 해 양 방향 연결 을 실현 합 니 다.그리고 Object.observe 도 초안 발기인 에 의 해 철회 되 었 다.그래서 define Property 가 더 알 아 볼 필요 가 있 습 니 다.
몇 줄 의 코드 를 그 가 어떻게 사용 하 는 지 보 자.

var a= {}
Object.defineProperty(a,"b",{
 value:123
})
console.log(a.b);//123

간단 합 니 다.세 개의 인 자 를 받 아들 이 고 모두 필수 입 니 다.
입력 매개 변수
첫 번 째 매개 변수:대상
두 번 째 매개 변수:정 의 된 속성 이나 방법의 이름 이 필요 합 니 다.
세 번 째 매개 변수:목표 속성 이 가지 고 있 는 특성.(descriptor）
앞의 두 매개 변 수 는 더 이상 말 하지 않 고 코드 를 보면 알 수 있 습 니 다.주로 세 번 째 매개 변수 descriptor 를 보고 어떤 수치 가 있 는 지 보 세 요.
descriptor
그 는 또 아래 의 수 치 를 취 했다.우 리 는 간단하게 알 아 보 자.뒤의 예 를 들 어 하나씩 소개 하 자.

value:속성의 값(말 할 필요 도 없 이)

writable:false 라면 속성의 값 을 다시 쓸 수 없고 읽 기 전용

configurable:총 스위치 가 false 이면 더 이상 설정 할 수 없습니다(value,writable,configurable)

enumerable:for...in 순환 에서 옮 겨 다 니 거나 Object.keys 에서 열거 할 수 있 습 니까?

get:이따가 자세히

set:이 따 얘 기해.

기술자 기본 값
첫 번 째 예 를 다시 보 겠 습 니 다.

var a= {}
Object.defineProperty(a,"b",{
 value:123
})
console.log(a.b);//123

우 리 는 value 만 설 정 했 습 니 다.다른 것 은 설정 되 지 않 았 습 니 다.그러나 첫 번 째 때 는 간단하게 이해 할 수 있 습 니 다.writable,configurable,enumerable 을 기본 으로 해 줍 니 다.모두 값 을 설정 하고 값 도 모두 false 입 니 다.즉,위의 코드 와 아래 는 등가(첫 번 째 설정 에 만 국한)라 는 것 이다.

var a= {}
Object.defineProperty(a,"b",{
 value:123,
 writable:false,
 enumerable:false,
 configurable:false
})
console.log(a.b);//123

이상 중요 합 니 다.그리고 이상 의 이 해 는 set 와 get 에 도움 이 되 지 않 습 니 다.
configurable
총 스위치,첫 번 째 설정 false 이후 두 번 째 설정 은 아무것도 안 됩 니 다.예 를 들 어

var a= {}
Object.defineProperty(a,"b",{
 configurable:false
})
Object.defineProperty(a,"b",{
 configurable:true
})
//error: Uncaught TypeError: Cannot redefine property: b

잘못 보고 할 거 야.
위 에서 말 한 기본 값 을 주의 하 세 요...처음 설정 하지 않 으 면 어떻게 되 는 거 야?false 로 설정 해 드릴 게 요.그 러 니까두 번 째.다시 설치 하면 어떻게 되 는 거 야?맞다
writable
fasle 로 설정 하면 읽 기 전용 으로 변 합 니 다.

var a = {}; 

Object.defineProperty(o, "b", { 
 value : 123,
 writable : false });

console.log(a.b); //    37
a.b = 25; //       （         ，           ）
console.log(o.a); //    37，       。

enumerable
속성 특성 enumerable 은 대상 의 속성 이 for...in 순환 과 Object.keys()에서 매 거 될 수 있 는 지 를 정의 합 니 다.

var a= {}
Object.defineProperty(a,"b",{
 value:3445,
 enumerable:true
})
console.log(Object.keys(a));//   ["b"]

false 로 바꾸다

var a= {}
Object.defineProperty(a,"b",{
 value:3445,
 enumerable:false //       
})
console.log(Object.keys(a));//   []

for...in 유사,군말 하지 않 겠 습 니 다.
set 와 get
descriptor 에 서 는 접근 기(get 과 set)와 wriable 또는 value 를 동시에 설정 할 수 없습니다.그렇지 않 으 면 틀 릴 수 있 습 니 다.get 과 set 를 사용 하려 면 writable 이나 value 중 하 나 를 사용 할 수 없습니다.
set 와 get,둘 이 뭐 하 는 거 야?

var a= {}
Object.definePrope`     `rty(a,"b",{
 set:function(newValue){
 console.log("      ,     "＋newValue)
 },
 get:function(){
 console.log("     ")
 return 2 //    ，      2
 }
})
a.b =1 //         ,     1
console.log(a.b) //        
     //   2     ，         

쉽게 말 하면 이"b"할당 이나 값 을 추출 할 때 각각 set 와 get 에 대응 하 는 함 수 를 촉발 합 니 다.
그게 observe 를 실현 하 는 관건 이 잖 아.
다음 편 은 제 가 분석 하 겠 습 니 다vue 의 observe 구현 소스 코드,자신 이 어떻게 한 걸음 한 걸음 씩$watch 를 실현 하 는 지 이야기 합 니 다..
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.