1.vue生命周期
创建->挂载->更新->销毁
1. beforeCreate
2. created
3. beforeMount
4. mounted
5. beforeUpdate
6. updated
7. beforeDestroy
8. destroyed
2.在哪个阶段有$ el(组件根节点),在哪个阶段有$data(data中的数据)
beforeCreate 都没有
created 有data,无el
beforeMount 有data,无el
mounted 都有
3.如果加入了keep-alive会多两个生命周期
actived 进入
deactived 离开、销毁
4.如果加入了keep-alive,第一次进入组件会执行哪些生命周期?
1. beforeCreate
2. created
3. beforeMount
4. mounted
5. actived
5.如果加入了keep-alive,第二次或者第N次进入组件会执行哪些生命周期?
actived
6.父子组件会加载哪些生命周期
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted。
7.keep-alive的了解
1.是vue自带的一个组件, 功能:是用来缓存组件,从而提升性能。
2.使用场景
就是用来缓存组件,提升项目性能,具体实现比如:列表进入详情页,如果用户点击的都是同一个,就没有必要再次请求,就可以使用缓存起来。
8. v-if和v-show的区别
相同点:都是控制元素的显示和隐藏
区别: v-show是通过display:none 、display:black来控制显示隐藏
v-if是根据条件判断是否加载dom元素
场景
v-if: 初次加载会更加节省性能,页面不会创建对应dom元素
频繁切换v-show会比v-if更加节省性能,dom创建、销毁过去消耗性能
9.v-if和v-for的优先级
v-for的优先级是高于v-if的
原因:源码中genElement()函数内部的判断就是先判断el.for,再判断的el.if。
v-if和v-for不要放在一起连用,太过于消耗性能,一般先用v-if包裹v-for使用。
10.ref是什么?
vue中来获取dom
11.nextTick()是什么
获取更新后的dom内容 不断把异步的推到执行栈中,延迟某个操作直至dom更新完成后执行
12.scoped原理
原理:给节点新增自定义属性,然后通过css属性选择器添加样式
作用:让样式在本组件中生效,不影响其他组件
13.vue中如何做样式穿透
stulys 使用 >>>
scss 使用 父类 /deep/ 子类 或者 ::v-deep
13.父组件向子组件传值
父组件中使用自定义属性,子组件中使用props接收
父组件 :
<Header :msg="msg" />
子组件:
1.props:['msg']
2.props:{
msg:String, // 数据类型
require: true, // 是否必传
default: () => {
return ' ' // 默认值
}
}
13.子组件向父组件传值
父组件中使用自定义事件传递一个事件,子组件中使用this.$emit('事件名称',传递的数据)
父组件:
<Header @childInput="getVal" />
getVal(val){
// val 即为子组件中的参数
}
子组件:
this.$emit('childInput',123)
13.兄弟组件之间的传值
通过一个中转(eventBus)
common下新建bus.js
import Vue from 'vue'
export default new Vue
A组件传值:
import bug from '@/common.bus'
bus.$emit('toFooter', this.msg)
B组件接收
import bug from '@/common.bus'
bus.$on('toFooter', (data) => {
this.str = data
})
13.computed、methods、watch有什么区别
1.computed vs methods区别
computed 是有缓存
methods 没有缓存
2.computed vs watch
watch监听器,数据或者路由发生变化才会触发
computed 可以计算某一个属性的改变,如果某一个值改变,计算属性就会监听到进行返回。
14.props和data优先级谁高?
源码initState()函数中,判断的顺序为
props -> methods -> data -> computed -> watch
15.vuex
1.状态管理工具,用来存储数据,便于多个地方使用。
state:类似与组件中的data,用于存放数据
使用:
第一种
import { mapState } from 'vuex'
computed:{
...mapState (['str'])
}
直接使用 this.str
getters : 类似于组件中的computed,也是有缓存的
changeArr( state ) {
return state.arr.join('=')
}
import { mapState } from 'vuex'
computed:{
...mapState (['changeArr'])
}
直接使用 this.changeArr
mutations 类似与组件中的methods,进行一些同步操作
btn(state,data){
return console.log(state.str, c)
}
import { mapMutations } from 'vuex'
methods:{
...mapMutations (['btn'])
}
actions 提交mutations的,进行一些异步操作
mutations中
add(state){
state.num++
}
actions中
changeAdd ({commit}) {
setTimeout(()=>{
commit('add')
})
}
组件中
import { mapActions } from 'vuex'
methods:{
...mapActions (['changeAdd '])
}
modules: 把以上4个属性再进行细分,让仓库更好的管理
2.vuex是单向数据流还是双向的
是单向数据流,只能使用,不可以修改
3.vuex如何进行持久化存储
vuex本身不是持久化存储
持久化方式:
1.如果需要做持久化需要 locaStorage
2.插件vuex-persist插件
16.vue设置代理(跨域)
module.exports = {
devServer: {
open: true,
port: 8090,
proxy: {
'/api': {
target: 'http://XXXXXXXXXXXXX',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
}
},
}
17.代理和环境变量
官方文档
或者参考上一篇文章
开发环境: .env.development
生产环境: .env.production
18.路由
路由模式有两种:history、hash
区别
1.表现形态不同:hash 地址后面会多一个#
2.http://localhost:8080/id history模式下会发送请求
3.打包后前端自测要使用hash,如果使用history会出现空白页
19.spa以及spa有什么确定
SPA是单页面应用,vue写出来的就是单页面应用
缺点:
1.不利于SEO
2.性能不是特别好
20.路径传值
1.显示
传递
this.$router.push({
path: 'XXX',
query:{
a:1
}
})
接收
this.$router.query
2.隐士(在地址栏中看不到)
传递
this.$router.push({
name: 'XXX',
params:{
a:1
}
})
接收
this.$route.params
20.路由导航守卫
守卫中三个参数代表
to:去哪里
from:来自哪里
next:是否放行
1.全局路由守卫
router.beforeEach((to,from,next)=>{})
router.afterEach((to,from)=>{})
router.beforeEach((to,from)=>{})
2.路由独享守卫
beforeEnter:(to,from,next)=>{}
3.组件内导航守卫
beforeRouteEnter:(to,from,next)=>{}
场景:判断用户是否登录,没有登陆返回登录页
20.动态路由
场景:详情页(商品、文章)
![router.js配置](https://img-blog.csdnimg.cn/3b9eed25ce634862a4d1e9fda3d00a34.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Z2i5ZCR55m-5bqm5Li2Q1blvIDlj5E=,size_9,color_FFFFFF,t_70,g_se,x_16#pic_center)
21.双向绑定原理
通过Object.defineProperty( )采用数据劫持,接发布者订阅者模式实现的数据双向绑定
22.虚拟dom与diff算法
[移步之前的文章](https://blog.csdn.net/weixin_45952434/article/details/117546950)