乐趣区

关于vue.js:vue面试题

jiezi

一、生命周期

二、组件首次渲染时，哪些生命周期被执行

beforecreate,created,beforemount,mounted, 如果有 keep-alive, 减少 activated

三、组件缓存 keep-alive

同一个组件再次进入时，组件会缓存，只执行一个生命周期：activated
用 <keep-alive></keep-alive> 包裹组件

<keep-alive>
        <component :is="currentComponent"></component>
    </keep-alive>

四、v-if 和 v -show 的区别

v-if：dom 节点的创立和删除，性能耗费较大
v-show：display：block/none, 管制显示暗藏。不占地位会造成重绘和回流，相比 v -if 性能耗费较小。

五、v-if 和 v -for 的优先级：v-for 的优先级更高

是在源码中体现的：function getElement

六、ref 是什么

获取 dom 节点

<div ref="abd">
mounted(){console.log(this.$refs.abd);
        }
this.$ref.childComponent.show()  // 调用子组件的 show 办法

七、nextTick 是什么

获取更新后的 dom

应用场景：（1）在 nextTick 里调用插件，避免数据变更 dom 更新后，插件未更新到最新的 dom

（2）dom 节点的数据变更后，须要获取 dom 内容，要用 nextTick

八、scoped 原理

款式只在本组件中失效，<style scoped>
原理：给节点加了一个自定义属性，而后依据属性选择器增加款式
scss 的款式穿透: 父元素 /deep/ 子元素，如下：

九、组件传值

父传子：自定义属性，props 接管
子传父：$emit 自定义事件，通过事件参数传值，
兄弟组件：
（1）vue2
bus.js

import Vue from 'vue';
export default new Vue

A 组件

import bus from './bus.js'
bus.$emit("transfer","params")

B 组件

import bus from './bus.js'
bus.$on("transfer",(data)=>{console.log(data)
})

(2)vue3
装置 mitt

npm install --save mitt

mitt.js

import mitt from 'mitt'
export default new mitt()

A 组件

import mitt from '../common/bus'
mitt.emit("transferValue",this.msg)

B 组件

import mitt from '../common/bus'
mitt.on("transferValue",(data)=>{this.msg = data})

provide-inject 组件间的数据穿透

A 组件：

        provide(){
            return {webName: this.teacher}
        },

B 组件：

 inject:['webName']

如果心愿 provide 传的数据变动，接管组件该数据跟着变动，两种形式：
（1）、把根本数据类型改成援用数据类型
（2）、利用 computed 属性

 import {computed} from '@vue/reactivity'
 provide(){
            return {webName: computed(()=>{this.teacher})
            }
        },

main.js
app.config.unwrapInjectedRef = true

十、computed,watch,methods 的区别

computed: 有缓存，计算某一个属性的扭转，如果某一个值发生变化，会监听到并返回
methods: 没有缓存
watch：监听以后数据扭转了，才会执行外部代码

十一、搭建后端目录

npm install express-generator -g
进入我的项目 -> express –view=ejs server
cd server
cnpm i
npm start

十二、解决申请跨域问题

vue2 在 vue.config.js 中来配置

module.exports{
     devServer:{proxy: 'localhost:3000'}
}

vue3 在 vite.config.js 中的 devServer.proxy 选项来配置

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],
  server:{
    proxy: {'/home':'http://localhost:3001/',}
  }
})

十三设置代理，打包呈现空白页的问题如何解决

十四、路由模式

history，不带“#”
hash 带“#”
默认是 hash 模式
打包页面呈现空白的问题，把 history 改成 hash 就能够解决

十五、props 和 data，谁的优先级更高

props=>methods=>data=>computed=>watch

十六、vuex

1、vuex 有哪些属性

2、vuex 是单向数据流还是双向数据流

3、mutations 和 actions 的区别

4、如果做长久化存储

十七、碰到的难点

打包呈现空白页
刷新后，页面门路问题

十八、插槽

（1）根本应用：
子组件应用 <slot></slot> 来占位，
父组件调用子组件时，外面的内容就放在 <slot></slot> 里。
（2）作用域：
应用父组件的作用域
（3）插槽的后备内容：
子组件应用 <slot> 内容 </slot>
（4）具名插槽
子组件：

 <header>header<slot name="header"/></header>
 <main>main<slot name="main"/></main>
 <footer>footer <slot name="footer"/></footer>

父组件

<template #header>  // 插槽的简写：# 
        <div style="color:blue"> 社区帖子 </div>
    </template>
    <template v-slot:main> 后蹲人是一个主张友、分享、自在的技术交换社区 </template>
    <template v-slot:footer> 后盾人 人人做后盾 </template>

十八、全局组件注册

main.js

import {createApp} from 'vue'
import App from './App.vue'
import Card from './provide-inject/Card.vue' // 注册全局组件
const app = createApp(App);
app.component('Card',Card);
app.mount('#app')

在其余组件中不需在引入和注册，间接用 <Card /> 就能够了

退出移动版