Vue.js 데이터 응답 실현 방법

많은 전단 자 바스 크 립 트 프레임 워 크(예 를 들 어 Angular,React,Vue)는 자신의 데이터 에 해당 하 는 엔진 을 가지 고 있다.상응하는 성과 그 작업 원 리 를 이해 함으로써 개발 기능 을 향상 시 키 고 자 바스 크 립 트 프레임 워 크 를 더욱 효과적으로 사용 할 수 있 습 니 다.동 영상 과 아래 글 에서 저 희 는 Vue 소스 코드 에서 보 셨 던 것 과 같은 유형의 Reactivity 를 구 축 했 습 니 다.
이 동 영상 을 읽 는 것 이 아니 라 읽 는 것 이 라면 시리즈 의 다음 동 영상 을 보고 Vue 의 창시자 인 Evan You 와 반응 성과 대 리 를 토론 하 십시오.
💡 The Reactivity System
처음 봤 을 때 Vue 의 응답 시스템 은 신기 해 보 였 다.이 간단 한 Vue 애플 리 케 이 션 가 져 오기:


왠 지 모 르 게 Vue 는 가격 이 바 뀌 면 세 가지 일 을 해 야 한 다 는 것 만 알 고 있 습 니 다.
4.567917.우리 홈 페이지 의 가격 치 를 업데이트 합 니 다

price*quantity 를 곱 한 표현 식 을 다시 계산 하고 페이지 를 업데이트 합 니 다

totalPrice With Tax 함 수 를 다시 호출 하고 페이지 를 업데이트 합 니 다

하지만 잠시 만 요.가격 이 변 할 때 Vue 는 무엇 을 업데이트 해 야 하 는 지,그리고 모든 내용 을 어떻게 추적 해 야 하 는 지 이상 하 게 생각 할 것 입 니 다.

이것 은 자 바스 크 립 트 프로 그래 밍 의 일반적인 작업 방식 이 아니다.
만약 당신 이 이해 하지 못 한다 면,우 리 는 일반적인 자바 스 크 립 트 가 어떻게 작 동 하 는 지 보 려 고 합 니 다.예 를 들 어 이 코드 를 실행 하면:

너 는 그것 이 무엇 을 인쇄 한다 고 생각 하 니?우 리 는 Vue 를 사용 하지 않 았 기 때문에,그것 은 10 을 인쇄 할 것 이다.

Vue 에 서 는 가격 이나 수량 이 업 데 이 트 될 때마다 총 업데이트 가 되 기 를 바 랍 니 다.우 리 는 원한 다.

불 행 히 도 자 바스 크 립 트 는 수 동적 인 것 이 아니 라 절차 적 인 것 이기 때문에 현실 생활 에서 도움 이 되 지 않 는 다.데이터 변 화 를 위해 서 는 자바 스 크 립 트 를 사용 하여 일 을 다 르 게 표현 해 야 합 니 다.
⚠️ 문제.
우 리 는 가격 이나 수량 이 변 할 때 다시 실행 할 수 있 도록 총 수 를 계산 하 는 방식 을 저장 해 야 한다.
✅ 해결 방안
우선,우 리 는 우리 에 게 프로그램 을 알려 줄 방법 이 필요 하 다."내 가 곧 실행 할 코드 를 저장 하고,나 는 네가 다른 시간 에 그것 을 실행 해 야 할 지도 모른다."그 다음 에 우 리 는 코드 를 실행 할 것 입 니 다.만약 가격 이나 수량 변수 가 업데이트 되면 저 장 된 코드 를 다시 실행 할 것 입 니 다.

목표 변수 에 익명 함 수 를 저장 하고 기록 함 수 를 호출 했 음 을 주의 하 십시오.ES6 화살표 문법 을 사용 하면 저도 이렇게 쓸 수 있 습 니 다.

목표 변수 에 익명 함 수 를 저장 하고 기록 함 수 를 호출 했 음 을 주의 하 십시오.ES6 화살표 문법 을 사용 하면 저도 이렇게 쓸 수 있 습 니 다.

기록 하 는 방법:

우 리 는 목 표를 저장 하고 있 습 니 다(우리 의 예 에서{totalk=price*quantity}).그래서 우 리 는 잠시 후에 그것 을 실행 할 수 있 습 니 다.

이것 은 배열 에 저 장 된 모든 익명 함 수 를 옮 겨 다 니 며 모든 것 을 실행 합 니 다.
그리고 우리 코드 에서 우 리 는:

쉽 죠?읽 고 다시 파악 하려 면 코드 가 완전 합 니 다.참고 로 원인 을 알 고 싶 으 시 면 특정한 방식 으로 인 코딩 을 하 겠 습 니 다.


⚠️ 문제.
우 리 는 필요 에 따라 목 표를 계속 기록 할 수 있 지만,더욱 강력 한 해결 방안 이 우리 의 응용 프로그램 을 확장 할 수 있다.그것 은 목표 목록 을 유지 하 는 클래스 입 니 다.다시 실행 해 야 할 때 이 목표 목록 들 은 알림 을 받 을 수 있 습 니 다.
✅ 해결 방법:Class 사용
우리 가 이 문 제 를 해결 할 수 있 는 방법 중 하 나 는 이러한 행 위 를 자신의 Class 에 밀봉 하 는 것 이다.이것 은 표준 프로 그래 밍 관찰자 모델 을 실현 하 는 의존 류 이다.
따라서 우리 가 의존 항목 을 관리 하기 위해 자 바스 크 립 트 클래스 를 만 들 면(Vue 가 사물 을 처리 하 는 방식 에 더 가깝다)이렇게 보일 수 있 습 니 다.

실행 시 키 기:

그것 은 여전히 유효 하 다.지금 우리 의 코드 는 더욱 믿 을 만하 다 고 느낀다.여전히 이상 하 게 느껴 지 는 것 은 target()의 설정 과 실행 입 니 다.
⚠️ 문제.
모든 변수 에 dep 클래스 를 설정 하고 업 데 이 트 를 감시 해 야 할 익명 함 수 를 만 드 는 행 위 를 잘 패키지 합 니 다.아마도 관찰자 의 기능 은 이런 행 위 를 처리 하기 위 한 것 일 것 이다.

(이것 은 위의 코드 일 뿐)
우 리 는 다음 과 같이 바 꿀 수 있다.

✅ 해결 방안:관찰자 기능
우리 의 Watcher 기능 에서 우 리 는 간단 한 일 을 할 수 있다.

보다 시 피 watcher 함 수 는 my Func 인 자 를 받 아들 여 우리 의 전역 목표 속성 으로 설정 하고 dep.depend()를 호출 하여 목 표를 구독 자로 추가 하고 목표 함 수 를 호출 하 며 목 표를 초기 화 합 니 다.
현재,우리 가 다음 내용 을 실행 할 때:


우리 가 target 을 우리 가 필요 로 하 는 함수 에 전달 하 는 것 이 아니 라 전역 변수 로 구현 하 는 이 유 를 알 고 싶 을 수도 있 습 니 다.이것 은 우리 의 글 끝 에 밝 혀 질 좋 은 이유 가 있다.
⚠️ 문제.
우 리 는 하나의 Dep 류 가 있 지만,우리 가 진정 으로 원 하 는 것 은 모든 변수 가 자신의 Dep 를 가지 고 있다 는 것 이다.우리 가 계속 하기 전에 먼저 데 이 터 를 저장 합 시다.

우리 의 모든 속성(가격 과 수량)이 자신의 내부 Dep 류 를 가지 고 있다 고 가정 합 시다.

우리 가 실행 할 때:

data.price 값 에 접근 하 였 기 때문에 price 속성의 Dep 류 는 우리 의 익명 함수(대상 에 저장)를 구독 자 배열 로 보 내 기 를 바 랍 니 다(dep.depend()호출 을 통 해).data.quantity 에 접근 하 였 기 때문에,나 는 quantity 속성 Dep 류 가 이 익명 함수(대상 에 저장)를 구독 자 그룹 에 전송 하 기 를 희망 합 니 다.

만약 에 제 가 다른 익명 함수 가 있다 면 data.price 만 방문 하고 가격 속성 Dep 류 만 보 내 고 싶 습 니 다.

가격 구독 자 에 게 dep.notify()를 언제 호출 하고 싶 습 니까?나 는 가격 을 설정 할 때 그것들 을 호출 하 기 를 바란다.글 의 마지막 부분 에서 저 는 콘 솔 에 들 어가 서 실행 하고 싶 습 니 다.

데이터 속성(예 를 들 어 가격 이나 수량)을 연결 하 는 방법 이 필요 합 니 다.따라서 방문 할 때 목 표를 구독 자 배열 에 저장 할 수 있 습 니 다.변경 되 었 을 때 구독 자 배열 에 저 장 된 함 수 를 실행 할 수 있 습 니 다.
✅ 해결 방안:Object.defineProperty()
Object.defineProperty()함 수 를 알 아야 합 니 다.간단 한 ES5 JavaScript 입 니 다.이것 은 우리 가 속성 을 위해 getter 와 setter 함 수 를 정의 할 수 있 도록 합 니 다.Dep 클래스 에서 사용 하 는 방법 을 보 여 드 리 기 전에 함수 변경 방법 을 간단하게 보 여 드 리 겠 습 니 다.


보시 다시 피 두 줄 만 기록 합 니 다.그러나 이 기능 을 과도 하 게 사 용 했 기 때문에 실제로 값 을 가 져 오 거나 설정 하지 않 았 다.우리 지금 다시 합 시다.get()은 값 을 되 돌려 주 기 를 원 합 니 다.set()는 값 을 업데이트 해 야 하기 때문에 현재 가격 을 저장 하기 위해 internalValue 변 수 를 추가 합 니 다.

get 과 set 가 정상적으로 작 동 하 는 이상 콘 솔 에 인쇄 할 것 이 뭐라고 생각 하 십 니까?

따라서 값 을 가 져 오고 설정 할 때 알림 을 받 을 수 있 습 니 다.일부 재 귀 를 통 해 우 리 는 배열 의 모든 항목 을 실행 할 수 있다.
FYI,Object.keys(data)는 대상 키 의 배열 을 되 돌려 줍 니 다.

현재 모든 것 이 getter 와 setter 가 있 습 니 다.우 리 는 콘 솔 에서 이 점 을 보 았 습 니 다.

🛠 Putting both ideas together

이러한 코드 가 실행 되 고 가격 의 가 치 를 얻 을 때,우 리 는 가격 이 이 익명 함수(목표)를 기억 하 기 를 바 랍 니 다.이렇게 하면 가격 이 바 뀌 거나 새 값 으로 설정 되면 이 함수 가 다시 실 행 됩 니 다.이 줄 이 의존 한 다 는 것 을 알 기 때 문 입 니 다.그 러 니까 그렇게 생각해.
Get=>이 익명 함 수 를 기억 하 십시오.값 이 바 뀌 면 다시 실행 합 니 다.
set=>저 장 된 익명 함 수 를 실행 합 니 다.값 이 방금 바 뀌 었 습 니 다.
아니면 저희 Dep Class 로 서 는...
Price accessed(get)=>dep.depend()를 호출 하여 현재 대상 을 저장 합 니 다.
Price set=>가격 에 dep.notify()를 호출 하여 모든 목 표를 다시 실행 합 니 다.
우 리 는 이 두 가지 생각 을 결합 하여 우리 의 최종 코드 를 완성 합 시다.

이제 무슨 일이 일어 날 지.

바로 우리 가 바 라 는 것 이다!가격 과 수량 모두 실시 간 으로 호응 을 얻 었 습 니 다!가격 이나 수량의 가치 가 갱신 되면 우리 의 총 코드 는 다시 실 행 될 것 이다.
Vue 문서 의 이 삽 화 는 이제 의미 가 있 을 것 입 니 다.

너 는 그 예 쁜 보라색 데이터 링 을 보 았 니?낯 이 익 을 거 야!모든 구성 요소 인 스 턴 스 는 getter(레 드 라인)에서 의존 항목 을 수집 하 는 서비스 관찰 기 인 스 턴 스(파란색)가 있 습 니 다.나중에 설정 프로그램 을 호출 할 때 감시 프로그램 에 알 리 고 구성 요 소 를 다시 보 여 줍 니 다.다음은 나의 주석 그림 들이다.

네,이제 더 의미 가 있 지 않 아 요?
분명히 Vue 가 더 복잡 하고 놀 랄 수도 있 지만,너 는 이제 기초 지식 을 알 게 되 었 다.
⏪ 결론:그래서 우 리 는 무엇 을 배 웠 습 니까?의존 항목(의존)을 수집 하고 모든 의존 항목(notify)을 다시 실행 하기 위해 Dep 클래스 를 만 드 는 방법 입 니 다.실행 중인 코드 를 관리 하기 위해 관찰 프로그램 을 만 드 는 방법 입 니 다.이 코드 들 은 의존 항목 으로 추가 해 야 할 수도 있 습 니 다(target).Object.defineProperty()를 사용 하여 getter 와 setter 를 만 드 는 방법 입 니 다.
총결산
위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 Vue.js 데이터 응답 을 실현 하 는 방법 입 니 다.여러분 께 도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!