vue 데이터 초기 화 initState 의 인 스 턴 스 상세 설명
Vue 인 스 턴 스 는 만 들 때 일련의 초기 화 작업 을 실행 합 니 다.이 초기 화 작업 에서 데이터 바 인 딩 과 가장 큰 관 계 를 가 진 것 은 initState 입 니 다.
우선,그의 코드 를 살 펴 보 자.
function initState(vm) {
vm._watchers = [];
var opts = vm.$options;
if(opts.props) {
initProps(vm, opts.props); // props
}
if(opts.methods) {
initMethods(vm, opts.methods); // methods
}
if(opts.data) {
initData(vm); // data
} else {
observe(vm._data = {}, true /* asRootData */ );
}
if(opts.computed) {
initComputed(vm, opts.computed); // computed
}
if(opts.watch && opts.watch !== nativeWatch) {
initWatch(vm, opts.watch); // watch
}
}
이렇게 많은 데이터 의 초기 화 에서 props,methods 와 data 는 비교적 간단 하 다.☺),한편,coptute d 와 watch 는 상대 적 으로 어렵 고 논리 가 복잡 하기 때문에 저 는 주로 coptute d 와 watch(아래 코드 부분 은 간략화 된 것)를 말씀 드 리 겠 습 니 다.initState 에 서 는 vue 인 스 턴 스 의 props,methods,data,coptute d 와 watch 데 이 터 를 초기 화 합 니 다.
props 를 초기 화 할 때(initprops)props 의 모든 속성 을 옮 겨 다 니 며 유형 검증,데이터 모니터링 등(props 속성 할당 에 경 고 를 던 지 는 갈고리 함수 제공).
methods 를 초기 화 할 때(initMethods)는 주로 methods 의 방법 명 이 합 법 적 인지 모니터링 합 니 다.
data 를 초기 화 할 때(initData)observe 함수 깊이 가 데이터 의 모든 속성 을 옮 겨 다 니 며 데이터 납 치 를 합 니 다.
computed 를 초기 화 할 때(initComputed)데이터 가 data 나 props 에 존재 하 는 지 모니터링 하고 존재 하면 경 고 를 던 집 니 다.그렇지 않 으 면 define Computed 함수,감청 데 이 터 를 호출 하여 구성 요소 의 속성 에 getter 와 setter 를 연결 합 니 다.컴퓨터 d 에서 속성의 값 이 함수 라면 기본적으로 속성의 getter 함수 입 니 다.또한 속성의 값 은 하나의 대상 일 수 있 습 니 다.그 는 세 개의 유효한 필드 set,get,cache 만 있 습 니 다.각각 속성 을 나타 내 는 setter,getter 와 캐 시 를 사용 할 지 여 부 를 표시 합 니 다.그 중에서 get 은 필수 입 니 다.cache 는 기본 값 은 true 입 니 다.
function initComputed(vm, computed) {
var watchers = vm._computedWatchers = Object.create(null);
for(var key in computed) {
var userDef = computed[key];
var getter = typeof userDef === 'function' ? userDef : userDef.get;
// watcher
watchers[key] = new Watcher(
vm,
getter || noop,
noop,
computedWatcherOptions
);
if(!(key in vm)) {
// ,
//defineComputed ,
defineComputed(vm, key, userDef);
} else {
// data props ,
}
}
}
watch 를 초기 화 할 때(initWatch)함 수 를 watch 의 속성 바 인 딩 setter 로 호출 합 니 다(구성 요소 에 이 속성 이 없 으 면 감청 에 성공 하지 못 합 니 다.속성 은 props,data 또는 coptute 에 존재 해 야 합 니 다).watch 에서 속성의 값 이 함수 라면 기본 값 은 속성의 setter 리 셋 함수 입 니 다.속성의 값 이 하나의 배열 이 라면 배열 의 내용 을 옮 겨 다 니 며 속성 바 인 딩 리 셋 입 니 다.그 밖 에 속성의 값 은 하나의 대상 일 수도 있 습 니 다.이때 대상 중의 handler 필드 는 setter 리 셋 함 수 를 대표 합 니 다.immediate 는 즉시 안의 handler 방법 을 실행 하 는 지 여 부 를 대표 합 니 다.deep 대표 님,심도 있 는 감청 여 부 를 말씀 드 리 겠 습 니 다.vm.$watch
함 수 는 Watcher 를 직접 사용 하여 관찰자 대상 을 구축한다.watch 에 있 는 속성의 값 은 watcher.cb 로 존재 합 니 다.관찰자 update 를 관찰 할 때 watcher.run 함수 에서 실 행 됩 니 다.이 과정 을 알 고 싶 으 면 제 전편 vue 응답 식 시스템 인 observe,watcher,dep 에서 Watcher 에 대한 소 개 를 볼 수 있 습 니 다.
function initWatch(vm, watch) {
// watch,
for(var key in watch) {
var handler = watch[key];
// , ,
//createWatcher vm.$watch, vm.$watch
if(Array.isArray(handler)) {
for(var i = 0; i < handler.length; i++) {
createWatcher(vm, key, handler[i]);
}
} else {
//
createWatcher(vm, key, handler);
}
}
}
function createWatcher(vm, expOrFn, handler, options) {
// , handler
if(isPlainObject(handler)) {
options = handler;
handler = handler.handler;
}
// ,
if(typeof handler === 'string') {
handler = vm[handler];
}
//
return vm.$watch(expOrFn, handler, options)
}
computedcoptute d 는 본질 적 으로 타성 구 치 를 하 는 관찰자 로 캐 시 성 을 가지 고 있 으 며,변화 에 의존 한 후에 처음으로 coptute d 속성 을 방문 해 야 새로운 값 을 계산 할 수 있 습 니 다.
다음은 이 한 마디 를 둘러싸 고 설명 하 겠 습 니 다.
위 코드 에서 언급 한 바 와 같이 계산 속성 에 있 는 데이터 가 data 와 props 에 존재 할 때 경 고 를 받는다.즉,이런 방법 은 잘못된 것 이다.그래서 일반적으로 우 리 는 계산 속성 에서 데 이 터 를 직접 설명 합 니 다.아니면 그 코드 세 션 에서 정 의 된 계산 속성 이 구성 요소 인 스 턴 스 에 없 으 면 define Computed 함 수 를 실행 하여 데 이 터 를 납치 합 니 다.다음은 define Computed 함수 에서 무엇 을 했 는 지 살 펴 보 겠 습 니 다.
function defineComputed(target, key, userDef) {
//
var shouldCache = !isServerRendering();
// , get
if(typeof userDef === 'function') {
sharedPropertyDefinition.get = shouldCache ?
// , , get createComputedGetter
createComputedGetter(key) :
// , get userDef
userDef;
// set
sharedPropertyDefinition.set = noop;
} else {
// , set、get cache
sharedPropertyDefinition.get = userDef.get ?
shouldCache && userDef.cache !== false ?
// get , , cache false, get createComputedGetter
createComputedGetter(key) :
// get , cache false, get userDef
userDef.get :
// get , get
noop;
// set set
sharedPropertyDefinition.set = userDef.set ?
userDef.set :
noop;
}
// get、set
// ,get ,set
// computed , get
//
Object.defineProperty(target, key, sharedPropertyDefinition);
}
지난 편vue 응답 시스템--observe,watcher,dep에서 저 는 Watcher 에 관 한 소개 에서 속성 watcher 를 계산 할 때 options.lazy 를 true 로 설정 합 니 다.여 기 는 속성 타성 구 치 를 계산 하고 캐 시 할 수 있 는 관건 입 니 다.물론 전 제 는 cache 가 false 가 아 닙 니 다.cache 는 false 가 아 닙 니 다.createComputedGetter 함 수 를 호출 하여 속성 을 계산 하 는 getter 함수 coptute dGetter 를 만 듭 니 다.
코드 부터 볼 게 요.
function createComputedGetter(key) {
return function computedGetter() {
var watcher = this._computedWatchers && this._computedWatchers[key];
if(watcher) {
if(watcher.dirty) {
//watcher.evaluate watcher , watcher.dirty false
// watcher.dirty true,
watcher.evaluate();
}
//
if(Dep.target) {
watcher.depend();
}
// watcher
return watcher.value
}
}
}
// , , watcher dirty true
// , , 。
Watcher.prototype.evaluate = function evaluate() {
this.value = this.get();
this.dirty = false;
};
// , update
Watcher.prototype.update = function update() {
// watcher, watcher lazy true,
if(this.lazy) {
this.dirty = true;
} else if(this.sync) {
// run, , queueWatcher
this.run();
} else {
// watcher , tick 。
// ,
queueWatcher(this);
}
};
options.lazy 가 true 로 설정 되면(속성 watcher 만 계산 하 는 options.lazy 는 true 로 설정)업데이트 에 의존 할 때마다 run 함 수 를 주동 적 으로 터치 하지 않 고 watcher.dirty 를 true 로 설정 합 니 다.이렇게 계산 속성 을 추출 할 때 computedGetter 함 수 를 실행 합 니 다.computedGetter 함수 에서 watcher.dirty 에 대한 판단 이 있 습 니 다.watcher.dirty 가 true 일 때 watcher.evaluate 를 실행 하여 값 을 업데이트 하고 watcher.dirty 를 false 로 설정 하면 타성 구 치 를 완성 합 니 다.다음 에 업데이트 에 의존 하지 않 으 면 update 를 실행 하지 않 고 watcher.dirty 를 true 로 하지 않 습 니 다.그러면 다시 값 을 추출 할 때 watcher.evaluate 를 실행 하지 않 고 값 을 업데이트 하여 캐 시 효 과 를 얻 을 수 있 습 니 다.다시 말 하면 우 리 는 cache 가 false 가 아니 라 는 것 을 알 았 을 때 계산 속성 은 모두 타성 구 치 였 고 캐 시 성 이 있 었 다.cache 는 기본적으로 true 였 다.우 리 는 대부분 이 기본 값 을 사용 했다.그래서 우 리 는 computed 본질 은 타성 구 치 의 관찰자 이 고 캐 시 성 이 있 으 며 변화 에 의존 한 후에 처음으로 computed 속성 을 방문 해 야 새로운 값 을 계산 할 수 있다 고 말 했다.
총결산
위 에서 말 한 것 은 소 편 이 소개 한 vue 데이터 초기 화 initState 의 실례 상세 한 설명 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
만약 당신 이 본문 이 당신 에 게 도움 이 된다 고 생각한다 면,전 재 를 환영 합 니 다.출처 를 밝 혀 주 십시오.감사합니다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.