Day01
1. 응답성의 원칙
vue2 응답성의 원칙은 데이터 하이재킹을 사용 하고 구독자 모드를 게시하는 것입니다.
① 데이터 하이재킹:
목적: 데이터의 변화를 감지할 수 있습니다.
데이터 하이재킹은 ES5의 Object.defineProperty()를 사용하는 것 입니다 . 데이터 구성 항목의 모든 데이터를 순회하여 setter 및 getter로 변환(또는 각 속성에 set 및 get 함수 추가)하는 것은 accessor 속성입니다.
②게시 구독자 모드:
목적: 데이터가 변경되면 (직간접적으로) 데이터를 사용하는 템플릿에 해당 변경 사항이 있습니다(템플릿이 다시 렌더링됨).
아마도 상대방은 다음과 같이 질문할 것입니다. 좀 더 구체적으로 말씀해 주시겠습니까? 대답하는 방법?
1) Vue 생성자에서 변수 데이터의 모든 속성을 반복합니다. 먼저 속성 값을 저장한 다음 Object.defineProperty()를 사용하여 각 속성에 set 및 get 메서드를 추가합니다. 그런 다음 각 속성에는 구독 개체가 필요하고 dom 트리를 순회하며 해당 속성을 사용하는 모든 dom 요소가 해당 속성을 구독하도록 합니다.
2) 속성 값 수정 시 해당 속성의 set 함수가 호출되며, 해당 속성을 구독하는 모든 구독자(함수)가 동시에 호출됨
class Vue {
constructor(obj) {
this.$el = obj.el;
this.$data = obj.data;
// 2.1、订阅（暂时写死，只订阅msg的变化）
let observer1 = new Observer();
observer1.addSubscribe(function (newVal) {
document.getElementById("p01").innerHTML = newVal;
document.getElementById("p02").innerHTML = newVal;
document.getElementById("p03").innerHTML = newVal;
console.log(newVal);
});
// 把data中的属性赋给this对象
for (let key in obj.data) {
// 保存数据（data中的每个属性的数据）。
let value = obj.data[key];
// 2.1、订阅（应该放在此处）
// 1、数据劫持。
Object.defineProperty(this, key, {
set: function (val) {
console.log("val", val);
if (value == val) {
return;
}
value = val;
// 2.2、发布（更新使用key的dom元素）
observer1.publish(val);
},
get: function () {
return value
}
})
}
console.log("this", this);
this.render();
}
render() {
// this.$el
let htmlStr = document.querySelector(this.$el).innerHTML;
for (let key in this.$data) {
htmlStr = htmlStr.replaceAll("{
{" + key + "}}", this.$data[key]);
}
document.querySelector(this.$el).innerHTML = htmlStr;
}
}
// 发布订阅模式的代码。
class Observer {
constructor() {
// 存放所有的订阅
this.arr = [];
}
// （添加）订阅
addSubscribe(cb) {
this.arr.push(cb);
}
// 发布
publish(what) {
this.arr.forEach(cb => {
(typeof cb === "function") && cb(what);
})
}
}둘, v-if와 v-show의 차이점
같은 점:
(모두 DOM 요소의 표시 및 숨기기를 제어합니다.)
차이점:
① 원리가 다릅니다.
v-if는 dom 요소의 삭제 및 추가를 통해 표시 및 숨기기를 완료하는 것입니다.
v-show는 style 속성 display의 값을 수정하여 표시 및 숨기기를 완료합니다.
② 성능 소비의 다른
v-if: 성능 손실은 주로 빈번한 스위칭에 반영됩니다.
v-show : 실적 손실은 주로 1차에 반영
③시나리오에서 다른
v-if 사용: 간헐적인 시나리오 전환에 사용
v-show: 장면을 자주 전환할 때 사용합니다.
④ 보안의 차이
v-if : 보안이 좋음(dom 요소가 표시되지 않으면 요소에서 전혀 보이지 않음)
v-show: 나쁜 보안. (dom 요소가 표시되지 않으면 여전히 요소에서 볼 수 있으므로 프로그램을 이해하는 사람이 수정할 수 있습니다.)
3. v-for와 v-if를 함께 사용하지 않는 이유는 무엇입니까?
①이유:
v-for의 우선순위는 v-if보다 높으며, 조건을 만족하는 데이터가 상대적으로 작을 경우(원본 데이터) 성능 낭비가 많음
②솔루션:
계산에서 먼저 조건을 충족하는 데이터를 필터링합니다. 그런 다음 v-for는 필터링된 데이터를 직접 반복합니다. Computed는 캐싱되므로 원본 데이터가 변경되지 않으면 데이터가 여러 번 필터링되지 않으므로 효율성이 향상됩니다.
//所以可以采取以下做法，先判断v-if
<div id="app">
<ul v-if="flag">
<li v-for="(item,index) in arr">{
{index}}---{
{item}}</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
flag: true,
arr: ['h', 'e', 'l', 'l', 'o']
}
})
</script>
Day02
1. 양방향 바인딩 원칙
1. 양방향: M---->V V---->M
2. 이벤트와 속성을 이용하여 완성한다.
3. v-모델은 구문 설탕입니다. 본질은 이벤트와 속성의 조합입니다.
1) 텍스트 상자의 경우(한 줄 및 여러 줄): 값 속성 및 입력 이벤트. 게으른 수정자를 추가하면. 이벤트가 변경 이벤트가 됩니다.
2) 라디오의 경우: 사용된 확인 속성 및 변경 이벤트와 값 속성을 라디오에 추가해야 합니다.
3) 체크박스의 경우: 사용된 체크된 속성 및 변경 이벤트
3.1) 애플리케이션이 다중 선택인 경우 체크박스에 값 속성을 추가해야 합니다.
3.2) 애플리케이션이 단일 선택인 경우 추가할 필요가 없습니다.
4) 선택의 경우: 값 속성 사용 및 이벤트 변경
라디오에서 사용되는 v-model의 본질
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<div id="app">
性别：
<input type="radio" v-bind:checked="sex=='女'" @change="changeSex" value="女" >女
<input type="radio" v-bind:checked="sex=='男'" @change="changeSex" value="男" >男
<hr/>
性别：
<input type="radio" v-model="sex" value="女" >女
<input type="radio" v-model="sex" value="男">男
<p>已选择的性别：{
{sex}}</p>
</div>
</body>
</html>
<script src="./js/vue2.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
sex:"女"
},
methods: {
changeSex(e){
this.sex = e.target.value;
}
}
});
</script>체크박스에 사용되는 v-model의 본질
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
爱好：
<input type="checkbox" :checked="hobbys.includes('篮球')" @change="changeHobby" value="篮球">篮球
<input type="checkbox" :checked="hobbys.includes('足球')" @change="changeHobby" value="足球">足球
<input type="checkbox" :checked="hobbys.includes('乒乓球')" @change="changeHobby" value="乒乓球">乒乓球
<hr />
<input type="checkbox" v-model="hobbys" value="篮球">篮球
<input type="checkbox" v-model="hobbys" value="足球">足球
<input type="checkbox" v-model="hobbys" value="乒乓球">乒乓球
<p>爱好：{
{hobbys}}</p>
</div>
</body>
</html>
<script src="./js/vue2.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
hobbys: ['足球']
},
methods: {
changeHobby(e) {
// if(this.hobbys.includes(e.target.value)){
// this.hobbys = this.hobbys.filter(item=>item!=e.target.value);
// }else{
// this.hobbys.push(e.target.value);
// }
let idx = this.hobbys.indexOf(e.target.value);
if (idx == -1) {
this.hobbys.push(e.target.value);
} else {
this.hobbys.splice(idx, 1);
}
}
}
});
</script>체크박스에 사용된 v-모델(단일 체크박스)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="checkbox" :checked="isRead" @change="changeRead">已阅读协议；
<hr />
<input type="checkbox" v-model="isRead">已阅读协议；
<p>阅读协议：{
{isRead}}</p>
<hr />
<input type="checkbox" :checked="isRead2=='yes'" @change="changeRead2" true-value="yes" false-value="no">已阅读协议；
<input type="checkbox" v-model="isRead2" true-value="yes" false-value="no">已阅读协议；
<p>阅读协议：{
{isRead2}}</p>
</div>
</body>
</html>
<script src="./js/vue2.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
isRead: false,
isRead2: "no",
},
methods: {
changeRead() {
this.isRead = !this.isRead;
},
changeRead2(e) {
// this.isRead2 = (this.isRead2=='yes'?'no':'yes')
this.isRead2 = (this.isRead2 == e.target.getAttribute("true-value") ? e.target.getAttribute("false-value") : e.target.getAttribute("true-value"))
}
}
});
</script>Day03
1. 계산과 시계의 차이점
① 유사성: 둘 다 데이터 모니터링 가능
② 차이점:
1), 개념:
computed: 다른 속성 값에 의존하는 computed 속성으로, computed 값은 캐시에 저장되며, 종속 속성 값이 변경되면 computed 값이 다시 계산됩니다. 기본값은 읽기 전용(getter와 동일)입니다. 기능), getter 및 setter 기능을 설정하여 읽기 및 쓰기를 수행할 수도 있습니다.
watch: 관찰 기능에 가깝습니다. 모니터링된 데이터가 변경될 때마다 후속 작업에 대한 콜백이 실행됩니다. getter만 설정할 수 있습니다. Watch는 기본적으로 하나의 레이어만 모니터링합니다. 깊이 모니터링하려면 deep 속성을 true로 설정합니다.
2), 기능:
computed: 디스플레이에 사용되며 템플릿에서 코드의 복잡성을 줄입니다.
감시: 속성 변경 감지(이벤트와 동일), 속성 값이 변경되면 함수를 호출할 수 있습니다.
3) 종속 템플릿 호출:
computed: 템플릿에서만 사용할 수 있습니다.
watch: 템플릿에서 사용할 수 없습니다.
4) 비동기 여부:
계산됨: 비동기식은 없고 동기식만 있을 수 있습니다.
감시: 비동기일 수 있습니다.
2. 가상돔이란?
우리가 흔히 가상 노드라고 부르는 소위 가상 돔은 IS의 Object 객체를 통해 DOM의 노드를 시뮬레이션한 다음 특정 렌더링(렌더링) 방법을 통해 실제 DOM 노드로 진화시킵니다.
3. 심층 모니터링 구현 방법
① 먼저 새로운 html 프로젝트를 생성하고 프로젝트에 vue를 도입합니다.
② wue 도입 후 프로젝트에서 리스닝 객체 정의
③ 모니터링 대상을 정의한 후 감시 방식을 사용하여 전체 개체를 모니터링합니다.
④마지막으로 모니터링 이벤트를 설정한 후 이벤트에 deep 속성을 추가하고 true로 설정하여 deep 모니터링을 구현합니다.
(먼저 수신 개체를 정의하고 watch 메서드를 사용하여 전체 개체를 모니터링하고 이벤트에 deep 속성을 추가한 다음 true로 설정하여 deep 모니터링을 수행합니다.)
넷째, 필터를 이해하는 방법
필터는 특히 데이터 형식 변환에 사용됩니다. 예: 텍스트 서식 지정
① 명령 정의
1) 전역 정의: Vue.filter("필터 이름", 필터 함수(원시 데이터))
2) 로컬 정의: Vue 객체의 필터 구성 항목에 쓰기
②이용 지침:
템플릿에 사용되는 파이프 문자를 사용합니다. 원본 데이터는 파이프 기호 앞에 구부러지고 필터 호출(즉, 함수 호출) 뒤에 파이프 기호가 표시됩니다.
필터의 적용 시나리오: 일반적으로 개발 단계에는 단위 변환, 텍스트 서식 지정, 시간과 같은 많은 필터 적용 시나리오가 있습니다.
포맷 등
5. 이것에 대한 이해는 무엇입니까?
① 무엇입니까?
이것은 함수의 내장 개체입니다. 이것은 동의어입니다. this가 누구를 나타내는지는 장면(컨텍스트)에 따라 다릅니다. js에서 함수는 this의 장면입니다. 따라서 이것은 일반적으로 함수 내부에 나타납니다(사실 이 본질은 범위입니다).
② 이것의 여러 상황(정적 설명) 다음 상황에서 언급되는 기능은 비화살표 기능입니다.
1) 이것이 위치한 함수가 이벤트 처리 함수일 때 이벤트 소스를 나타냅니다.
2) this가 위치한 함수가 생성자일 때 this는 새로운 객체를 나타냅니다.
3) this의 기능이 인스턴스(오브젝트) 메소드일 때 this는 메소드를 호출하는 오브젝트를 나타냅니다.
4) 이것이 위치한 함수가 전역적으로 선언된 함수일 때,
4.1) non-strict 모드에서: 이것은 창을 의미합니다. (사실 이 점은 3번째 점과 동일합니다.) 전역 함수는 window 객체의 메서드이기 때문에
4.2), 엄격 모드에서: 이것은 정의되지 않습니다.
5) window를 의미하는 script 태그에 있다.
③ 진짜 이건 콜을 봐야 한다.
1), call, apply, bind는 이것의 포인트를 변경할 수 있습니다.
2) 이른바 생성자, new 없이도 호출할 수 있습니다.
3) 소위 전역 함수인 이벤트 속성에 할당할 수도 있습니다.
④화살표 함수에는 이것이 없습니다.
즉, 이것의 방향을 판단할 때 화살표 함수를 함수로 취급하지 마십시오.
나는 평범한 사람들에게 말하지 않습니다. 화살표 함수는 컴파일 원칙에서 어휘 분석 도메인입니다.
Day04
1. 가상 DOM과 diff 알고리즘을 어떻게 이해합니까?
흔히 가상 노드라고 부르는 소위 가상 돔은 JS Object 객체를 통해 DOM의 노드를 시뮬레이션한 다음 특정 렌더링(렌더링) 방법을 통해 실제 DOM 노드로 렌더링합니다.
① 가상 dom 및 diff 알고리즘이란 무엇입니까?
가상 DOM: 성능 향상을 위해 JSON 개체로 시뮬레이션된 실제 DOM(다시 그리기 리플로우 감소)
diff 알고리즘: 두 개의 가상 돔 간의 차이점을 비교하는 데 사용됩니다.
②단계(아이디어, 프로세스)
2.1) 두 개의 가상 DOM 트리(newVDom, oldVDom)를 생성합니다.
2.2), oldVDom과 실제 DOM은 일관성이 있습니다.
2.3) 데이터가 변경되면 newVDom에 영향(작동)
2.4) newVDom을 구동한 후 diff 알고리즘을 통해 newVDom과 oldVDom의 차이를 비교하고 oldVDom에 삭제할 노드와 추가할 노드를 표시하고 수정한다.
2.5) oldVDom에 따라 실제 DOM을 작동하여 실제 Dom과 oldVDom의 일관성을 유지합니다.
③diff 알고리즘 설명:
단계별로 newVdom의 노드를 분석하고 oldVdom에서 해당 위치를 찾고, 발견되면 다음 DOM 요소로 이동하고, 발견되지 않으면 새 노드를 의미한 다음 삽입할 새 노드를 생성합니다. 순회가 완료된 후 oldVdom에 처리되지 않은 노드가 있으면 newVdom에서 해당 노드가 삭제되었음을 의미하므로 삭제하면 됩니다.
양방향 데이터 흐름
부모 -----> 자식 데이터 전송이 가능합니다. 그 반대는 아닙니다.
Prop(property의 약자)은 단방향 바인딩입니다. 부모 구성 요소의 속성(데이터)이 변경되면 자식 구성 요소로 전송되지만 그 반대는 아닙니다. 이는 자식 구성 요소가 부모 구성 요소의 상태를 실수로 수정하는 것을 방지하여 응용 프로그램의 데이터 흐름을 이해하기 어려워지는 것을 방지하기 위한 것입니다. 또한, 부모 컴포넌트가 업데이트될 때마다 자식 컴포넌트의 모든 props가 최신 값으로 업데이트됩니다. 즉, 자식 구성 요소 내에서 소품을 변경하면 안 됩니다. 이렇게 하면 Vue가 콘솔에서 경고합니다.
요약하다:
구성 요소는 태그이고 소품은 태그의 속성입니다.
prop은 외부에서 전달되는 데이터이고, data는 컴포넌트 내부의 데이터입니다.
3. 데이터는 함수인데 vue 구성 요소의 데이터는 왜 함수입니까?
컴포넌트의 데이터 옵션은 반드시 함수여야 하며 객체(즉, vue 객체의 데이터)를 반환해야 하며, 그래야만 각 인스턴스(vue 컴포넌트 객체)가 반환된 객체의 독립적인 복사본을 유지할 수 있습니다. 그렇지 않으면 구성 요소를 재사용하면 데이터가 서로 영향을 미칩니다. 즉, 구성 요소의 범위는 독립적이어야 합니다.
간단한 대답: 함수가 아닌 경우 다중화 구성 요소의 데이터는 동일한 메모리 공간을 공유합니다.
Day06
1. 구성 요소 간의 통신:
① 친자 컴포넌트 전달값
1), 아버지 ---> 자식 패스: props, ref
ref: reference, 하위 구성 요소 개체는 ref를 통해 찾을 수 있습니다. ref는 네이티브에서 dom을 얻는 것과 동일합니다(예: getElementById) 텍스트 조각이 필요합니다: 사용자 지정 태그는 태그이고 js에서 dom을 가져오는 것은 태그를 가져오는 것입니다. 구성 요소는 dom 객체입니다.
this.$refs.sonRef;// document.getElementById("sonId");
이.$refs.sonRef를 통해 dom 객체를 얻습니다. 이는 subcomponent 객체를 얻는 것과 같습니다.
this.$refs.sonRef는 하위 구성 요소의 this와 동일합니다. [이 문장을 이해해야 함]
2), 아들 ---> 아버지 통과: 방출
② Brother 구성 요소
1), 아들1--->아버지--->아이2
2) 이벤트 버스(event-bus)
원칙: 완료하려면 vue 객체의 $on 및 $emit를 사용하십시오.
특정 방법: SonA가 SonB에게 데이터를 전송한다고 가정합니다. 새로운 빈 vue 객체를 생성합니다. SonA와 SonB에 vue 객체를 도입합니다.
$emit: 트리거 이벤트(SonA에서)
$on : 바인드 이벤트(SonB에서)
둘, ajax의 readyState 및 status
①readyState의 의미:
readyState: 요청 및 응답 프로세스의 상태(도달한 단계)를 나타냅니다.
0: 초기화되지 않음, [XMLHttpRequest 객체가 생성됨]
1: 초기화, [콜 오픈 완료]
2: 백엔드가 요청을 수신하고,
3: 백엔드가 처리 중입니다.
4: 백엔드가 다시 응답합니다.
② 상태는 무엇을 의미합니까?
status: 응답 결과에 대한 설명을 나타냅니다.
200: (성공) 서버가 요청을 성공적으로 처리했습니다. 이것은 서버가 요청된 웹 페이지를 제공했음을 의미합니다.
400: (잘못된 요청) 서버가 요청 구문을 이해하지 못했습니다.
401: (권한 없음) 요청에 인증이 필요합니다.
403: (금지됨) 서버가 요청을 거부했습니다.
404: (찾을 수 없음) 서버에서 요청한 페이지를 찾을 수 없습니다.
408: (요청 시간 초과) 요청을 기다리는 동안 서버가 시간 초과되었습니다.
500: (서버 내부 오류) 서버에 오류가 발생하여 요청을 완료할 수 없습니다.
502: (잘못된 게이트웨이) 서버가 게이트웨이 또는 프록시 역할을 하고 있으며 업스트림 서버에서 잘못된 응답을 받았습니다.
503: (Service Unavailable) 현재 서버를 사용할 수 없습니다(오버로드 또는 유지 관리를 위한 다운으로 인해). 일반적으로 이는 일시적인 상태일 뿐입니다.
504: (Gateway Timeout) 서버가 게이트웨이 또는 프록시 역할을 하지만 시간 내에 업스트림 서버로부터 요청을 받지 못했습니다.
505: (지원되지 않는 HTTP 버전) 서버가 요청에 사용된 HTTP 프로토콜 버전을 지원하지 않습니다.
3. 프로토타입 및 프로토타입 체인
① 시제품:
1) 각 생성자(클래스)는 프로토타입 속성(prototype)을 갖게 됩니다.
2) 프로토타입 속성의 목적:
모든 인스턴스가 속성과 메서드를 공유하게 하고 공유되는 것은 생성자(클래스)의 프로토타입 속성(프로토타입)에 대한 속성과 메서드입니다. 따라서 메모리가 저장됩니다. 인스턴스는 __proto__속성을 .
3) 프로토타입 속성에는 생성자(클래스) 자체를 가리키는 생성자 속성도 있습니다.
②프로토타입 체인:
객체를 사용하여 속성이나 메서드에 접근할 때 먼저 객체 자체의 메모리에서 찾아보고, 없으면 (프로토타입)이 가리키는 메모리( __proto__클래스의 프로토타입)로 가서 찾지 못하면, 그런 다음 클래스의 프로토타입 __proto__(상위 클래스의 프로토타입) 검색 등에서 항상 개체를 찾습니다. 개체가 없으면 오류가 표시됩니다(예: 정의되지 않았거나 함수가 아님 등). .).
__proto__속성 에 따른 이러한 종류의 검색은 프로토타입 체인의 검색입니다. 이것이 프로토타입 체인의 의미입니다.
Day07
1. MVC, MVP, MVVM의 이해
세 가지 모두 프로젝트 아키텍처 패턴(클래스 디자인 패턴이 아님)입니다.
①MVC：
백엔드에서 사용되는 MVC의 등장(풀스택 시대)
M: 모델, 모델:
주로 비즈니스 기능을 완성하며 , 데이터베이스 관련 프로젝트에서 데이터베이스의 추가, 삭제, 수정 및 쿼리가 모델에 속합니다(강조). (nodeJS의 db 폴더), 페이지 없음, 순수 논리
V: 보기, 보기:
주로 데이터 표시 (HTML+CSS, 동적 웹 페이지(jsp, html을 포함하는 php 파일)) 페이지 표시 및 사용자 상호 작용을 담당합니다.
C: 컨트롤러, 컨트롤러:
각 사업의 핵심 프로세스를 주로 담당하며 , 프로젝트의 라우팅 및 미들웨어에 반영됨(nodeJS의 routes 폴더)
②MVP
MVP는 MVC의 C를 P로 변경하는 것입니다. 주요 제한 사항은 M과 V가 직접 통신할 수 없다는 것입니다(서로 호출, 데이터 전송). M과 V 사이의 통신은 P를 거쳐야 합니다.
P: 발표자, 발표자
주로 M계층과 V계층을 연결하고, Model계층과 View계층 간의 상호작용을 완성하고, 비즈니스 로직을 처리하는 데 주로 사용됩니다.
③MVVM：
MVVM은 MVP의 P를 VM으로 변경하는 것입니다. 주로 MV 간의 양방향 바인딩을 반영합니다 . 보기 변경 사항은 모델에서 동기화할 수 있으며 그 반대도 가능합니다. Vue는 MVVM 프레임워크입니다. 정확히는 Vue 프레임워크를 사용하여 프로젝트를 완성할 때 MVVM 패턴을 사용합니다.
VM：뷰모델
주로 MV의 데이터 통신을 완료하며 양방향 바인딩입니다. View와 Model 간의 동기화는 사람의 개입 없이 완전히 자동으로 이루어지므로 개발자는 비즈니스 로직에만 주의하면 되고 수동으로 DOM을 조작할 필요가 없으며 데이터 상태의 동기화에 주의를 기울일 필요가 없습니다.복잡한 데이터 상태 유지 관리 통합 관리를 위해 MVVM에서 완전히 수행합니다.
둘, vue2, vue3(컴포넌트 객체) 생명주기 [네번째 차이점]
①생애주기란
Vue 객체(구성 요소)의 수명 주기는 생성, 마운트, 렌더링, 업데이트, 소멸에 이르는 일련의 프로세스입니다. 그것은 생명주기입니다.
②vue2의 라이프 사이클은 4단계와 8개의 후크 기능을 가지고 있습니다.
첫 번째 단계: 데이터 마운트 단계. 데이터 마운팅 단계는 데이터 구성 항목의 속성을 Vue 객체 자체에 마운트하는 것입니다. 그리고 하이재킹을 한다
전후 후크 기능이 있습니다: beforeCreate, created
두 번째 단계: 템플릿 렌더링 단계: 템플릿에 데이터를 렌더링(표시)합니다.
전후 후크 기능이 있습니다: beforeMount, mounted
세 번째 단계: 템플릿 업데이트 단계: 데이터(템플릿에 사용된 데이터)가 변경되면 새 데이터가 템플릿에 렌더링됩니다.
전후 후크 기능이 있습니다: beforeUpdate, 업데이트
보기 2:
네 번째 단계: 구성 요소 파괴: 전후 후크 기능이 있습니다: beforeDestroy 및 파괴
보기 3:
네 번째 단계: 컴포넌트 파괴: [vue2와 이것만 다름]
전후 후크 기능이 있습니다: beforeUnmount 및 unmounted
Day08
하나, 연결 유지
keep-alive는 구성 요소와 해당 상태(데이터)를 캐시하여 구성 요소의 빈번한 생성 및 소멸로 인한 성능 손실을 방지할 수 있습니다.
세 가지 속성이 있습니다.
① 일반적으로 라우팅 및 동적 구성 요소와 함께 사용되는 구성 요소 캐싱에 사용됩니다.
② 포함 및 제외 속성을 제공합니다. 문자 또는 정규식을 모두 지원합니다.include는 이름이 일치하는 구성 요소만 캐시된다는 의미이고 exclude는 이름이 일치하는 구성 요소는 캐시되지 않는다는 의미입니다.exclude의 우선 순위가 include보다 높습니다.이 값은 두 개의 props는
둘 다 영어 문자로 구분된 문자열, 정규 표현식 또는 이 두 가지 유형을 포함하는 배열일 수 있습니다: 구성 요소의 이름 옵션에 따라 일치하므로 구성 요소가 Keeplive 수준을 중단하려는 경우 조건부로 저장하려면 이름 옵션을 명시적으로 선언해야 합니다.
가운데
③ 활성화 및 비활성화된 2개의 후크 기능에 해당하여 구성 요소가 활성화되면 활성화된 후크 기능이 트리거되고 구성 요소가 제거되면 비활성화된 후크 기능이 트리거됩니다.
2. Vue의 부모 구성 요소 및 자식 구성 요소 수명 주기 후크 함수의 실행 순서는 무엇입니까?
Vue의 부모-자식 컴포넌트 후크 함수의 실행 순서는 4가지 부분으로 분류할 수 있습니다.
파트 1: 첫 번째 로드 렌더링
아버지 beforeCreate -> 아버지 created > 아버지 beforeMount -> 아이 beforeCreate -> 아이 created > 아이
beforeMount -> 子mounted -> 父mounted.
2부: 부모 컴포넌트가 자식 컴포넌트의 props 값을 수정하는 경우
아버지 beforeUpdate -> 아이 beforeUpdate -> 아이 updated -> 아버지 updated
3부: 상위 컴포넌트에서 수정한 데이터가 하위 컴포넌트와 관계가 없는 경우
beforeUpdate -> 상위 구성요소 업데이트에 영향을 미치지 않습니다.
4부: 파기 절차
beforeDestroy -> 아이 beforeDestroy -> 아이 destroyed -> 아버지 destroyed
Day09
1. 액시오스 요격기
①액시오스 인터셉터란?
인터셉터는 프런트엔드와 백엔드 상호작용(요청 및 응답)이 서로 도달하기 전에 호출되는 콜백 함수입니다. 모든 요청은 이 콜백 함수를 호출합니다.
② 인터셉터는 다음과 같이 나뉩니다.
요청 인터셉터: 요청이 백엔드에 도달하기 전에 호출되는 콜백 함수 응답
인터셉터: 응답이 프런트 엔드에 도달하기 전에 호출되는 콜백 함수
③ 인터셉터가 해결하는 문제:
1) 요청 인터셉터: 토큰 운반, 로드 표시, 요청 본문에 확인 추가, 요청 헤더 설정 등과 같은 요청의 모든 공용 서비스(백엔드에 도달하기 전에)를 처리할 수 있습니다. 다양한 요청 유형 등에 대해 다양한 유형의 처리를 수행합니다.
2) 응답 인터셉터: 통합 데이터 처리, 응답 오류 상태 코드, 로딩 숨김 등과 같은 모든 응답의 공용 서비스를 처리할 수 있습니다.
10일
1. $router와 $route의 차이점
① $router는 생성된 vue-router 객체인 vue-router 객체이며 이 객체에는 push( ),
바꾸기 ( ) go(), back(), forward()
② $route는 일치하는 라우팅 객체입니다. 주소 표시줄의 경로가 변경되면 라우팅 구성이 일치합니다. 그런 다음 vue-router 객체는 전달된 매개변수, 라우팅 메타 정보 등(예: 경로, 매개변수, 쿼리 등)을 포함하여 일치하는 경로의 관련 정보를 저장하기 위해 구성 요소에 $route 객체를 생성합니다.
2. 두 라우팅 모드의 차이점
① 외모의 차이 : 1), 해시는 # 2), 이력은 #없음
② 원칙의 차이:
1) 해시는 앵커 연결을 사용합니다. location.href 및 window.hashchange 이벤트는 뒤에서 사용됩니다. 앵커 연결에는 자체 기록이 있습니다.
2) history.pushState는 히스토리 뒤에 사용되어 페이지 히스토리를 기록합니다.
③ 백엔드와 관련된 차이점:
1) 해시는 백엔드와 아무 관련이 없습니다.
2) 역사는 백엔드와 관계가 있습니다. 주소 표시줄이 변경되면 브라우저는 기본적으로 서버에 요청을 보냅니다(자원 html, css, js, 서버의 api 인터페이스, 백엔드에서 렌더링된 페이지 등). 따라서 현재 백엔드가 분리되지 않은 경우: 프런트엔드 경로와 백엔드 API 또는 백엔드에서 렌더링된 페이지의 이름이 동일하지 않아야 합니다. 또한 프런트엔드와 백엔드가 분리되어 있으며 프런트엔드 서버는 index.html을 반환하도록 404 페이지를 구성해야 합니다.
3. 라우팅 매개변수
① vue-router에는 params와 query의 두 가지 매개 변수 전달 방법이 있습니다.
② 매개변수
먼저 라우팅 구성에서 동적 라우팅 일치 {경로: "/path/: 매개변수 이름", 이름: "라우팅 이름"}을 사용해야 합니다.
1) 패스(점프할 때 전송, 프로그래밍 방법은 문장과 동일)
//声明式:
1)、字符串写法
<router-link to="/路径/参数的值"></router-link>
//编程式:
this.$router.push("/user /01001");
2、对象写法
<router-link :to="{name:路由名,params:{参数名:参数值}}"></router-link>
//编程
this.$router.push({ name: user', params: { id: 01001' }})2) [루팅 컴포넌트 내부 수신]에 연결
this,$route.params,参数名③ 퀴니
1) 통과
//声明式
//1)、字符串写法:
<router-link to=路径?参数名1=参数值&参数名2=参数值2”></router-link>
//2) 对象写法:
<router-link :to="{path路径?参数名1=参数值&参数名2=参数价2}}"></router-link>
//编程式
同上2) 연결
this.$route.query.参数名11일
1. 지연 로딩 라우팅(주문형 로딩)
①이용하는 이유
서버 압력을 줄이고, 페이지 렌더링 속도를 높이고, getter 메서드에서 객체를 인스턴스화하고, 임무를 수행하고, 결합을 줄입니다.
② 무엇인가
레이지 로딩은 실제로 지연된 로딩, 즉 객체를 사용해야 할 때 관련 객체를 로드하는 것입니다.
③솔루션
-
vue 비동기 컴포넌트
-
es의 import()
-
웹팩의 require.ensure()
2. 루트 가드
①루팅가드란
구성 요소의 점프를 제어하고 특정 경로의 해당 구성 요소에 들어갈 수 있는지 여부를 제한합니다. 비즈니스 논리를 기반으로 구성 요소에 액세스할 수 있는지 여부를 결정합니다.
② 루팅가드의 분류는?
1) 글로벌 가드
1.1), 프리훅: beforeEach
1.2), 포스트 훅: afterEach
2) 루트 전담경비
2.1), 사전만 해당: beforeEnter
3) 구성 요소 내부 가드
3.1), 사전: beforeRouteEnter
3.2), 경로 업데이트, 구성요소 재사용: beforeRouteUpdate
3.3), 떠나다: beforeRouteLeave
③라우팅 후크 기능의 매개변수:
to: (라우팅 객체 정보) 대상으로 점프할 경로
from: 경로의 소스(라우팅 객체 정보)
next: 경로가 정상적으로 점프하고 전환할 수 있도록 하려면 함수 본문에 next()가 필요합니다. next(false)는 그대로 유지됩니다.
12일
1. 뷰엑스
①vuex란?
Vuex는 구성 요소 간의 데이터 공유(구성 요소의 통신)를 완료할 수 있는 상태(데이터) 관리 도구입니다.
②vuex의 역할
1) vuex는 전체 애플리케이션에 대한 글로벌 데이터(데이터 웨어하우스)를 저장할 수 있습니다.
2) vuex로 저장한 데이터는 반응형
3) vuex에 의해 저장된 데이터는 상태 변화를 추적 할 수 있습니다.
③Vuex(핵심 개념) 구성 항목:
1) 상태 : vue 구성 요소의 데이터와 동일한 모든 공유 데이터를 저장하는 데이터 웨어하우스
2) Getters: state 기반으로 파생된 , vue 구성 요소에서 계산된 것과 동일
3), Mutations: 상태 데이터를 수정할 때 추적 상태 와 관련된 mutation을 사용하고 동기 코드만 가질 수 있습니다.
4), 액션: 뮤테이션에는 동기 코드만 있을 수 있고 액션에는 비동기 코드가 있을 수 있는 문제 해결
5), 모듈: 모듈
④Vuex 데이터 흐름
vue 컴포넌트는 (dispatch) action 을 발송합니다 . action 에 뮤테이션을 제출( commit)하고, 뮤테이션에서 state의 데이터를 수정 (mutate) 하고, state 의 숫자가 수정된 후 템플릿에 반응하여 렌더링됩니다.
⑤모듈화 사용 방법
1) 프로젝트가 비교적 큰 경우 모든 전역 데이터가 상태에 저장되어 매우 혼란스러울 것입니다. 어떻게 해야 합니까? 모듈을 사용하여 다양한 범주, 즉 모듈화에서 데이터를 처리합니다. 각 모듈은 독립적인 저장소입니다. 그런 다음 전체 저장소에서 모든 하위 모듈 저장소를 가져옵니다.
2) (getters, mutations, actions)의 중복 이름을 해결하는 방법
2.1), 네임스페이스: 참
2.2) 모듈에서 게터, 돌연변이 및 액션을 사용할 때 모듈 이름을 모듈 앞에 추가해야 합니다.
체재:
模块名/getters或者mutations或者actions的名字⑥보조 기능:
mapState, mapGetters, mapMutations, mapActions
1), 기능:
간소화된 코드: 구성 요소에서 $store를 사용할 필요가 없습니다.
2) 특정 용도:
mapState, mapGetters는 구성 요소의 계산에 매핑됩니다.
mapMutations, mapActions는 구성 요소의 메서드에 매핑됩니다.
13일
$nextTick의 실현 원칙:
①Vue.nextTick()을 사용하는 이유
첫째, JS는 단일 스레드이므로 비동기 작업을 어떻게 처리합니까?
모든 동기화 작업은 기본 스레드에서 실행되어 실행 스택을 형성합니다.
메인 스레드 외부에는 작업 대기열이 있을 것입니다.비동기 작업에 결과가 있는 한 이벤트는 작업 대기열(이벤트 대기열이라고도 함)에 배치되고 대기열에 추가됩니다(대기 상태).
실행 스택의 모든 동기 태스크가 실행되면 태스크 큐(이벤트 큐)의 태스크(이벤트)가 읽혀집니다. 즉, 태스크 큐의 태스크는 대기 상태를 종료하고 실행 스택에 들어갑니다.
메인 스레드는 세 번째 단계를 계속 반복합니다. 태스크 큐와 실행 스택의 코드가 실행될 때까지.
이벤트 루프 이해: javascript 이벤트 루프(이벤트 루프) - jiang7701037의 블로그 - CSDN 블로그
둘째 , vue는 DOM의 아이디어를 업데이트합니다. 비동기 업데이트 큐가 사용되므로 이벤트 루프가 사용됩니다. 목적은 성능을 개선하고 불필요하게 반복되는 DOM 업데이트를 방지하는 것입니다. 즉, 데이터가 vue에서 업데이트된 후 DOM은 즉시 업데이트되지 않지만 데이터로 인한 DOM 업데이트는 비동기 업데이트 대기열에 놓입니다. 다음 이벤트 루프(틱)를 기다리고 두 틱 사이에 UI를 렌더링합니다. 이와 같이 프로그래머는 데이터를 변경한 후 즉시 업데이트된 DOM을 얻을 수 없으며 언제 DOM을 업데이트할 수 있는지 알 수 없습니다. 이를 바탕으로 vue는 nextTick 함수를 제공합니다. 프로그래머는 업데이트된 DOM을 조작하기 위한 코드를 nextTick의 콜백 함수에 넣습니다. DOM 업데이트 후 nextTick에 의해 호출되는 콜백 함수. 샘플 코드:
this.msg = "hello"
this.$nextTick(()=>{
操作更新后DOM的代码。
});②Vue.nextTick()이란?
Vue.nextTick의 코드 아이디어
function nextTick(cb){
//DOM 更新
cb();
}그렇다면 vue는 DOM이 업데이트되었음을 어떻게 알 수 있을까요?
MutationObserver: HTML5용 새 API입니다. DOM 객체에 발생하는 자식 노드 삭제, 속성 수정, 텍스트 내용 수정 등을 모니터링할 수 있는 DOM 변경 모니터링을 위한 인터페이스
또한 마이크로 작업이 매크로 작업보다 시간이 덜 걸린다는 점을 고려하면 브라우저 호환성도 있습니다. 따라서 vue에서 지연된 호출의 우선 순위는 다음과 같습니다. Promise > MutationObserver > setImmediate > setTimeout
③응용 시나리오:
답변: "데이터 업데이트의 영향을 받는 (신규) dom"을 작동해야 하는 경우 $nextTick()을 사용하십시오. 또한 $nextTick()은 데이터가 업데이트된 직후에 호출되어야 합니다.
다른 말로 하면 dom을 조작해야 할 때이며, dom은 데이터가 업데이트(수정)된 후 다시 렌더링되는 dom입니다.
$nextTick(cb);는 이렇게 생각하시면 됩니다.
SPA의 이해
①Single Page Application의 개념
SPA: 단일 페이지 애플리케이션, 단일 페이지 애플리케이션.
즉, 전체 프로젝트에 하나의 html 페이지(파일) 만 존재하며 , 최초 로딩 시 html, css, js가 모두 로딩됩니다. DOM을 삭제하고 생성(추가)하면 페이지 전환이 완료됩니다.
②단일 페이지 적용의 장단점
이점:
1) 단일 페이지 애플리케이션은 서버보다 부담이 적습니다. [왜냐하면 처음으로 또는 HTML, CSS 및 JS가 로드되는 한 페이지 전환은 HTML, CSS 및 JS를 요청하기 위해 서버로 이동할 필요가 없기 때문입니다]
2) 부분 새로 고침이므로 사용자 경험이 좋습니다. [DOM 삭제, 추가, 수정하여]
3) 전단과 후단의 분리
4) 페이지 효과가 더 멋집니다(예: 페이지 콘텐츠를 전환할 때 전환 애니메이션).
결점:
1) SEO(검색 엔진 최적화)에 도움이 되지 않습니다. 예: Baidu, 360 및 기타 검색 엔진 포함.
2) 최초 로딩 시 시간이 많이 소요됨 (경로 지연 로딩으로 해결 가능)
3) 내비게이션이 불가능하며, 부득이하게 내비게이션을 해야 하는 경우 직접 앞뒤로 인식해야 합니다(vue-router가 준비되어 있습니다). 페이지의 복잡성이 많이 증가했습니다.
4) CSS 명명 충돌을 일으키기 쉽습니다. [범위 지정 또는 BEM을 사용하여 해결]