常见的Vue知识点

总结常见的Vue知识点，看看你在哪个段位 QAQ

荣耀黄金 ⭐️

1.Vue的优缺点?

优点: 渐进式，组件化，轻量级，虚拟dom,响应式，单页面，数据视图分开
缺点: 单页面应用不利于SEO,不支持IE8以下，首屏加载时间长

2.为什么说Vue是一个渐进式框架？

渐进式：通俗点讲就是，你想用啥你就用啥，没有特殊要求，你想用component就用，不用也行，你想用vuex就用，不用也行。

3.Vue跟React的区别？

  • 相同点
    • 都使用了虚拟dom
    • 组件化开发
    • 都是单向数据流（父子组件之间，不建议子修改父传下来的数据）
    • 都支持服务端渲染
  • 不同点
    • React是jsx语法，Vue是template
    • 数据变化React手动（setState）,Vue自动（初始化已把data做响应式处理）
    • React单向绑定，Vue双向绑定
    • React的Redux,Vue的Vuex

4.MVVM是什么？和MVC有何区别呢？

MVC：Controller将Model的数据展示在View上

  • Model(模型)：负责从数据库取数据
  • View(视图)：负责展示数据
  • Controller(控制器)：用户交互的地方，例如点击事件等等

MVVM:实现了 View 和 Model 的自动同步，也就是当 Model 的属性改变时，我们不用再自己手动操作 Dom 元素，来改变 View 的显示，而是改变属性后该属性对应 View 层显示会自动改变（对应Vue数据驱动的思想）

  • VM(View-Model):做了两件事达到了数据的双向绑定
    • 一是将模型转化成视图，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定
    • 二是将视图转化成模型，即将所看到的页面转化成后端的数据。实现的方式是：DOM事件监听

区别
整体看来，MVVM 比 MVC 精简很多，不仅简化了业务与界面的依赖，还解决了数据频繁更新的问题，不用再用选择器操作 DOM 元素。因为在 MVVM 中，View 不知道 Model 的存在，Model 和 ViewModel 也观察不到 View，这种低耦合模式提高代码的可重用性

Vue是不是MVVM框架？

Vue是MVVM框架，但是不是严格符合MVVM，因为MVVM规定Model和View不能直接通信，而Vue的ref可以做到这点

永恒钻石 ⭐️⭐️

5.使用过哪些修饰符？

Vue常用修饰符

6.使用过那些内部指令？

Vue常用内部指令

7.组件通信方式有哪些？

  • 父组件传值给子组件，子组件使用props进行接受
  • 子组件传值给父组件，子组件使用$emit+事件对父组件进行传值
  • 组件中可以使用$parent和$children获取到父组件实例和子组件实例，进而获取数据
  • 使用$attrs和$listeners，在对一些组件进行二次封装时可以方便传值，例如A->B->C
  • 使用$refs获取组件实例，进而获取数据
  • 使用Vuex进行状态管理
  • 使用eventBus进行跨组件触发事件，进而传递数据
  • 使用provide和inject(没用过)
  • 使用浏览器缓存，例如localStorage

8.如何设置动态class，动态style？

  • 动态class对象：<div :class="{ 'is-active': true, 'red': isRed }"></div>
  • 动态class数组：<div :class="['is-active', isRed ? 'red' : '' ]"></div>
  • 动态style对象：<div :style="{ color: textColor, fontSize: '18px' }"></div>
  • 动态style数组：<div :style="[{ color: textColor, fontSize: '18px' }, { fontWeight: '300' }]"></div>

9.v-if和v-show的区别

v-if是通过控制dom元素的删除和生成来实现显隐，每一次显隐都会使组件重新跑一遍生命周期，因为显隐决定了组件的生成和销毁
v-show是通过控制dom元素的css样式来实现显隐藏，不会销毁
频繁或者大数量显隐使用v-show,否则使用v-if

10.计算属性和普通属性的区别

计算属性是基于他们的依赖进行缓存的，只有相关依赖发生变化时，他们才会重新取值

计算属性不支持异步，内有异步操作时无效，无法监听数据变化

声明的计算属性非常大，并且访问量次数很多，改变时间少，就用computed

11.computed和watch有何区别？

  • computed是依赖以有的变量来计算一个目标变量，大多数情况都是多个变量凑在一起计算出一个变量，并且computed具有缓存机制，依赖值不变的情况下会直接读取缓存进行服用，computed不能进行异步操作
  • watch是监听某一个变量的变化，并执行相对应的回调函数，通常是一个变量的变化决定多个变量的变化，watch可以进行异步操作
  • 简单记就是：一般情况下computed是多对一，watch是一对多

13.Vue的生命周期？

Vue生命周期

14.为什么v-if和v-for不建议用在同一标签？

在vue2中，v-for优先级是高于v-if的,写在一起会v-for把元素都遍历出来，然后在根据v-if来进行判断，这样会渲染多余的节点，增加无用的dom操作，建议使用computed来解决这个问题

15.Vuex有哪些属性?用处是什么？

Vuex

  • State: 定义了应用状态的数据结构，可以载这里设置默认的初始状态
  • Getter: 允许组件从Store中获取数据，mapGetters辅助函数仅仅是将store中的getter映射到局部计算属性
  • Mutation: 是唯一更改store中状态的方法，且必须是同步函数
  • Actions: 用于提交mutation,而不是直接变更状态，可以包含任意异步操作
  • Module: 允许将单一的Store拆分为多个store且同时保存在单一的状态树种

至尊星耀 ⭐️⭐️⭐️

16.不需要响应式的数据应该怎么处理？

有一些数据，从始至终都未曾改变，这种死数据，既然不改变，那也就不需要对他做响应式处理了，不然只会做一些无用功消耗性能，比如一些写死的下拉框，写死的表格数据，这些数据量大的死数据，如果都进行响应式处理，那会消耗大量性能`

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 方法一：将数据定义在data之外
data () {
    this.list1 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    this.list2 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    this.list3 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    this.list4 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    this.list5 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    return {}
 }
    
// 方法二：Object.freeze()
data () {
    return {
        list1: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        list2: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        list3: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        list4: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        list5: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
    }
 }

17.父子组件的生命周期顺序

父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMounted -> 子mounted -> 父mounted

18.对象新属性无法更新视图，删除属性无法更新视图，为什么？怎么办？

  • 原因：Object.defineProperty没有对对象的新属性进行属性劫持
  • 对象新属性无法更新视图：使用 Vue.$set(obj,key,value),组件中this.$set(obj,key,value)
  • 删除属性无法更新视图：使用Vue.$delete(obj,key),组件中this.$delete(obj,key)

19.自定义指令

8个非常实用的Vue自定义指令

Vue限制input仅能输入正整数或浮点数指令

20.为什么不建议用index做key?为什么不建议用随机数做key?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<div v-for="(item, index) in list" :key="index">{{item.name}}</div>

list: [
    { name: '小明', id: '123' },
    { name: '小红', id: '124' },
    { name: '小花', id: '125' }
]

渲染为
<div key="0">小明</div>
<div key="1">小红</div>
<div key="2">小花</div>

现在我执行 list.unshift({ name: '小林', id: '122' })

渲染为
<div key="0">小林</div>
<div key="1">小明</div>
<div key="2">小红</div>
<div key="3">小花</div>


新旧对比

<div key="0">小明</div>  <div key="0">小林</div>
<div key="1">小红</div>  <div key="1">小明</div>
<div key="2">小花</div>  <div key="2">小红</div>
                         <div key="3">小花</div>

可以看出，如果用index做key的话，其实是更新了原有的三项，并新增了小花，虽然达到了渲染目的，但是损耗性能

现在我们使用id来做key，渲染为

<div key="123">小明</div>
<div key="124">小红</div>
<div key="125">小花</div>

现在我执行 list.unshift({ name: '小林', id: '122' })，渲染为

<div key="122">小林</div>
<div key="123">小明</div>
<div key="124">小红</div>
<div key="125">小花</div>

新旧对比

                           <div key="122">小林</div>
<div key="123">小明</div>  <div key="123">小明</div>
<div key="124">小红</div>  <div key="124">小红</div>
<div key="125">小花</div>  <div key="125">小花</div>

可以看出，原有的三项都不变，只是新增了小林这个人，这才是最理想的结果

用index和用随机数都是同理，随机数每次都在变，做不到专一性

21.nextTick的用处

Vue采用的是异步更新的策略，同一事件循环内多次修改，会统一（批处理）进行一次视图更新，节省性能。所以会出现数据更新，视图还没有更新，这时候拿页面的数据还是上一次的数据，想要拿到最新的数据就需要使用this.$nextTick

最强王者 ⭐️⭐️⭐️⭐️

22.Vue响应式是怎么实现的

整体思路是数据劫持 + 观察者模式

对象内部通过 defineReactive 方法，使用 Object.defineProperty 将属性进行劫持（只会劫持已经存在的属性），数组则是通过重写数组方法来实现。当页面使用对应属性时，每个属性都拥有自己的dep属性，存放他所依赖的 watcher（依赖收集），当属性变化后会通知自己对应的 watcher 去更新(派发更新)。

可以看我的这篇Vue响应式原理

23.Vue的模版编译原理

可以看我的这篇Vue模版编译原理

24.watcher和computed的实现

都是通过watcher来实现的，watcher分为

  • 渲染Watcher：变量修改时，负责通知HTML里的重新渲染
  • computed Watcher：变量修改时，负责通知computed里依赖此变量的computed属性变量的修改
  • user Watcher：变量修改时，负责通知watch属性里所对应的变量函数的执行
1
2
3
4
// watch时 exprOrFn是一个字符串 cb为watch执行的回调函数 {user:true}
watch 是 new Watcher(vm,exprOrFn,{user:true})

computed 是 new Watcher(vm,getter,()=>{},{lazy:true})

时间长，忘的有点多，随后补充

25.Vue.set方法的原理？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function set(target, key, val) {
    // 判断是否是数组
    if (Array.isArray(target)) {
        // 判断谁大谁小
        target.length = Math.max(target.length, key)
        // 执行splice
        target.splice(key, 1, val)
        return val
    }

    const ob = target.__ob__

    // 如果此对象没有不是响应式对象，直接设置并返回
    if (key in target && !(key in target.prototype) || !ob) {
        target[key] = val
        return val
    }

    // 否则，新增属性，并响应式处理
    defineReactive(target, key, val)
    return val
}

26.Vue.delete方法的原理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function del (target, key) {
    // 判断是否为数组
    if (Array.isArray(target)) {
        // 执行splice
        target.splice(key, 1)
        return
    }

    const ob = target.__ob__

    // 对象本身就没有这个属性，直接返回
    if (!(key in target)) return


    // 否则，删除这个属性
    delete target[key]

    // 判断是否是响应式对象，不是的话，直接返回
    if (!ob) return
    // 是的话，删除后要通知视图更新
    ob.dep.notify()
}

27.nextTick的原理？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
let callbacks = []; //回调函数
let pending = false;
function flushCallbacks() {
  pending = false; //把标志还原为false
  // 依次执行回调
  for (let i = 0; i < callbacks.length; i++) {
    callbacks[i]();
  }
}
let timerFunc; //先采用微任务并按照优先级优雅降级的方式实现异步刷新
if (typeof Promise !== "undefined") {
  // 如果支持promise
  const p = Promise.resolve();
  timerFunc = () => {
    p.then(flushCallbacks);
  };
} else if (typeof MutationObserver !== "undefined") {
  // MutationObserver 主要是监听dom变化 也是一个异步方法
  let counter = 1;
  const observer = new MutationObserver(flushCallbacks);
  const textNode = document.createTextNode(String(counter));
  observer.observe(textNode, {
    characterData: true,
  });
  timerFunc = () => {
    counter = (counter + 1) % 2;
    textNode.data = String(counter);
  };
} else if (typeof setImmediate !== "undefined") {
  // 如果前面都不支持 判断setImmediate
  timerFunc = () => {
    setImmediate(flushCallbacks);
  };
} else {
  // 最后降级采用setTimeout
  timerFunc = () => {
    setTimeout(flushCallbacks, 0);
  };
}

export function nextTick(cb) {
  callbacks.push(cb);
  if (!pending) {
    pending = true;
    timerFunc();
  }
}

28.key有什么用？说说diff算法吧？

看大佬写的 为什么 Vue 中不要用 index 作为 key？（diff 算法详解）

荣耀王者 ⭐️⭐️⭐️⭐️⭐️

29.子组件改变props里的数据会发生什么?

1
2
3
4
5
6
7
8
9
10
11
12
13
props: {
    item: {
      default: () => ({}),
    }
  }
created() {
    // 不报错，并且父级数据会跟着变
    this.item.name = 'aaa';
    
    // 会报错，跟基础类型报错一样
    this.item = 'sss'
  },

30.watch的immediate属性有什么用？

比如平时created时要请求一次数据，并且当搜索值改变，也要请求数据，我们会这样写

1
2
3
4
5
6
7
8
created(){
  this.getList()
},
watch: {
  searchInputValue(){
    this.getList()
  }
}

使用immediate完全可以这么写，当它为true时，会初始执行一次

1
2
3
4
5
6
watch: {
  searchInputValue:{
    handler: 'getList',
    immediate: true
  }
}

31.watch监听一个对象时，如何排除某些属性的监听

下面代码是，params发生改变就重新请求数据，无论是a，b，c，d属性改变

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
data() {
    return {
      params: {
        a: 1,
        b: 2,
        c: 3,
        d: 4
      },
    };
  },
watch: {
    params: {
      deep: true,
      handler() {
        this.getList;
      },
    },
  }

但是如果我只想要a，b改变时重新请求，c，d改变时不重新请求呢？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
mounted() {
  getList(){
    Object.keys(this.params)
      .filter((_) => !["c", "d"].includes(_)) // 排除对c，d属性的监听
      .forEach((_) => {
        this.$watch((vm) => vm.params[_], handler, {
          deep: true,
        });
      });
  }
},
data() {
    return {
      params: {
        a: 1,
        b: 2,
        c: 3,
        d: 4
      },
    };
  },
watch: {
    params: {
      deep: true,
      handler() {
        this.getList;
      },
    },
  }

32.computed如何实现传参？

1
2
3
4
5
6
7
8
9
10
11
// html
<div>{{ total(3) }}

// js
computed: {
  total() {
    return function(n) {
        return n * this.num
        }
  },
}

33.vue的hook的使用

  • 同一组件中使用

这是我们常用的定时器的方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export default{
  data(){
    timer:null  
  },
  mounted(){
      this.timer = setInterval(()=>{
      //具体执行内容
      console.log('1');
    },1000);
  }
  beforeDestory(){
    clearInterval(this.timer);
    this.timer = null;
  }
}

上面做法不好的地方在于：得全局多定义一个timer变量，可以使用hook这么做：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export default{
  methods:{
    fn(){
      let timer = setInterval(()=>{
        //具体执行代码
        console.log('1');
      },1000);
      this.$once('hook:beforeDestroy',()=>{
        clearInterval(timer);
        timer = null;
      })
    }
  }
}

  • 父子组件使用

如果子组件需要在mounted时触发父组件的某一个函数，平时都会这么写：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//父组件
<rl-child @childMounted="childMountedHandle"
/>
method () {
  childMountedHandle() {
  // do something...
  }
},

// 子组件
mounted () {
  this.$emit('childMounted')
},

使用hook的话可以更方便

1
2
3
4
5
6
7
8
9
//父组件
<rl-child @hook:mounted="childMountedHandle"
/>
method () {
  childMountedHandle() {
  // do something...
  }
},

34.动态指令和参数使用过？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
    ...
    <aButton @[someEvent]="handleSomeEvent()" :[someProps]="1000" />...
</template>
<script>
  ...
  data(){
    return{
      ...
      someEvent: someCondition ? "click" : "dbclick",
      someProps: someCondition ? "num" : "price"
    }
  },
  methods: {
    handleSomeEvent(){
      // handle some event
    }
  }  
</script>

35.相同的路由组件如何重新渲染？

开发人员经常遇到的情况是，多个路由解析为同一个Vue组件。问题是，Vue出于性能原因，默认情况下共享组件将不会重新渲染，如果你尝试在使用相同组件的路由之间进行切换，则不会发生任何变化。

1
2
3
4
5
6
7
8
9
10
11
const routes = [
  {
    path: "/a",
    component: MyComponent
  },
  {
    path: "/b",
    component: MyComponent
  },
];

如果依然想重新渲染，怎么办呢？可以使用key

1
2
3
4
<template>
    <router-view :key="$route.path"></router-view>
</template>

36.自定义v-model

默认情况下，v-model 是 @input 事件侦听器和 :value 属性上的语法糖。但是，你可以在你的Vue组件中指定一个模型属性来定义使用什么事件和value属性——非常棒！

1
2
3
4
5
6
7
export default: {
  model: {
    event: 'change',
    prop: 'checked'  
  }
}

37.如何将获取data中某一个数据的初始状态？

在开发中，有时候需要拿初始状态去计算。例如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
data() {
    return {
      num: 10
  },
mounted() {
    this.num = 1000
  },
methods: {
    howMuch() {
        // 计算出num增加了多少，那就是1000 - 初始值
        // 可以通过this.$options.data().xxx来获取初始值
        console.log(1000 - this.$options.data().num)
    }
  }

38.计算变量时，methods和computed哪个好？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div>
    <div>{{howMuch1()}}</div>
    <div>{{howMuch2}}</div>
    <div>{{index}}</div>
</div>

data: () {
    return {
         index: 0
       }
     }
methods: {
    howMuch1() {
        return this.num + this.price
    }
  }
computed: {
    howMuch2() {
        return this.num + this.price
    }
  }

computed会好一些，因为computed会有缓存。例如index由0变成1，那么会触发视图更新，这时候methods会重新执行一次，而computed不会，因为computed依赖的两个变量num和price都没变。