共计 8127 个字符，预计需要花费 21 分钟才能阅读完成。
内容较多需要分几部
一.vue2 面试题 – 生命周期有哪些？发送请求在 created 还是 mounted？
1.1. 生命周期有哪些
vue2.X 系统自带有 8 个
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
1.2. 进入组件执行哪些生命周期
beforeCreate
created
beforeMount
mounted1.3 在 created 中如何获取 dome
只要异写异步代码, 获取 dom 在异步中获取的就可以
列
定时器方法
setTimeout(()=>{获取 dome 的方法})
vue 自带 nextTick 方法
this.$nextTick(res=>{获取 dome 的方法})
1.4 为什么发送请求不在 beforeCreate 里?
如果请求是在 methods 封装好的, 在 beforeCreate 掉用的时候是拿不到 methods 里面的方法的
1.5beforeCreate 和 created 有什么区别
beforeCreate 中没有 $data
created 中有 $data
created 中是可以拿到 methods 中的方法的1.6. 父组件引入子组件生命周期执行顺序
父组件引入了子组件, 会先执行父组件的前 3 个生命周期, 再执行子组件的 4 个生命周期
父:beforeCreat、create、beforeMount
子:beforeCreate、create、beforeMount、mounted
...
父:mounted
1.7 发送请求在 created 中 mounted?
这个问题需要看具体情况, 按照上面的父组件引入子组件的顺序来看,
如果需要优先加载子组件内容需要再 mounted 中, 如果组件间没有依赖关系, 在哪个都可以1.8 加入 keep-alive 组件会执行哪些生命周期
如果使用了 keep-alive 组件, 当前的组件会额外增加两个生命周期(系统 8 +2)
activated 进入到组件 激活时
deactivated 销毁时如果加入 keep-alive 第一次进入会执行 5 个生命周期
beforeCreate
created
beforeMount
mounted
activated1.9 第二次或者第 N 次进入组件会执行哪些生命周期
activated
如果没加入 keep-valive 会永远执行
beforeCreate
created
beforeMount
mounted
2.0 你在什么情况下使用过哪些生命周期, 说一说生命周期的使用场景
created 单组件请求
mounted 同步获取 dom, 如果子组件先请求父组件再请求
activated 判断 id 是否相同, 如果不相同发起请求
deactivated 关闭页面记录视频播放时间, 初始化的时候从上一记录开始二. 关于组件
2.1 组件传值 (通信) 的方式
父传后代 (后代拿到了父的数据)
1. 子组件通过 props 来接受父的传参
props:{
str1:{
type:String,
default:''
}
}
* 这种方式父传子方便, 但是传孙子背比较困难, 并且不能修改父组件中的数据 *
2. 子组件直接使用父组件中的数据
子组件通过 this.$parent.xxx 使用父组件中的数据
* 子组件可以直接修改父组件中的数据 *
* 缺点: 这可能会破坏组件的封装性和可维护性。*
3. 依赖注入
优势: 父组件可以直接向某个后代组件传递参数,(不需要一级一级的找)后代传父(父拿到了后代的数据)
1. 子组件传给父组件
子组件自定义事件 this.$emit('事件名字', 传值)
父组件 组件名>
在 methods 中使用
2.平辈之间传值(兄弟可以拿到数据)2.2 父组件直接修改子组件中的值
1. 使用 this.$children
注意 this.$children 获取得是一个数据使用的时候应该: this.$children [索引]
* 繁琐 *
2. 组件名>
this.$refs. 命名.xxx = 'yyyyy'2.3 子组件如何修改父组件中的值
可以使用 this.$parent.xxx 获取到父组件中的值并修改2.4 如何找到父组件
this.$parent2.5 如何找到根组件
this.$root
2.6keep-alive
keep-alive 是什么: 用来缓存当前组件的2.7slot/ 插槽
1. 匿名插槽:(没有名字)
子组件
返回
标题
温馨提示
组件名>
注意: 名字需要在 template 标签中
3. 作用域插槽(传值)
子组件
2.8provide/inject
provide/inject ===> 依赖注入
// 父级组件提供 'foo'
{{foo}}
2.9 如何封装组件
组件一定要难点, 设计的知识点:slot, 组件通信...
三关于 VueX
3.1VueX 有哪些属性
1.state 全局共享属性存放数据
2.getters 针对数据进行二次修改
3.mutations
4.actions
5.modules 3.2VueX 使用 state 值
1.this.$store.state.xxx
2. 辅助函数 mapState
import {mapState} from "vuex";
computed:{...mapState(['str'])
},
在页面上直接使用 str , 在方法中 this.str
以上两种都可以拿到 state 的值, 那么他们的区别是什么
使用 this.$store.state.xxx 可以直接修改 vueX 里面的数据
使用辅助函数的形式是不可以修改的(辅助函数是复制了 vuex 文件里的内容, 所以不能修改)3.3VueX 的 getters 值的修改
getters 是针对于数据进行二次修改的
组件使用了 getters 中的内容, 组件使用 v -model 的形式会发生什么
getters 的值是不能被修改的3.4VueX 的 mutations 和 actions 区别
相同点:mutations 和 actions 都是来存放全局方法的
这个全局方法 return 的值拿不到
区别:
mutations ==>> 同步
actions =>> 返回的诗一个 Promise 对象, 他可以执行相关异步操作
mutations 是来修改 state 的值的,actions 的作用是来提交 mutations3.5VueX 持久化存储
vuex 本身不是持久化存储的数据,vuex 是一个状态管理仓库
(state: 全局属性)==>>就是存放全局属性的地方 实现持久化存储:
1. 自己写 localStorage,
2. 使用 vuex-persistedstate 插件(下方插件使用方式)
下载安装插件进行持久化存储
npm install vuex-persistedstate --save
配置
import createPersistedState from 'vuex-persistedstate';
vue.use(Vuex)
// vuex 数据持久化配置
plugins:[
createPersistedState({
storage:window.sessionStorage,
key:"store",
render(state){return {...state}
}
})
]四. 关于路由
4.1 路由的模式和区别
1.history
2.hash区别:
1. 关于找不到页面当前页面发送请求的问题
history 会给后端发送一次请求
hash 不会给后端发送请求
2. 关于项目打包前端自测问题
hash 是可以看到内容的
history 默认情况下是看不到内容的
3. 关于表象不同
hash: #
history: /4.2. 子路由和动态路由
4.3 路由传值
一.vue 路由传值有 4 种方式
接收方式
mounted () {this.num = this.$route.params.num}
1. 利用 router-link 路由导航来传递
4.4 导航故障
官网说明
等待导航结果 | Vue RouterVue.js 的官方路由
https://router.vuejs.org/zh/guide/advanced/navigation-failures.html
解决方法:
在跳转的后面加 .catch(error=>error)
4.5$router 和 $route 的区别
CSDN 详细使用介绍https://blog.csdn.net/qq_45838276/article/details/126890883?ops_request_misc=%7B%22request%5Fid%22%3A%22172371411616800225554504%22%2C%22scm%22%3A%2220140713.130102334..%22%7D&request_id=172371411616800225554504&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_click~default-1-126890883-null-null.142^v100^control&utm_term=$router 和 $route 的区别 &spm=1018.2226.3001.4187https://blog.csdn.net/qq_45838276/article/details/126890883?ops_request_misc=%7B%22request%5Fid%22%3A%22172371411616800225554504%22%2C%22scm%22%3A%2220140713.130102334..%22%7D&request_id=172371411616800225554504&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_click~default-1-126890883-null-null.142^v100^control&utm_term=$router 和 $route 的区别 &spm=1018.2226.3001.4187
1、$router 是用来操作路由，不仅包含路由还包含整个路由的属性和方法
$route 是用来获取路由信息, 包含当前路由
2. $router 是 VueRouter 的一个实例，他包含了所有的路由，包括路由的跳转方法，钩子函数等，也包含一些子对象（例如 history）3.route 是一个跳转的路由对象（路由信息对象），每一个路由都会有一个 $route 对象，是一个局部的对象。4.6. 导航守卫
1. 全局守卫
beforeEach 路由进入之前
afterEach 路由进入之后
2. 路由独享守卫
beforEnter 路由进入之前
3. 组件内守卫
beforeRouteEnter 路由进入之前
beforeRouteUpdate 路由更新之前
beforeRouteleave 路由离开之前五. 关于 API
5.1$set
碰到数据更新, 视图没有更新的问题 ==>>$set
$set('需要修改的参数','第几个','修改成什么')
this.$set(target,key,'修改后的值')5.2$nextTick
在 vue 的生命周期中,beforeCreate 或 created 中如何去获取 dom
1. 使用异步获取去, 定时器
2. 使用 vue 中自带的 API$nextTick
$nextTick 返回的参数(函数), 是一个异步
源码 | 原理
$nextTick(callback){return Promise.resolve().then(()=>{callback();
})
}
5.3$refs
1.this.$refs 获取 dome 的
使用
子组件>
this.$refs. 命名 获取到子组件信息
5.4 $el
$el 获取当前组件的根节点5.5$data
$data 获取当前组件的 data 数据5.6$children
$children 获取当前组件的说有子组件的, 返回的是一个数组5.7 $parent
$parent 找到当前组件的父组件, 如果找不到返回自身5.8 $root
$root 找到根组件5.9data 定义数据
在 data 中定义数据, 在 return 里面和在 return 外面定义数据的区别
1.return 外: 单纯修改数据是不可以被修改的, 因为没有 get/set
2.return 内: 是可以修改的
5.10 computed 计算属性
computed 的计算属性的结果值, 可以修改吗?
可以的, 需要通过 get/set 写法
当前组件 v -model 绑定的值是 computed 来的, 那么可以修改吗? 可以的, 需要通过 get/set 写法
5.11 watch
深入监听
hello: {handler(newval, oldval) {console.log(newval, oldval);
},
immediate:true // 立即侦听
}
hello(newhello,oldhello){console.log(newhello,oldhello);
}
还可以监听路由 / 路径变化5.12 methods 和 computed 区别
conputed 是有缓存机制的,methods 是没有缓存机制的6. 关于指令
6.1 如何自定义指令
全局 main.js
Vue.directive('demo',(insetted:function(a,b,c){console.log(a,b,c)
}
))
局部: 某一个组件内
export default(
directives:{
demo:{bind:function(el){console.log(1)
}
}
}
)6.2vue 单项绑定
双向绑定 v-model
单项绑定: v-bind
6.3v-if 和 v -for 优先级
vue2 中 v-for > v-if
vue3 中 v-if > v-for七. 关于原理
7.1.$nextTick 原理
$nextTick 获取更新后的 dome 的
原理
$nextTick(callback){return Promise.resolve().then(()=>{callback();
})
} 7.2. 双向绑定原理
1.Object.defineProperty(obj, prop, descriptor)，这个语法内有三个参数，分别为 obj（要定义其上属性的对象）；prop（要定义或修改的属性）；descriptor（具体的改变方法）2、简单地说，就是用这个方法来定义一个值。当调用时我们使用了它里面的 get 方法。当给这个属性赋值时，就调用了它里面的 set 方法；var obj = {}
Object.defineProperty(obj,'prototypeName',{get: function() {console.log("调用了 get")
},
set: function(newValue) {console.log("调用了 set, 新值是"+newValue)
}
})
obj.prototypeName // 调用了 get
obj.prototypeName = 'hello' // 调用了 set, 新值是 hello
一.Vue 框架篇
vue2.x 生命周期
1. 有哪些生命周期
系统自带
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy // 销毁
destroyed
2. 一旦进入到页面或组件, 会执行哪些生命周期, 顺序
beforeCreate
created
beforeMount
mounted
3. 在哪个阶段有 $el(这个组件的根节点), 在哪个阶段有 $data(data 中 return 数据)
beforeCreate
created $data
beforeMount $data
mounted $el $data
4. 如果加入了 keep-alive 会多两个生命周期
activated , deactivated
5. 如果加入了 keep-alive 第一次或第二次进入会执行哪些生命周期
第一次进入执行 5 个生命周期
beforeCreate
created
beforeMount
mounted
activated
第二次进入执行 1 个生命周期
activated谈谈你对 keep-alive 的了解
1. 是什么
vue 系统自带的一个组件, 功能: 是来缓存组件的. >>提升性能
2. 使用场景
就是来缓存组件的, 提升项目的性能, 具体实现比如, 首页进入到详情页, 如果用户在首页每次点击都是相同的,
直接缓存就可以了, 当然如果点击的不是同一个, 那么直接请求v-if 和 v -show 区别
1. 展示形式不同
v-if 是 创建一个 dome 节点
v-show 是把 dome 节点隐藏起来, display:none block
2. 使用场景
初次加载 v -if 要比 v -show 好, 页不会做加载盒子
频繁切换, v-show 要比 v -if 好, 创建和删除开销太大, 隐藏起来比较好
ref 是什么
来获取 dome 的
vue 提供获取 dome 的东西nextTick 是什么
异步获取 dome
列: 获取最新的 domescoped 原理
样式在本组件中生效vue 组件之间如何传值
1. 父组件 传值 子组件
2. 子组件 传值 父组件
3. 兄弟组件之间传值
使用 bus 建立一个中转 js,
引入 bus.js 文件
使用 bus.$emit('自定义事件', 传值)
兄弟组件使用 bus.$on('自定义事件',data=>{})接收computed , methods , watch 有什么区别
1.computed vs methods 有什么区别
computed 在 dome 中使用连续调用只执行一次, 有缓存
methods 在 dome 中连续调用, 会执行多次, 没有缓存
1.computed vs watch 有什么区别
watch 是监听, 数据或者是路由发生了改变才可以响应(执行)
computed 计算某一个属性的改变, 如果某一个值改变了, 计算属性监听到了就会返回23.vue2 和 vue3 的区别
原文地址: 2024 年八股文前端高频面试题(js、vue2、vue3、uniapp、es6、echarts、webpack、算法、git、hr 交流、技巧现状）
正文完
