Vue 相关问题整理

前面的话

Vue只会使用而不懂其原理也是不行的，小柒将总结一系列Vue相关问题，从基本知识到源码分析都进行一遍梳理。

基本知识点（1）

(1) Vue.js的两个核心是什么？

• 数据驱动（双向数据绑定）
• 组件系统：包括模板（template）、初始数据（data）、接受的外部参数(props)、方法（methods）、生命周期构造函数、私有资源等

(2) 对于Vue是一套构建用户界面的渐进式框架的理解

• 渐进式的含义: 没有多做职责之外的事。

• vue.js只提供了vue-cli中最核心的组件系统和双向数据绑定。像vuex、vue-router都是围绕vue.js开发的库。按自己的需求去下载使用。

(3) 说一说 Vue中常见的指令

• v-if、v-show、v-for、v-bind、v-on、v-model、v-once（只渲染元素和组件一次，之后重新渲染时，该元素或组件将被当做静态节点跳过，不会更新）

(4) v-if与v-show的区别是什么？

• 共同点：v-if与v-show都可以动态的显示DOM元素

• 区别

  • v-if是真正的条件渲染，使用v-if时，会真正的销毁和重建元素；而v-show时的元素，始终被渲染，并且保留dom，只是css的display属性的切换。
  • v-if是惰性的，如果在初始渲染时条件为假，则什么也不做。直到条件第一次变为真是，才开始渲染条件块。而v-show不管初始条件是什么，元素总是被渲染，只是简单的css切换。
  • v-if有更高的切换消耗；v-show有更高的初始渲染消耗
  • v-if适合运行条件很少改变的场景；v-show适合频繁切换的场景

(5) Vue中常见的修饰符

• v-on常见修饰符

  • .stop 调用event.stopProgagation() ,取消事件冒泡行为

  • .prevent 调用event.preventDefault(), 取消事件默认行为

  • .capture 添加事件侦听器时使用capture模式

  • .self 只当事件是从侦听器绑定的元素本身触发时才触发回调

  • .native 监听组件根元素的原生事件

    // 在组件上监听自定义事件：
     <my-component @increase="handleGetTotal"></my-component>
    // 在组件上监听DOM事件，使用native表示监听是一个原生click事件
    <my-component @click.native="handleGetTotal"></my-component>
    

• v-bind指令常用修饰符

  • .prop 被用于绑定DOM 属性
  • .camel 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持)
  • .sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

• v-model指令常用修饰符：

  • .lazy ： 在输入框中，v-model默认是在input事件中同步输入框的数据。使用.lazy，则数据是在change事件中同步，比如失去焦点或按回车键时改变。
  • .number ：将输入框中的数据类型转为Number类型。
  • .trim：可以自动过滤输入的首尾空格。

(6) v-on可以监听多个方法吗？

• v-on可以监听多个方法，比如：

  <input type="text" :value="name" @input="onInput" @focus="onFocus" @blur="onBlur">
  

• 但是同一种事件类型的方法，会报错：

  <a href="javascript:;" @click="methodOne" @click="methodTwo"></a>
  

(7) Vue中的key值的作用

• key值的作用：管理可复用的元素。

• 由于Vue会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做使得Vue变得很快，但是总是不符合实际需求。在2.2.0+的版本里，当组件中使用v-for时，key是必须的。

• 给元素设置key值之后，该元素被切换时，就会重新渲染。

(8) Vue事件中如何使用event对象？

• 在事件中使用event对象要使用$符号。

  <a href="javascript:;" data-id="12" @click="showEvent($event)"> event</a>
  // js部分
  showEvent(event){
  	// 获取自定义事件data-id
  	console.log(event.target.dataset.id);
  	// 阻止事件冒泡
  	event.stopPropagation();
  	// 阻止默认
  	event.preventDefault();
  }
  

(9) Vue组件中data为什么必须是函数？

• 因为一个组件是可以共享的，但它的data本应该是私有的，如果组件的data是一个对象，那么子组件中的data属性值会相互污染。

• 所以一个data选项必须是函数，在函数里面返回一个对象，这个对象将是唯一的，这样每个组件的data属性都是独立的。

(10) 说一说$nextTick的使用

• Vue是异步更新队列，$nextTick是用来告知DOM是什么时候更新完的。

• 异步更新队列

  Vue在观察到数据变化时，并不是直接更新DOM，而是开启一个队列，并在缓存在同一个事件循环中发生的所有数据变化。在缓存中除去重复数据，从而避免不必要的计算与DOM操作。然后在下一个事件循环的tick中，Vue刷新队列并执行实际工作。

  比如，在一个for循环中改变数据100次，其实它只会执行最后一次改变，如果没有这种机制，DOM就会重绘100次，这是一个很大的开销。

实例：

<div id="app">
    <div id="div" v-if="showDiv">这是一段文本</div>
    <button @click="getText">获取div内容</button>
</div>
<script>
var app = new Vue({
    el : "#app",
    data:{
        showDiv : false
    },
    methods:{
        getText:function(){
            this.showDiv = true;
            // DOM 更新完成之后 在执行里面的回调
            this.$nextTick(function(){
                  var text = document.getElementById('div').innnerHTML;
                 console.log(text);  
            });
        }
    }
})
</script>

具体实例：异步更新队列

(11) v-for与v-if的优先级

• 当它们处于同一节点时，v-for的优先级比v-if更高，v-if对for循环中的每一项都有用。

  <li v-for="todo in todos" v-if="!todo.isComplete">
    {{ todo }}
  </li>
  

• 如果想有条件的使用for循环，可以将v-if加在v-for的外层元素上。

  <ul v-if="todos.length">
    <li v-for="todo in todos">
      {{ todo }}
    </li>
  </ul>
  <p v-else>No todos left!</p>