面试题：Vue2.x 生命周期

最新推荐文章于 2023-11-27 20:35:58 发布

一介俗人@——@

最新推荐文章于 2023-11-27 20:35:58 发布

阅读量264

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_58228343/article/details/123391575

版权

1. 有哪些生命周期
系统自带：
  beforeCreate
  created
  beforeMount
  mounted
  beforeUpdate
  updated
  beforeDestroy
  destroyed
2. 一旦进入到页面或者组件，会执行哪些生命周期，顺序。
 beforeCreate
 created
 beforeMount
 mounted
3. 在哪个阶段有$el，在哪个阶段有$data
	beforeCreate 啥也没有
	created  有data没有el
	beforeMount 有data没有el
	mounted 都有
4. 如果加入了keep-alive会多俩个生命周期
	activated、deactivated
5. 如果加入了keep-alive，第一次进入组件会执行哪些生命？
 beforeCreate
 created
 beforeMount
 mounted
 activated
6. 如果加入了keep-alive，第二次或者第N次进入组件会执行哪些生命周期？
只执行一个生命周期：activated

面试题：谈谈你对keep-alive的了解

1. 是什么
vue系统自带的一个组件，功能：是来缓存组件的。===》提升性能
2. 使用场景
就是来缓存组件，提升项目的性能。具体实现比如：首页进入到详情页，
如果用户在首页每次点击都是相同的，那么详情页就没必要请求N次了，直接缓存起来就可以了，当然如果点击的不是同一个，那么就直接请求。

面试题：v-if和v-show区别

1. 展示形式不同
v-if是 创建一个dom节点
v-show 是display:none 、 block

2. 使用场景不同
初次加载v-if要比v-show好，页面不会做加载盒子
频繁切换v-show要比v-if好，创建和删除的开销太大了，显示和隐藏开销较小

面试题：v-if和v-for优先级

v-for的优先级要比v-if高
***是在源码中体现的：function genElement

面试题：ref是什么？

来获取dom的

面试题：nextTick是什么?

获取更新后的dom内容

面试题：scoped原理

1. 作用：让样式在本组件中生效，不影响其他组件。
2. 原理：给节点新增自定义属性，然后css根据属性选择器添加样式。

面试题：Vue中如何做样式穿透

stylus样式穿透使用：>>>
sass和less使用：/deep/
通用使用：  :v-deep

面试题：Vue组件传值

父组件-->子组件：

	1. 父组件：
		<user-detail :myName="name" />
    
    export default {
        components: {
            UserDetail
        }
        ......
    }
  2. 在子组件中使用props（可以是数组也可以是对象）接收即可。可以传多个属性。
  	export default {
      props: ['myName']
 		}

子组件-->父组件：

		1. 子组件
      <button @click="changeParentName">改变父组件的name</button>
      export default {
          methods: {
              //子组件的事件
              changeParentName: function() {
                  this.$emit('handleChange', 'Jack')
              }
          }
      }
    2. 父组件
      <child @handleChange="changeName"></child>

      methods: {
          changeName(name) {  
              this.name = name
          }
      }

兄弟组件之间：bus.js

面试题：computed、methods、watch有什么区别？

1. computed vs methods区别
	computed是有缓存的
	methods没有缓存
2. computed vs watch区别
	watch是监听，数据或者路由发生了改变才可以响应（执行）
	computed计算某一个属性的改变，如果某一个值改变了，计算属性会监听到进行返回
	watch是当前监听到数据改变了，才会执行内部代码

面试题：props和data优先级谁高？

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

面试题：Vuex有哪些属性？

state、getters、mutations、actions、modules

state 类似于组件中data，存放数据
getters 类型于组件中computed
mutations 类似于组件中methods
actions 提交mutations的
modules 把以上4个属性再细分，让仓库更好管理

面试题：Vuex是单向数据流还是双向数据流？

Vuex是单向数据流

面试题：Vuex中的mutaitons和actions区别

mutaitons   :  都是同步事物
actions     :  可以包含任意异步操作

***在调试中就看出来

面试题：Vuex如何做持久化存储

Vuex本身不是持久化存储

1. 使用localStorage自己写
2. 使用vuex-persist插件

面试题：Vue设置代理

module.exports = {
  publicPath:'./',
  devServer: {
    proxy: 'http://localhost:3000'
  }
}

面试题：Vue项目打包上线

1. 自测==>修改路由模式
2. 代理不生效，使用ENV
3. 修改路径

面试题：Vue路由模式

路由模式有俩种：history、hash
区别：
	1. 表现形态不同
			history:https://xuexiluxian.cn/about
			hash:https://xuexiluxian.cn/#/about
	2. 跳转请求
			history : https://xuexiluxian.cn/id   ===>发送请求
			hash 	  : 不会发送请求
	3. 打包后前端自测要使用hash，如果使用history会出现空白页

面试题：介绍一下SPA以及SPA有什么缺点

SPA是什么？单页面应用
缺点：
	1. SEO优化不好
	2. 性能不是特别好

面试题：Vue路径传值

1. 显式
	http://localhost:8080/about?a=1
	1.1 传：this.$router.push({
  			path:'/about',
  			query:{
  				a:1
  			}
  		})
  1.2 接：this.$route.query.a
  
2. 隐式
	http://localhost:8080/about
	2.1 传：this.$router.push({
  			name:'About',
  			params:{
  				a:1
  			}
  		})
  2.2 接：this.$route.params.a

面试题：路由导航守卫有哪些

全局、路由独享、组件内

1. 全局
	beforeEach、beforeResolve、afterEach
2. 路由独享
	beforeEnter
3. 组件内
	beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
	
使用场景：判断是否登录，如果登录就next否则就跳转到登录页面