vue v-model

6317 단어 vuev-model
1. v-model 원리
vue에서 v-model은 문법 설탕이다. 이른바 문법 설탕은 다른 기초 기능에 대한 2차 봉인으로 인해 발생하는 기능이다.간단하게 말하면 v-model 자체는 부모 구성 요소가 하위 구성 요소의 상태와 상태를 바꾸는 이벤트에 대한 봉인입니다.그 실현 원리는 두 부분으로 나뉜다.
props를 통해 서브어셈블리 상태 설정하기
하위 구성 요소가 보내는 이벤트를 감청하여 부모 구성 요소의 상태를 바꾸어 하위 구성 요소의props 값에 영향을 줍니다
상기 두 부분을 통해 부모 구성 요소의 상태와 하위 구성 요소의 상태를 귀속시키는 효과를 실현하였다.
1.1 demo
v-model 사용 예

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>v-model </title>
 <script type="text/javascript" src="vue.js"></script>
 </head>

 <body>
 <div id="app">
 <div> :</div>
 <div style="margin-bottom: 15px;">{{content}}</div>
 <Child v-model="content"></Child>
 </div>

 <template id="input">
 <div>
 <div> :</div>
 <input :value="value" @input="contentChange" />
 </div>
 </template>

 <script type="text/javascript">
 var Child = {
 template: "#input",
 props: {
 value: {
 type: String,
 required: true
 }
 },
 methods: {
 contentChange(value){
 this.$emit("input", value.target.value);
 }
 }
 };

 var vueInstance = new Vue({
 el: "#app",
 components: {Child},
 data: {
 content: ""
 }
 })
 </script>
 </body>
</html>
브라우저에서 상기 html 페이지를 열면 실시간 효과를 볼 수 있습니다. 하위 구성 요소의 input 상자에 내용을 입력하면 상위 구성 요소 구역에 실시간으로 표시되고 하위 구성 요소의 상태와 상위 구성 요소의 상태가 실시간으로 연결되는 효과를 볼 수 있습니다.
2. v-model 기본 감청 이벤트 수정 및 프로필 이름 설정
v-model 명령은 기본적으로 하위 구성 요소에 설정된prop 이름이value입니다. 하위 구성 요소의 input 이벤트를 기본적으로 감청합니다. 위의 demo에서 하위 구성 요소contentChange 함수에서 보내는 이벤트 이름을 수정하면 부모 구성 요소에서 하위 구성 요소의 입력을 실시간으로 얻을 수 없습니다.
Vue에서는 서브어셈블리에 모델 속성을 정의하여 이 두 매개변수의 이름을 수정하는 기능을 제공하지만, 이 기능은 버전 2.2 이상에서만 사용할 수 있습니다. 아래와 같습니다.
2.1 demo

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>v-model </title>
 <script type="text/javascript" src="vue.js"></script>
 </head>

 <body>
 <div id="app">
 <div> :</div>
 <div style="margin-bottom: 15px;">{{content}}</div>
 <Child v-model="content"></Child>
 </div>

 <template id="input">
 <div>
 <div> :</div>
 <input :value="content" @input="contentChange" />
 </div>
 </template>

 <script type="text/javascript">
 var Child = {
 template: "#input",
 model: {
 prop: "content",
 event: "contentChanged"
 },
 props: {
 content: {
 type: String,
 required: true
 }
 },
 methods: {
 contentChange(value){
 this.$emit("contentChanged", value.target.value);
 }
 }
 };

 var vueInstance = new Vue({
 el: "#app",
 components: {Child},
 data: {
 content: ""
 }
 })
 </script>
 </body>
</html>
3. Vue에서 v-model 명령 처리 분석
Vue2.0 버전을 바탕으로 저희가 라벨에 v-model 속성을 써서 vue 구성 요소에 응답하는 절차를 분석합니다.
3.1 분석 섹션
3.1.1 HTML을 AST라고 해석할 때 HTML에서 태그의 속성이 해석됨

function processAttrs(el){
 ...
 name = name.replace(dirRE, '')
 // parse arg
 const argMatch = name.match(argRE)
 if (argMatch && (arg = argMatch[1])) {
 name = name.slice(0, -(arg.length + 1))
 }
 addDirective(el, name, value, arg, modifiers)
 ...
}
지령의 이름을 추출합니다. v-model의 지령 이름name은 모델입니다. 그리고 실례적인 지령에 추가합니다.
3.1.2 인스턴스 명령에 명령 관련 내용 추가

export function addDirective (
 el: ASTElement,
 name: string,
 value: string,
 arg: ?string,
 modifiers: ?{ [key: string]: true }
) {
 (el.directives || (el.directives = [])).push({ name, value, arg, modifiers })
}
실례적인 지령 속성에 상응하는 지령을 추가하면 html상의 속성에서 Vue실례상의 지령 형식으로의 전환을 실현할 수 있다
3.2 명령 설정 섹션
html를 AST라고 해석한 후에 실례에 대응하는directives 속성에 우리가 설정한 v-model 관련 값이 있습니다. 매개 변수 값value를 포함하여name는 모델입니다.
3.2.1 호출 명령의 구조 함수

function genDirectives (el: ASTElement): string | void {
 const dirs = el.directives
 if (!dirs) return
 let res = 'directives:['
 let hasRuntime = false
 let i, l, dir, needRuntime
 for (i = 0, l = dirs.length; i < l; i++) {
 dir = dirs[i]
 needRuntime = true
 const gen = platformDirectives[dir.name] || baseDirectives[dir.name]
 if (gen) {
 // compile-time directive that manipulates AST.
 // returns true if it also needs a runtime counterpart.
 needRuntime = !!gen(el, dir, warn)
 }
 ...
}
v-model 명령의 구조 함수에서tag의 종류에 따라 서로 다른 창설 함수를 만들 수 있습니다. 만약에 사용자 정의 명령이 하위 구성 요소에 속성을 추가해야 한다면 이 함수에서 조작해야 합니다
3.2.2 일반 tag에서의 v-model 지령 구조 과정

function genDefaultModel 
 el: ASTElement,
 value: string,
 modifiers: ?Object
): ?boolean {
 ...
 addProp(el, 'value', isNative ? `_s(${value})` : `(${value})`)
 addHandler(el, event, code, null, true)
 ...
}
  • addProp는el에value라는 이름의prop을 설정하고 값을 설정합니다
  • addHandler가 el에 이벤트 처리 함수를 설정합니다.
    • 3.3 명령 응답 변화 부분
    3.3.1 createPatchFunction 통합 처리 명령의 갈고리 함수
    createPatchFunction 함수는 patch 함수를 반환합니다. patch 처리 과정에서 명령의 갈고리 함수를 호출합니다.
  • bind
  • inserted
  • update
  • componentUpdated
  • unbind
    • 4. 요약
    4.1 컴파일 프로세스
  • html에서 설정된 지령을 해석한다
  • gen* 함수를 통해 명령을 AST에 설정합니다
  • 명령을 호출하는 구조 함수, 명령을 설정하려면 컴파일 시기에 처리해야 하는 일
    • 4.2 초기화 프로세스
    patch 함수에서 통일된 갈고리 함수를 호출하여 지령을 촉발하는 갈고리 함수를 통해 상응하는 기능을 실현한다
    이상은 vue v-model에 대한 상세한 내용입니다. vue v-model에 대한 더 많은 자료는 저희 다른 관련 글에 주목하세요!
    [TIL] 211016
    [Python] 파이썬 Comprehension

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage