一、生命周期

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

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 />就能够了