Vue2.x 生命周期

  1. 1. 有哪些生命周期
  2. 系统自带：
  3.   beforeCreate
  4.   created
  5.   beforeMount
  6.   mounted
  7.   beforeUpdate
  8.   updated
  9.   beforeDestroy
  10.   destroyed
  12. 2. 一旦进入到页面或者组件，会执行哪些生命周期，顺序。
  13.  beforeCreate
  14.  created
  15.  beforeMount
  16.  mounted
  18. 3. 在哪个阶段有$el，在哪个阶段有$data
  19.     beforeCreate 啥也没有
  20.     created  有data没有el
  21.     beforeMount 有data没有el
  22.     mounted 都有
  24. 4. 如果加入了keep-alive会多俩个生命周期
  25.     activated、deactivated
  27. 5. 如果加入了keep-alive，第一次进入组件会执行哪些生命？
  28.  beforeCreate
  29.  created
  30.  beforeMount
  31.  mounted
  32.  activated
  34. 6. 如果加入了keep-alive，第二次或者第N次进入组件会执行哪些生命周期？
  35. 只执行一个生命周期：activated

谈谈你对keep-alive的了解

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

v-if和v-show区别

  1. 1. 展示形式不同
  2. v-if是 创建一个dom节点
  3. v-show 是display:none 、 block
  5. 2. 使用场景不同
  6. 初次加载v-if要比v-show好，页面不会做加载盒子
  7. 频繁切换v-show要比v-if好，创建和删除的开销太大了，显示和隐藏开销较小

v-if和v-for优先级

v-for的优先级要比v-if高

ref是什么？

来获取dom的

nextTick是什么?

获取更新后的dom内容

scoped原理

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

Vue中如何做样式穿透

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

Vue组件传值

父-》子 :val=”obj”
子-》父 this.$emit(‘handleChange’, ‘Jack’)

computed、methods、watch有什么区别？

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

props和data优先级谁高？

  1. props ===> methods ===> data ===> computed ===> watch

Vuex有哪些属性？

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

Vuex是单向数据流还是双向数据流？

Vuex是单向数据流

Vuex中的mutaitons和actions区别

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

Vuex如何做持久化存储

Vuex本身不是持久化存储：1. 使用localStorage自己写、2. 使用vuex-persist插件

Vue设置代理

vue.config.js

  1. module.exports = {
  2.   publicPath:'./',
  3.   devServer: {
  4.     proxy: 'http://localhost:3000'
  5.   }
  6. }

Vue路由模式

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

介绍一下SPA以及SPA有什么缺点

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

Vue路径传值

  1. 1. 显式
  2.     http://localhost:8080/about?a=1
  3.     1.1 传：this.$router.push({
  4.               path:'/about',
  5.               query:{
  6.                   a:1
  7.               }
  8.           })
  9.   1.2 接：this.$route.query.a
  11. 2. 隐式
  12.     http://localhost:8080/about
  13.     2.1 传：this.$router.push({
  14.               name:'About',
  15.               params:{
  16.                   a:1
  17.               }
  18.           })
  19.   2.2 接：this.$route.params.a

路由导航守卫有哪些

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

Vue动态路由

  1. 场景：详情页(文章、商品)
  2. router.js配置：
  3.     {
  4.     path: "/list",
  5.     name: "List",
  6.     children:[
  7.       {
  8.         path:"/list/:id",
  9.         name:'Details',
  10.         component: () =>
  11.           import("../views/Details.vue"),
  12.       }
  13.     ],
  14.     component: () =>
  15.       import("../views/List.vue"),
  16.   },