순수 JS 는 vue.js 의 양 방향 연결 기능 을 어떻게 실현 합 니까?

아래 캡 처 보 세 요.

이것 은 일반적인 html 파일 이 고 vue.js 를 도입 하지 않 았 습 니 다.코드 에서 익숙 한 곳 을 보 았 습 니까?예 를 들 어"v-model","v-on:click",그리고 자주 사용 하 는"쌍 괄호{{}"할당 문.
먼저 양 방향 연결 을 실현 하 는 방향 을 말 해 보 자.
1.위의 wslVue 대상 과 같은 사용자 정의 vue js 대상 을 만 듭 니 다.초기 화 방법 에 필요 한 매개 변 수 는 다음 과 같 습 니 다.(1)마 운 트 할 dom 대상 id,(2)사용자 정의 vue 대상 의 data 속성(json 대상),(3)뒤에 아 날로 그 마 운 트 방법 이 추가 되 었 습 니 다.(여기 서 유용 한 것 은(1),(2)매개 변수 입 니 다.(3)매개 변 수 는 vue 대상 의 모든 초기 화 작업 이 끝 난 후에 렌 더 링(마 운 트)방법 으로 리 셋 할 수 있 습 니 다.
2.vue 속성 data json 대상 의 set,get 방법 을 재 작성 하 는 동시에 vue 대상 에 data 의 모든 속성 을 추가 하고 vue 생 성 속성의 set,get 방법 을 재 작성 할 수 있 습 니 다.방법 에서 data 의 set,get 방법 을 직접 실행 할 수 있 습 니 다(vue 대상 속성의 읽 기와 쓰기 로 dom 작업 을 할 수 있 는 목적).
3.html 를 분석 하고 html 에 있 는 태그 node,텍스트 node 를 특정한 재 구성 합 니 다.
이러한 기능 을 실현 하 는 js 의 주요 방법 은 어떤 것 이 있 습 니까?
1.js 대상 속성의 set,get 방법.
2.document.createDocumentFragment html 세 션 분석.
3.관련 정규 판단 html 코드 세 션 재 구성.
마지막 으로 어떤 도구 클래스 를 만들어 야 합 니까?
1.vue 대상.
2.관찰자 류 Watcher 는 조작 해 야 할 node 노드 와 속성 변경 에 필요 한 리 셋 방법 을 저장 합 니 다.
3.모든 관찰자 Watcher 의 관리 유형 Dep 를 관리 하고 데이터 변경 과 관련 된 Watcher 를 제어 하여 리 셋 렌 더 링 을 한다.
vue 양 방향 귀속 실현
vue 대상 초기 화 방법

설명:
1:vue 대상 에 data 의 모든 속성 을 추가 하고 set,get 방법 을 다시 씁 니 다.
2:vue 대상 에 방법 관리 methods 대상 을 추가 하고 html 를 분석 하여 v-on:click 방법 을 가 져 올 때 태그 에 click 이벤트 방법 체 를 추가 합 니 다.
3:html 를 분석 하고 분석 할 때 처리 해 야 할 node 를 만 났 을 때 Watcher 대상 을 만 들 고 관련 node 와 명령 을 Watcher 대상 에 저장 하 며 Watcher 대상 을 관찰자 관리 류 Dep 집합 에 추가 합 니 다.
4:초기 화 완료 후 마 운 트 를 하고 html 를 지정 한 dom 요소 에 렌 더 링 합 니 다.
Compile 클래스 분석 에 대응 하 는 dom 를 마 운 트 해 야 합 니 다.
모든 노드 가 져 오기

특정 명령 어 해석

태그 요소 와 텍스트 내용 판단

여기 가 태그 node 라면 v-on 과 v-model 명령 을 분석 해 야 합 니 다.
v-model

v-on:click

빨 간 선 은 vue 대상 에서 methods 와 일치 하 는 방법 으로 현재 node 에 클릭 이 벤트 를 추가 합 니 다.
텍스트 내용 node 라면{{}명령 을 해석 해 야 합 니 다.

요약:여기 서 많은 Watcher 대상 을 만 들 것 입 니 다.대상 은 현재 vue 대상,node,데이터 변경 리 셋 을 저장 하고 dep 관리 류 에 저장 하여 데이터 변경 시 직접 실행 방법 리 셋 을 통 해 렌 더 링 합 니 다.
특정 명령 판단

Watcher 및 Dep 대상


마지막 으로 사고 지도 한 장 을 놓 겠 습 니 다.

마무리:여기까지 기본 적 인 사 고 를 다 했 습 니 다.복잡 한 논리 가 없고 표 현 력 이 유한 합 니 다.여러분 에 게 도움 이 되 고 대신 들 의 비판 과 지적 을 받 아 함께 발전 하 기 를 바 랍 니 다.
이상 은 순수 JS 가 vue.js 에서 의 양 방향 바 인 딩 기능 을 어떻게 실현 하 는 지 에 대한 상세 한 내용 입 니 다.JS 가 vue 의 양 방향 바 인 딩 을 실현 하 는 지 에 관 한 자 료 는 저희 의 다른 관련 글 을 주목 하 세 요!