Series Article Directory
| content | Reference link |
|---|---|
| Basic use of Vue | The basic use of Vue (one article to master the most basic knowledge points of Vue) |
| Vue communication and advanced features | Communication between Vue components and advanced features (communication between various components, custom v-model, nextTick, slots) |
| Vue advanced features | Advanced features of Vue (dynamic components, asynchronous loading, keep-alive, mixin, Vuex, Vue-Router) |
| Vue Principle 1 | Vue principle (understanding MVVM model, in-depth / monitoring data changes, monitoring array changes, in-depth understanding of virtual DOM) |
| Vue Principle 2 | Vue principle (diff algorithm, template compilation, component rendering and updating, JS implementation routing) |
| Vue Interview Questions | Web front-end interview high-frequency test site - Vue interview questions |
Article directory
1. Vue advanced features
1. Dynamic components
- Render components in unknown order
Image source: https://coding.imooc.com/lesson/419.html#mid=33846
Example: Use of Dynamic Components
index.vue parent component
- Receive component name in data
<component>By:is="xxx"binding components in
<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>
Example: Dynamically Rendering Multiple Components
index.vue parent component
<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 subcomponent
<template>
<div>
<p>我是 myText 组件</p>
---------------------
</div>
</template>
myImage child component
<template>
<div>
<p>我是 myImage 组件</p>
<img src="xxx">
</div>
</template>
2. Vue loads components asynchronously
- import() function
- Load on demand, load large components asynchronously
Example: load components asynchronously (load on demand, only when used)
index.vue parent component
- components import components as needed
<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 child group
<template>
<div>
<p>我是 myImage 组件</p>
<img src="xxx">
</div>
</template>
3. Vue cache component (keep-alive)
- cache component
- Frequent switching, no need to re-render
- A method for Vue performance optimization
Example: keep-alive instance, the current component will not be destroyed when switching other components
KeepAlive.vue parent component
- Import A, B, C three sub-components
- Click the button to display the content of the corresponding component
<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 child component
<template>
<div>
<p>state A</p>
</div>
</template>
<script>
export default {
mounted() {
console.log("A mounted");
},
destroyed() {
console.log("A destroyed");
},
};
</script>
KeepAliveStateB.vue child component
<template>
<div>
<p>state B</p>
</div>
</template>
<script>
export default {
mounted() {
console.log("B mounted");
},
destroyed() {
console.log("B destroyed");
},
};
</script>
KeepAliveStateC.vue child component
<template>
<div>
<p>state C</p>
</div>
</template>
<script>
export default {
mounted() {
console.log("C mounted");
},
destroyed() {
console.log("C destroyed");
},
};
</script>
4. mixins
- Multiple components have the same logic and are extracted
- mixin is not a perfect solution, there will be some problems
- The Composition API proposed by Vue3 aims to solve these problems
Some problems with mixins
(1) The source of variables is unclear, which is not conducive to reading
(2) Multiple mixins may cause naming conflicts
(3) There may be a many-to-many relationship between mixins and components, and the complexity is high
Example: Using mixins
MixinDemo.vue pairs
- Import the
mixin.jsfile mixins: [xxx]use it
<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 file
- The values and methods in mixin.js can be used directly in components that reference it
export default {
data() {
return {
city: "北京",
};
},
methods: {
showName() {
console.log("点击显示名字：", this.name);
},
},
mounted() {
console.log("mixin mounted", this.name);
},
};
2. Vuex
1. Basic concepts of Vuex
Vuex basic concept reference link
- state
- getters
- action
- mutation
2. For Vue components
Vuex reference link for Vue components
- dispatch
- commit
- mapState
- mapGetters
- mapActions
- mapMutations
3. Vue-router
Vue-router uses reference links
- Routing mode (hash, H5 history)
- Routing configuration (dynamic routing, lazy loading)
- hash mode (default), such as http://abc.com/#/user/10 (hash mode is generally selected)
- H5 history mode (default), such as http://abc.com/user/10 (requires server-side support)
1. Dynamic routing
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. Lazy loading
- Introduce on demand, realize lazy loading
export default new VueRouter({
routes: [
{
path: '/',
component: () => import('./components/xxx')
}
]
})
不积跬步无以至千里 不积小流无以成江海
Click to follow and don't get lost, continue to update...