关于生命周期

1.1 生命周期有哪些?发送请求在created还是mounted?

请求接口测试:https://fcm.52kfw.cn/index.php? mall id=l&r=api/default/district

Vue2.x系统自带有8个

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

发送请求在created还是mounted?

这个问题具体要看项目和业务的情况了，因为组件的加载顺序是，父组件引入了子组件，那么先执行父的前3个生命周期，再执行子的前4个生命周期，那么如果我们的业务是父组件引入子组件，并且优先加载子组件的数据，那么在父组件中当前的请求要房mounted中，如果当前组件没有依赖关系那么放在哪个生命周期中请求都是可以的。

1.2 为什么发送请求不在beforecreate里?beforeCreate和created有什么区别?

为什么发送请求不在beforeCreate里?

因为:如果请求是在methods封装好了，在beforecreate调用的时候，beforecreate阶段是拿不到methods里面的方法的(会报错了)。

beforeCreate和created有什么区别?

beforeCreate没有$data，created中有$data
created是可以拿到methods的方法的beforecreate拿不到methods的方法

1.3 在created中如何获取dom

只要写异步代码，获取dom是在异步中获取的，就可以了。
1.只要写异步代码，获取dom是在异步中获取的，就可以了。例如:setTimeout、请求、Promise.xxx(y)等等...
2.使用vue系统内置的this.$nexTick

1.4 一旦进入组件会执行哪些生命周期?

beforeCreate
created
beforeMount
mounted

1.5 第二次或者第N次进去组件会执行哪些生命周期?

如果当前组件加入了keep·alive，只会执行一个生命周期 ativated

如果没有加入keep·alive

    beforeCreate
    created
    boforeMount
    mounted

1.6 父组件引入子组件，那么生命周期执行的顺序是?

父:beforeCreate、created、beforeMount(都没DOM,但后两个有data)
子:beforeCreate、created、beforeMount、mounted
。。。。
父:mounted

1.7 加入keep-alive会执行哪些生命周期?如果使用了keep-alive组件，当前的组件会额外增加2个生命周期(系统8+2)

activated
deactivated

如果当前组件加入了keep-alive第一次进入这个组件会执行5个生命周期

beforeCreate
created
beforeMount
mounted
activated

1.8 你在什么情况下用过哪些生命周期?说一说生命周期使用场景

created ==> 单组件请求
mounted ==>同步可以获取dom，如果先子组件请求后父组件请求
actived ==>判断id是否相等，如果不相同发起请求activatedEe2>
destroyed ==>关闭页面记录视频播放的时间，初始化的时候从上一次的历史开始播放

组件

2.1组件传值(通信)的方式

父传后代(后代拿到了父的数据)

1.父组件引入子组件，绑定数据<List :strl='strl'></List>
    子组件通过props来接收
    PrOps :{
    str1:{
    type:string,
    default;"
    }}这种方式父传子很方便，但是父传给孙子辈分的组件就很麻烦(父-》子=》孙)。 这种方式:子不能直接修改父组件的数据
2、子组件直接使用父组件的数据
    子组件通过:this.sparent.xxx使用父组件的数据。 这种方式:子可以直接修改父组件的数据
3.依赖注入
    优势:父组件可以直接向某个后代组件传值(不让一级一级的传递)

后代传父(父拿到了后代的数据)

1.于组件传值给父组件子组件定义自定义事件 this. $emit 2.父组件直接修改到子组件的数据<list ref'child'></list>this.$ refs.child

平辈之间的传值(兄弟可以拿到数据)

通过bus.js this. $emit bus.$ on

2.2 父组件直接修改子组件的值

<List ref='child'></Liat>
this.srefs.ahild.xxx=“YYYy'

2.3 子组件如何直接修改父组件的值

子组件中可以使用:this.$parent.xxx去修改

2.4 如何找到父组件

this.$párent

2.5 如何找到根组件

this.$root

2.6 keep-alive

keep-alive是什么缓存当前组件

2.7 slot

匿名插槽 :插槽没有名字
具名插槽 :插槽有名字
作用域插槽: 传值

2.8 provide/inject

provide/inject===>依赖注入

2.9 如何封装组件

3.关于Vuex

3.1 Vuex有哪些属性

state ==> 全局共享状态 getter ==> 针对state数据的二次计算 mutations ==> actions ==> modules ==> 把vuex再次进行模块划分

3.2 Vuex使用state值

this.$store.xxx 辅助函数 mapState

以上俩种方式都可以拿到state的值，那么区别是什么?

使用this.$store.state.xxx是可以直接修改 vuex的state数据的使用辅助函数的形式，是不可以修改的

3.3 Vuex的getters值修改

面试官可能会这样问:组件使用了getters中的内容，组件使用采用v-model的形式会发生什么?
getters是不可以修改的

3.4 Vuex的mutations和actions区别

相同点:mutations和actions都是来存放全局方法的，这个全局方法return的值拿不到
区别:
mutations ==》同步
actions 返回的是一个romise对象，他可以执行相关异步操作

3.5 Vuex持久化存储 :在页面使用了state值:1，然后把1修改成2，然后刷新页面又回到了1为什么?

vuex本身不是持久化存储的数据。vuex是一个状态管理仓库(state:全局属性)==》就是存放全局属性的地方。
实现持久化存储:
1.自己写1ocalstorage
2.使用vuex-persistedstate插件
    插件使用方式:https://www.xuexiluxian.cn/blog/detai1/dae4073b07144d3c9abb3e2cc8495922

4.关于路由

Vue Router 实现了一个 Vue 插件，它通过监控 URL 的变化，根据 URL 的不同匹配到对应的组件进行渲染。当 URL 发生变化时，Vue Router 会拦截 URL 变化事件，根据配置的路由规则找到匹配的组件，并将其渲染到对应的页面区域中。

Vue Router 的核心就是将组件与 URL 进行映射，通过不同的 URL 地址来访问不同的组件，从而实现单页应用（SPA）的路由功能。这样用户在使用应用时，可以在不刷新页面的情况下实现页面的切换和导航。

4.1路由的模式和区别

路由的模式:history、hash
区别:
1.关于找不到当前页面发送请求的问题
    history会给后端发送一次请求而hash不会
2.关于项目打包前端自测问题
    hash是可以看到内容的
    history默认情况是看不到内容的
3.关于表象不同
    hash:#
    histoty:/

4.2 子路由和动态路由

子路由：子路由是指在 Vue Router 中，一个路由下面可以有多个子路由，形成路由的嵌套结构。这种结构通常用于构建复杂的页面布局，例如在一个页面中有多个功能模块，每个模块对应一个子路由，这样可以使代码组织更加清晰，同时也方便管理和维护。
动态路由：动态路由是指路由路径中的某一部分是动态变化的，通常用于传递参数或者标识资源。在 Vue Router 中，可以通过在路由路径中使用参数占位符来定义动态路由，例如 /user/:id，其中 :id 就是一个动态参数，它可以匹配不同的值。动态路由的好处是可以根据不同的参数值动态加载不同的页面内容，实现更加灵活的路由配置。

4.3 路由传值

通过路由参数传值：你可以在定义路由时设置参数，然后在组件中通过 $route.params 来获取参数的值。这种方法适合传递静态的数据，例如用户 ID 或者资源标识符。
通过查询参数传值：你可以在 URL 中通过查询参数来传递数据，然后在组件中通过 $route.query 来获取参数的值。这种方法适合传递较少量的数据，例如搜索关键词或者筛选条件。
通过路由元信息传值：你可以在定义路由时设置元信息（meta），然后在组件中通过 $route.meta 来获取元信息的值。这种方法适合传递一些与路由相关的数据，例如页面标题或者权限信息。

4.4 导航故障

官网说明:https://v3.router.vuejs.org/zh/guide/advanced/navigation-failures.htmI#E68A38808E68B588BE58AE号BC8E88888AA8E6895885号E989A89C
解决:
import VueRouter fromyue-routerconst routerPush=VueRouter.prototype.pushVueRouter.prototype.psh=function(location){
return routerPush.call(this,location).catch(error > error)

4.5 $router和$ route区别

Srouter不仅包含当前路由还包含整个路由的属性和方法
$route包含当前路由对象

4.6 导航守卫

1.全局守卫
beforeEach 路由进入之前afterEach 路由进入之后 beforeResolve 
2.路由独享守卫
beforeEnter 路由进入之前
3.组件内守卫
beforeRouteEnter 路由进入之前beforeRouteUpdate 路由更新之前beforeRouteLeave 路由离开之前

5.关于API

5.1 $set

面试官:你有没有碰到过，数据更新视图没有更新的问题==》$set
this.$set(target,key,修改后的值)

5.2 $nextTick

Snextrick返回的参数[函数]，是一个异步的。功能:获取更新后的dom
源码|原理:
$nextTick( callback ){
return Promise.resolve().then(( )=>callback();)
}

class Vue{ constructor( options){ options.created.bind(this)(); this. $el=document.querySelector(options.el); options.mounted.bind(this)();$ nextTick( callback ){return Promise.resolve().then(()=>{callback();}} new Vue({ el:'#app' created(){ this. $nextTick(()=>{console.log( this.$ el ); }) } mounted(){//console.log( this.$el );}

5.3 $refs

来获取dom的

5.4 $el

$e1 获取当前组件的根节点

5.5 $data

Sdata 获取当前组件data数据的

5.6 $children

Schildren 获取到当前组件的所有子组件的

5.7 $parent

找到当前组件的父组件，如果找不到返回自身

5.8 $root

找到根组件

5.9 data定义数据

数据定义在data的return内和return外的区别:
1.return外:单纯修改这个数据是不可以修改的，因为没有被get/set
2.return内:是可以修改的

5.10 computed计算属性

computed计算属性的结果值，可以修改吗?可以的，需要通过get/set写法
当前组件v-mode1绑定的值是computed来的，那么可以修改吗?可以的，需要通过get/set写法

5.11 watch

watch:{
obj: {
handler(newVal,oldVal)
{console.log('obj',newval ,oldVal )}，
immediate:true,
deep:true,
}
}

5.12 methods和computed区别

computed是有缓存机制的，methods是没有缓存机制的(调用几次执行几次)

6.关于指令

6.1 如何自定义指令

全局:main.js
Vue.directive('demo',{
inserted:function(a,b,c){console.log( a,b,c);}}
局部:某一个组件内
<script>
export default{
directives:{
}
demo:
bind: function(el){
console.1og(1)
</script>

6.2 vue单项绑定

双向绑定:v-model
单项绑定:v-bind

6.3 v-if和v-for优先级

vue2中:v-for >v-if
vue3中:v-if >v-for

7.关于原理

7.1 $nextTidk原理

$nextTick功能:获取更新后的dom
SnextTick( callback ){
return Promise.resolve().then(()=>{
  callback();
}}

8. ref的作用

1.获取页面的DOM元素
   定义ref属性，用来给元素或者子组件注册引入信息，父组件通过$refs 获取到对应的dom对象，和子组件通信
2.获取子组件对象`
3.vue3 中：设置响应式数据`

三种用法
1.ref是个属性，用this.$refs.name获取dom元素
2.ref加在子组件上，用this.$refs.name获取到的是组件实例，可以使用组件的所有方法
<child ref="ch" />  this.$refs.ch
3.如何利用v-for和ref获取一组数组或者dom节点
<ul>
     <li v-for="item in arr" :key="item ref="olis>
</ul>

vue2 vue3区别

1.Vue2和 vue3 响应式原理 不同
     Vue2 :0bject.defineProperty()
    ***后添加的属性是劫持不到的
    Vue3 :new Proxy()
    ***即使后添加的也可以劫持到***
    还不需要循环
2.$set在vue3中没有，因为new Proxy不需要
3.关于写法
    vue2是选项式API
    vue3可以向下兼容(选项式API)，也可以组合式api或setup语法糖形式
4.v-if和v-for优先级不同了

闭包

1.闭包是什么

闭包是一个函数加上到创建函数的作用域的连接，闭包“关闭”了函数的自由变量。

2.闭包可以解决什么问题【闭包的优点】

2.1 内部函数可以访问到外部函数的局部变量

2.2 闭包可以解决的问题
    var lis= document.getElementsByTagName('li');
    for(var i=0;i<lis.length;i++){
    (function(i){lis[i].onclick = function(){alert(i);
    })(i)

3.闭包的缺点

3.1 变量会驻留在内存中，造成内存损耗问题。解决:把闭包的函数设置为nu11
3.2 内存泄漏【ie】 ==>可说可不说，如果说一定要提到ie

vue2面试题