시리즈 기사 디렉토리
기사 디렉토리
1. 뷰 고급 기능
1. 동적 구성 요소
- 알 수 없는 순서로 구성 요소 렌더링
이미지 출처: https://coding.imooc.com/lesson/419.html#mid=33846
예: 동적 구성요소 사용
index.vue 상위 구성 요소
- 데이터에서 구성 요소 이름 수신
<component>구성 요소 를:is="xxx"바인딩 하여
<template>
<div>
<p>vue 高级特性-动态组件</p>
<hr />
<component :is="NextTick"></component>
</div>
</template>
<script>
import NextTick from "./NextTick.vue";
export default {
components: {
NextTick },
data() {
return {
NextTick
};
},
};
</script>
예: 여러 구성 요소를 동적으로 렌더링
index.vue 상위 구성 요소
<template>
<div>
<p>vue 高级特性-动态组件</p>
<hr />
<div v-for="(val, key) in newsData" :key="key">
<component :is="val.type"></component>
</div>
</div>
</template>
<script>
import myText from './myText'
import myImage from './myImage'
export default {
components: {
myText,
myImage
},
data() {
return {
newsData: {
1: {
type: 'myText'
},
2: {
type: 'myImage'
}
}
};
},
};
</script>
myText 하위 구성 요소
<template>
<div>
<p>我是 myText 组件</p>
---------------------
</div>
</template>
myImage 자식 구성 요소
<template>
<div>
<p>我是 myImage 组件</p>
<img src="xxx">
</div>
</template>
2. Vue는 구성 요소를 비동기식으로 로드합니다.
- 가져오기() 함수
- 요청 시 로드, 대규모 구성 요소를 비동기식으로 로드
예: 구성 요소를 비동기식으로 로드(요청 시 로드, 사용되는 경우에만)
index.vue 상위 구성 요소
- 구성 요소 필요에 따라 구성 요소 가져오기
<template>
<div>
<my-image v-if="showImage" />
<button @click="showImage = true">点我显示</button>
</div>
</template>
<script>
export default {
components: {
myImage: () => import("./myImage"),
},
data() {
return {
showImage: false,
};
},
};
</script>
myImage.vue 자식
<template>
<div>
<p>我是 myImage 组件</p>
<img src="xxx">
</div>
</template>
3. Vue 캐시 구성 요소(연결 유지)
- 캐시 구성 요소
- 잦은 전환, 다시 렌더링할 필요 없음
- Vue 성능 최적화 방법
예: 연결 유지 인스턴스, 현재 구성 요소는 다른 구성 요소를 전환할 때 파괴되지 않습니다.
KeepAlive.vue 상위 구성 요소
- A, B, C 3개의 하위 구성요소 가져오기
- 버튼을 클릭하면 해당 구성 요소의 내용이 표시됩니다.
<template>
<div>
<button @click="changeState('A')">A</button>
<button @click="changeState('B')">B</button>
<button @click="changeState('C')">C</button>
<keep-alive>
<keep-alive-state-a v-if="state === 'A'"></keep-alive-state-a>
<keep-alive-state-b v-if="state === 'B'"></keep-alive-state-b>
<keep-alive-state-c v-if="state === 'C'"></keep-alive-state-c>
</keep-alive>
</div>
</template>
<script>
import KeepAliveStateA from "./KeepAliveStateA.vue";
import KeepAliveStateB from "./KeepAliveStateB.vue";
import KeepAliveStateC from "./KeepAliveStateC.vue";
export default {
components: {
KeepAliveStateA,
KeepAliveStateB,
KeepAliveStateC,
},
data() {
return {
state: "A",
};
},
methods: {
changeState(state) {
this.state = state;
},
},
};
</script>
KeepAliveStateA.vue 하위 구성 요소
<template>
<div>
<p>state A</p>
</div>
</template>
<script>
export default {
mounted() {
console.log("A mounted");
},
destroyed() {
console.log("A destroyed");
},
};
</script>
KeepAliveStateB.vue 하위 구성 요소
<template>
<div>
<p>state B</p>
</div>
</template>
<script>
export default {
mounted() {
console.log("B mounted");
},
destroyed() {
console.log("B destroyed");
},
};
</script>
KeepAliveStateC.vue 자식 구성 요소
<template>
<div>
<p>state C</p>
</div>
</template>
<script>
export default {
mounted() {
console.log("C mounted");
},
destroyed() {
console.log("C destroyed");
},
};
</script>
4. 믹스인
- 여러 구성 요소가 동일한 논리를 가지고 추출됩니다.
- mixin은 완벽한 솔루션이 아니며 몇 가지 문제가 있습니다.
- Vue3에서 제안하는 Composition API는 이러한 문제를 해결하는 것을 목표로 합니다.
믹스인의 몇 가지 문제
(1) 변수의 출처가 불분명하여 읽기에 적합하지 않음
(2) 여러 믹스인이 이름 충돌을 일으킬 수 있음
(3) 믹스인과 구성 요소 사이에 다대다 관계가 있을 수 있으며 복잡성이 높음
예: 믹스인 사용
MixinDemo.vue 猄件
- 먼저
mixin.js파일 mixins: [xxx]그걸 써
<template>
<div>
<p>{
{
name }} {
{
major }} {
{
city }}</p>
<button @click="showName">显示姓名</button>
</div>
</template>
<script>
import myMixin from "./mixin";
export default {
mixins: [myMixin],
data() {
return {
name: "杂货铺",
major: "web 前端",
};
},
mounted() {
console.log("component mounted", this.name);
},
};
</script>
mixin.js 파일
- mixin.js의 값과 메서드는 이를 참조하는 구성 요소에서 직접 사용할 수 있습니다.
export default {
data() {
return {
city: "北京",
};
},
methods: {
showName() {
console.log("点击显示名字：", this.name);
},
},
mounted() {
console.log("mixin mounted", this.name);
},
};
2. 뷰엑스
1. Vuex의 기본 개념
- 상태
- 게터
- 동작
- 돌연변이
2. Vue 구성 요소의 경우
- 보내다
- 저지르다
- 지도 상태
- 맵게터
- 맵액션
- 맵돌연변이
세, Vue-router
- 라우팅 모드(해시, H5 기록)
- 라우팅 구성(동적 라우팅, 지연 로딩)
- http://abc.com/#/user/10과 같은 해시 모드(기본값)(해시 모드는 일반적으로 선택됨)
- H5 기록 모드(기본값), 예: http://abc.com/user/10(서버 측 지원 필요)
1. 동적 라우팅
const User = {
// 获取参数，如 10 20
template: '<div>User {
{ $router.params.id }} </div>'
}
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头。能命中 `/user/10` `/user/20` 等格式的路由
{
path: '/user/:id', component: User}
]
})
2. 레이지 로딩
- 주문형 도입, 지연 로딩 실현
export default new VueRouter({
routes: [
{
path: '/',
component: () => import('./components/xxx')
}
]
})
不积跬步无以至千里 不积小流无以成江海
팔로우하고 길을 잃지 말고 업데이트를 계속하려면 클릭하십시오 ...