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.动态路由
场景：详情页（商品、文章）
21.双向绑定原理
通过Object.defineProperty( )采用数据劫持，接发布者订阅者模式实现的数据双向绑定
22.虚拟dom与diff算法
[移步之前的文章](https://blog.csdn.net/weixin_45952434/article/details/117546950)
836
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
