Vue2.x生命周期

1. 生命周期有哪些
   1. 系统自带
   • beforeCreate
   • created
   • beforeMount
   • mounted
   • beforeUpdate
   • updated
   • beforeDestroy
   • destroyed
   2. 进入页面或组件执行哪些生命周期
   • 执行前四个
   3. 在哪个阶段有$el,\mathrm{哪}\mathrm{个}\mathrm{阶}\mathrm{段}\mathrm{有}el,哪个阶段有$data
   • 在created会有数据
   • 在mounted会有dom
   4. 加入keep-alive会多两个生命周期
   • activated 进入
   • deactivated 离开
   5. 加入keep-alive会执行那些生命周期
   • 第一次除原四个多执行一个activated
   • 第二次或多次只执行一个activated
2. keep-alive了解
   1. 是啥
   • 是vue自带的一个组件，是用来缓存组件的
   2. 使用场景
   • 用来缓存组件，提升项目的性能。具体实现：首页进入到详情页，如果用户在首页每次点击都是相同的，就直接使用keep-alive缓存起来。
3. v-if和v-show的区别
   1. 展示形式不同
   • v-if是创建一个dom节点
   • v-show是设置display
   2. 使用场景
   • 初次加载v-if好，页面不会做加载盒子
   • 频繁切换v-show好，创建和删除开销太大
4. v-if和v-for优先级

• v-for优先级比v-if高，源码先后判断顺序

5. ref是啥

• 来获取dom的

6. nextTick是啥

• 获取更新后的dom内容

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

• 父元素/deep/子元素

9. 组件之间的传值通信
   1. 父传子
   • 父组件 传值
   • 子组件props接收值
   2. 子传父
   • 子组件 watch监听，this.$emit(事件，值)
   • 父组件 method设置对应事件的方法
   3. 兄弟组件传值
   • 设置bus中转
   • 传值是 bus.$emit(事件，值)
   • 接收是bus.$on(事件,(值)=>{})
10. computed、methods、watch区别
    1. computed和methods
    • 计算属性是有缓存的，methods是没有缓存的
    2. computed和watch
    • watch是监听，需要数据或者路由发生改变才可以响应
    • computed计算某一个属性的改变，如果值改变了会监听进行返回
11. props和data优先级

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

12. vuex哪些属性
    1. state
    • 类似于组件中data,存放数据
    2. getters
    • 类似于组件中computed
    3. mutations
    • 类似于组件中methods
    4. actions
    • 提交mutations的
    5. modules
    • 把以上四个属性在细分，让项目更好管理
13. vuex中mutations和actions区别
    • mutations 都是同步事物
    • actions 可以包含任意异步操作
14. vuex是单向数据流还是双向数据流

• 单向数据流，必须通过actions方法修改

15. vuex如何做持久化存储

• vuex本身不是持久化存储
• 持久化存储是设置localstorage，并获取他对应的值

16. vue跨域问题解决

• config配置文件设置devServer的proxy

17. vue中路由模式
    1. hash默认，前端调试可以用
    2. history 打包上线需要，会出现空白页
    3. 区别
    • 表现形式不同，哈希有#
    • 跳转请求，若不存在，哈希不请求，history会发送请求
18. SPA是啥
    1. 单页面应用
    2. 缺点
    • SEO优化不好
    • 性能不是很好
19. 路径传值
    1. 显式
    • 传

    this.$router.push({
    	path:'/about',
        query:{
        	a:1
        }
    })
    

    • 接

    this.$route.query.a
    

    2. 隐式
    • 传

    this.$router.push({
    	name:'About',
        params:{
        	a:1
        }
    })
    

    • 接

    this.$route.params.a
    

20. 路由导航守卫
    1. 全局
    • beforeEach(to,from,next)
    • beforeResolve()
    • afterEach()
    2. 路由独享
    • beforeEnter()
    3. 组件内
    • beforeRouteEnter()
    • beforeRouteUpdate()
    • beforeRouteLeave()
    4. 使用场景
    • 判断是否登录，如果登录就next，否则就跳转到登录页面
21. vue动态路由

• 场景是详情页（有多个商品或文章）