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月前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
97 3
|
4月前
|
前端开发 JavaScript 测试技术
前端工程化:构建高效、可维护的现代Web应用
【10月更文挑战第5天】前端工程化:构建高效、可维护的现代Web应用
|
4月前
|
前端开发 测试技术 持续交付
前端工程化:构建高效、可维护的现代Web应用
【10月更文挑战第5天】前端工程化:构建高效、可维护的现代Web应用
|
3月前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
3月前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
3月前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
59 3
|
3月前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
100 2
|
3月前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
61 4
|
4月前
|
存储 JavaScript 前端开发
深入探索 Vue.js:构建现代 Web 应用的利器
【10月更文挑战第11天】深入探索 Vue.js:构建现代 Web 应用的利器
62 1
|
4月前
|
JavaScript 前端开发 网络架构
如何使用Vue.js构建响应式Web应用
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用

热门文章

最新文章

  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    23
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    43
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    24
  • 4
    巧用通义灵码,提升前端研发效率
    84
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    137
  • 6
    详解智能编码在前端研发的创新应用
    92
  • 7
    智能编码在前端研发的创新应用
    75
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    35
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    110
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    73