面试题 vue

1 v-if v-show

都是隐藏
v-if 删除创建dom实现
v-show display="none"

2 v-model

双向绑定input元素的value值

3 绑定事件

v-on @

4 vue-loader

loader加载器
vue-loader 将vue文件格式转换成js文件

5 nextTick

是个回调函数, 当DOM更新之后执行回调

变量a变化  
nextTick(function(){操作新DOM的某个元素})
...  
更新DOM

6 data为什么是函数

组件复用
如果不是函数, 当变量是引用类型时, 会相互影响
函数的作用域是相互独立的

7 keep-alive

<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
比如 从Home=>Search=>Home
若App里

<template>
  <div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

keep-alive生命周期钩子函数：activated、deactivated

8 computed和watch的区别

computed
计算属性，依赖其他属性，当其他属性改变的时候下一次获取computed值时也会改变，computed的值会有缓存
watch
类似于数据改变后的回调
深度监听的话，deep:true
立刻监听,不管你数据有没有变化，我上来立即监听一次 immediate:true

9 key

主要用在虚拟Dom的diff算法中，用key就可以大大提高渲染效率
1 没有key, 直接更新dom
2 有key 判断新旧节点的key, key不同, 更新dom
3 key相同, 对比dom, dom不同, 更新dom
4 dom相同, 不更新dom

用index作为key可能会引发的问题:
若对数据进行：逆序添加/逆序删除等破坏顺序的操作, 会产生没有必要的真实DOM更新

10 前端页面优化

路由懒加载 图片懒加载
开启GZip压缩
按需引入ui
v-if v-show
防抖、节流

11 为什么Vue中的v-if和v-for不建议一起用?

在vue2中, v-for优先级高于v-if

<button v-if  v-for></button>

我们期望先v-if 再v-for 节约性能, 但实际上浪费性能

12 双向绑定

Object.defineProperty() set 数据劫持
发布者-订阅者模式
Observer Compile Watcher

13 使用插件步骤

1 npm 下载
2 引入import main.js全局引入 vue局部引入
3 配置

14

computed:{
  a:function(){return}
  a(){}
  ...mapGetters(["cartList"])
}

methods:{
  a(){}
  changeIndex: throttle(function (index) {  this.currentIndex = index;}, 20),
}

watch:{
  a: function (newQuestion, oldQuestion) {  } }
  a(new,old){}
  a.b(new,old){}

  //需要 immediate 和 handler 时
  name: {
    immediate: true,
    deep:true,
    handler (new,old) {
        this.watchName = val;
      }
}

15 打包后几个js css

一个js css文件夹, 多个.js .css

16 src

api 放axios
assets 静态资源 reset.css 图片 字体图标
components
views/pages
router
store
App.vue 挂载的第一个组件
main.js 全局js

17 axios使用

1 npm下载
2 api下引入, 二次封装 拦截器(token)
3 请求 export const reqgetCategoryList = () => requests.get(/product/getBaseCategoryList);
4 跨域 webpack-dev-serve cors jsonp websocket

18 生命周期

beforeCreate/created 数据undefined/有值
beforeMount/mounted 虚拟dom/渲染
beforeUpdate/updated 数据变化/更新视图
beforeDestory/destoryed
actived/deactived 进入页面/离开页面

19 权限管理

后台发送: admin:['home','login','component1','btn_add']
前台:
路由权限: 根据admin动态生成路由, 路由.path匹配admin
组件权限: 组件守卫, name匹配admin
按钮:
自定义指令 为每个
指令定义: admin与btn_add匹配, 如果不匹配,disable或者display="none"或从dom上删掉