web前端面试高频考点——Vue的高级特性(动态组件、异步加载、keep-alive、mixin、Vuex、Vue-Router)

简介: web前端面试高频考点——Vue的高级特性(动态组件、异步加载、keep-alive、mixin、Vuex、Vue-Router)

一、Vue高级特性

1、动态组件

  • 按未知顺序渲染组件

图片出处:https://coding.imooc.com/lesson/419.html#mid=33846

75063757ccb64eb080586aa8c2ad7e73.png

示例:动态组件的使用

index.vue 父组件

  • 在 data 中接收组件名
  • 在 <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>

7e51145b15b04a9eb531875848d7903c.png

示例:动态渲染多个组件

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>

bef7a176e9164e2fbe968cd451ca268f.png

2、vue异步加载组件

  • import() 函数
  • 按需加载,异步加载大组件

示例:异步加载组件(按需加载,用的时候才加载)

index.vue 父组件

  • components 里面按需引入组件
<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>

a39e3676cb40435d91e9265f32584020.png

3、vue缓存组件(keep-alive

  • 缓存组件
  • 频繁切换,不需要重复渲染
  • Vue性能优化的一种方法

示例:keep-alive 实例,切换其他组件当前组件不会被销毁

KeepAlive.vue 父组件

  • 导入 A,B,C 三个子组件
  • 点击按钮显示对应组件的内容
<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>

20761ccba9874de1b4bfe94fafbaadad.png

8bdb6d319bc343d480b786d37bfa0f9f.png

4、mixin

多个组件有相同的逻辑,抽离出来

mixin 并不是完美的解决方案,会有一些问题

Vue3 提出的 Composition API 旨在解决这些问题

mixin 的一些问题


(1)变量来源不明确,不利于阅读

(2)多个 mixin 可能会造成命名冲突

(3)mixin 和组件可能出现多对多的关系,复杂度较高


示例:使用 mixin

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);
  },
};

1cc4cdb2f17f48b891e9d5d0182e655c.png

二、Vuex

1、Vuex基本概念

Vuex基本概念参考链接


state

getters

action

mutation

2、用于Vue组件

用于Vue组件的Vuex参考链接


dispatch

commit

mapState

mapGetters

mapActions

mapMutations

03127d11753045ce9d6a6c6c9e22fb54.png

三、Vue-router

Vue-router 使用参考链接


路由模式(hash、H5 history)

路由配置(动态路由、懒加载)

hash 模式(默认),如 http://abc.com/#/user/10(一般选择 hash 模式)

H5 history 模式(默认),如 http://abc.com/user/10(需要 server 端支持)

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')
    }
  ]
})

不积跬步无以至千里 不积小流无以成江海

相关文章
|
3天前
|
前端开发 API 数据安全/隐私保护
Web前端开发中的跨域资源共享(CORS)解决方案
【2月更文挑战第5天】在Web前端开发中,跨域资源共享(CORS)是一个常见的挑战。本文将探讨CORS的概念和原理,并介绍一些常用的解决方案,包括服务器端配置和前端处理方法,帮助开发者更好地应对跨域请求问题。
32 4
|
7天前
|
开发框架 前端开发 JavaScript
从前端到后端——完整的Web开发指南
【2月更文挑战第1天】Web开发已经成为了现代软件开发中不可或缺的一部分。无论是前端还是后端,都扮演着重要的角色。本文将从前端到后端,介绍完整的Web开发流程和技术栈,帮助初学者快速入门Web开发。
|
2天前
|
编解码 前端开发 UED
Web前端开发中的响应式设计技巧
【2月更文挑战第6天】在当今互联网快速发展的时代,网站的响应式设计已经成为Web前端开发的重要一环。本文将介绍一些实用的响应式设计技巧,帮助开发者更好地应对不同屏幕尺寸和设备的挑战,提升用户体验。
17 1
|
16小时前
|
前端开发 数据可视化 JavaScript
前端图形学实战: 从零开发一款轻量级滑动验证码组件(vue3 + vite版)
前端图形学实战: 从零开发一款轻量级滑动验证码组件(vue3 + vite版)
5 0
|
18小时前
|
前端开发 JavaScript API
前端秘法番外篇----学完Web API,前端才能算真正的入门
前端秘法番外篇----学完Web API,前端才能算真正的入门
|
1天前
|
JSON 前端开发 安全
Web前端开发中的跨域问题及解决方案
【2月更文挑战第8天】在Web前端开发中,跨域是一个常见且具有挑战性的问题。本文将深入探讨跨域产生的原因、影响以及多种解决方案,帮助开发者更好地理解和解决跨域问题。
|
3天前
|
前端开发 JavaScript UED
Web前端开发中的关键技术趋势
【2月更文挑战第5天】 随着互联网技术的不断发展,Web前端开发也在不断演进。本文将探讨当前Web前端开发中的关键技术趋势,包括响应式设计、前端框架、PWA等方面的发展现状和未来趋势,并分析它们对Web应用开发的影响。
|
5天前
|
存储 前端开发 搜索推荐
前端开发中值得关注的三个Web API
【2月更文挑战第4天】Web API是前端开发中非常重要的一部分,它们为开发者提供了众多的功能和特性,帮助我们构建更加高效、优美的Web应用。本文将介绍三个值得关注的Web API,包括Web Storage、Geolocation和Web Notifications,希望能够对前端开发者有所帮助。
|
7天前
|
JSON 前端开发 JavaScript
从前端到后端——Web开发的全流程解析
【2月更文挑战第2天】Web开发涉及多个方面,从前端设计到后端实现,需要开发者具备一定的技术能力和知识储备。本文将以一个简单的Web应用为例,详细介绍Web开发的全流程。
|
缓存 JavaScript 前端开发
前端—vue学习
一. vue.js简介
150 0

相关产品

  • 云迁移中心