vue 지시문의 세 가지 요소는 무엇입니까?

vue 지시문의 세 가지 요소는 응답성, 템플릿 엔진 및 렌더링입니다. 응답성은 데이터가 업데이트되거나 추가될 때 페이지가 응답하고 해당 데이터가 다시 렌더링된다는 것을 의미합니다. 템플릿 엔진은 본질적으로 인스턴스 렌더링의 식별자로 사용되는 문자열입니다. 다른 코드.

이 기사의 운영 환경: Windows 10 시스템, Vue 버전 2.9.6, DELL G3 컴퓨터.

vue 지시문의 세 가지 요소는 무엇입니까?

veu의 세 가지 요소

• 응답성: vue는 데이터의 각 속성 변경을 어떻게 모니터링합니까?

• 템플릿 엔진: vue의 템플릿은 어떻게 구문 분석되고 어떻게 되나요? 지시어가 처리되었나요?

• 렌더링: vue의 템플릿은 어떻게 html로 렌더링되나요? 그리고 렌더링 프로세스는

vue가 반응형으로 구현됩니다.

Object.defineProperty

Simulation

1) 반응형이란 무엇입니까

데이터를 수정한 후 attribute, vue는 즉시

data 속성을 모니터링하고 vm

2) Object.defineProperty

구문:

Object.defineProperty(obj, prop, descriptor)

매개변수 설명:

• obj: 필수입니다. 대상 개체

• prop: 필수입니다. 정의하거나 수정할 속성의 이름

• 설명자: 필수입니다. 대상 속성의 특징

Basic

var obj = {
  name: 'zhangsan',
  age: 25
}
 
console.log(obj.name); // 获取属性的时候，如何监听
obj.age = 26; // 赋值属性的时候，如何监听

defineProperty 메소드를 사용하여 위 작업을 구현합니다. 다음과 같이

var obj = {}
 
var name = 'zhangsan'
 
Object.defineProperty(obj, "name", {
  get: function () {
    console.log('get');
    return name;
  },
  set: function (newVal) {
    console.log('set');
    name = newVal;
  }
});
 
console.log(obj.name); // 可以监听到
obj.name = 'lisi'; // 可以监听到

defineProperty를 사용하여 데이터 변경 사항을 모니터링할 수 있습니다. 이는 vue가 응답 작업을 수행하는 핵심 방법이기도 합니다.

3)

var mv = {}
 
var data = {
  price: 100,
  name: 'zhangsan'
}
 
var key, value;
for (key in data) {
 
  // 命中闭包。新建一个函数，保证 key 的独立的作用域
  (function (key) {
Object.defineProperty(mv, key, {
  get: function () {
    console.log('get');
    return data[key];
  },
  set: function (newVal) {
    console.log('set');
    data[key] = newVal
  }
})
  })(key);
}

vue의 템플릿을 구문 분석하는 방법

템플릿이란 무엇입니까?

render 함수

render 함수 및 vdom

1) 템플릿이란 무엇입니까

Essence: 문자열

v-if v-for 등과 같은 로직이 있습니다.

html 형식과 매우 유사하지만 큰 차이가 있습니다

결국 표시용 html로 변환됩니다

템플릿은 결국 변환되어야 합니다

논리( v-if v-for)가 있으므로 JS로 구현해야 합니다(Turing Complete)

html 렌더링 페이지로의 변환은 JS로 구현해야 합니다

그러므로 가장 중요한 것은 템플릿을 JS 함수로 변환하려면

기본 예제

 <div id="app">
    <div>
      <input v-model="title">
      <button v-on:click="add">submit</button>
    </div>
    <ul>
      <li v-for="item in list">{{item}}</li>
    </ul>
  </div>

위는 템플릿입니다.

【관련 추천: "vue.js tutorial"】

위 내용은 vue 지시문의 세 가지 요소는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!