Vue面试题

1.v-if和v-show的区别以及使用场景?

vue中的 v-if 和 v-show 二者都可以动态的控制元素的隐藏和显示，但是他们控制的原理是不同的。

v-if：v-if是通过控制dom节点的存在与否来控制元素的显隐。控制元素显示或隐藏是把dom元素整个的渲染或者删除，如果删除，也就是页面中不存在这个dom元素，以此达到隐藏的效果；所以v-if在每次切换的时候都会重新创建或者销毁元素，有较高的切换性能消耗；而且v-if是惰性的，如果在初始渲染时条件为假，那就什么也不做，直到条件第一次变为真时，需要渲染时才会开始渲染条件块。

v-show：v-show是通过设置DOM元素的display样式，block为显示，none为隐藏。无论你的初始条件是什么，元素都会被渲染，就是dom元素始终是存在的，v-show只是通过控制css中的display属性来控制他的显示或隐藏；它拥有比较高的初始渲染消耗。

使用场景

　　如果元素需要进行比较频繁的切换的话，推荐使用v-show，

　　如果很少用到切换，或者元素可能永远都不会显示出来的话，就使用v-if。

2.Vue常用指令?

  2.1 v-model指令

在表单控件元素上创建双向数据绑定

  2.2 v-bind指令

绑定属性，注意冒号后面跟标签的属性，属性后面的等号指向数据，它可以简写为冒号。

  2.3 v-on指令

使用v-on我们可以在标签上面绑定事件，通过v-on指令修饰click点击事件，指定事件响应后的处理函数为methods中的对应方法。简写为@。

  2.4 v-text指令

用于更新标签包含的文本，它的作用跟双大括号效果是一样的。插值表达式和v-text指令会被直接解析为了字符串元素（不解析标签属性）。对此Vue提供了另外一个指令：v-html。

  2.5 v-for指令

遍历data中存放的数组数据，实现列表的渲染。（v-for指令除了可以迭代数组，还可以迭代对象和整数）

 

如果要在循环解析的过程中获取每个元素的索引的话可以在循环的时候加上(index,item),例如

 

 

  2.6 v-once指令：只渲染一次，后面元素中的数据再更新变化，都不会重新渲染。例如下面：给<p>标签添加了v-once指令，并且content赋了初始值，第一次渲染的时候input控件和p标签都有了初始值，后面我们再更新content值的时候，p标签的内容不会发生变化。

 

 

  2.7 v-else指令

和v-if指令搭配使用，没有对应的值。当v-if的值false，v-else才会被渲染出来。

  2.8 v-html指令

  可以解析便标签属性。

<script type="text/javascript">
        var vm = new Vue({
            el : "#app",
            data : {
                msg : "<h1>这是一个h1元素内容</h1>"
            }
        });
 </script>

3.vue组件之间如何传值

  3.1父组件向子组件传值

使用 props属性向子组件传递数据。子组件通过props属性接收从父组件传过来的值，而父组件传值的时候使用 v-bind 将子组件中预留的变量名绑定为data里面的数据即可。

  3.2子组件向父组件传值

通过事件传递数据给父组件。子传父的实现方式就是用了 this.$emit 来遍历 getData 事件，首先用按钮来触发 setData 事件，在 setData 中 用 this.$emit 来遍历 getData 事件，最后返回 this.msg。在父组件中，声明了一个方法 getData，用 transferData 事件调用 getUser 方法，获取到从子组件传递过来的参数 username。

• 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
• 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
• 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

3.3非父子组件

        vue 中没有直接子对子传参的方法，建议将需要传递数据的子组件都合并为一个组件。如果一定需要子对子传参，可以先从传到父组件，再传到子组件（相当于一个公共bus文件）。为了便于开发，vue 推出了一个状态管理工具 vuex，可以很方便实现组件之间的参数传递

4.Vue双向绑定原理

       通过数据劫持和发布者订阅者模式，利用Object.defineProperty()这个方法，重新定义了对象获取属性值（get）和设置属性值（set）的操作来实现的。具体实现是用v-model。

5.computed，methods以及watch的区别

computed和methods的区别：computed是计算属性，methods是方法，都可以实现对 data 中的数据加工后再输出。不同的是 computed 计算属性是基于它们的依赖进行缓存的，只有在它的相关依赖发生改变时才会重新求值，否则计算属性会立即返回之前的计算结果，而不必再次执行函数。而对于method ，只要发生重新渲染，methods调用总会执行该函数。
当有一个性能开销比较大的的计算属性 A ，它需要遍历一个极大的数组和做大量的计算，同时可能有其他的计算属性依赖于 A ，这时候，我们就需要缓存。也就是使用 computed 而不是 methods。但对于每次都需要进行重新计算的属性比如下面这个函数的返回值 function () { return Date.now() } ，我们最好使用 methods。
总之：数据量大，需要缓存的时候用 computed ；每次确实需要重新加载，不需要缓存时用 methods 。

computed 和 watch的区别：computed计算属性是通过其他变量计算得来的另一个属性， 计算属性具有缓存，基于它们的依赖进行缓存。只有在它的相关依赖发生改变时才会重新求值，没有变化则直接返回之前的计算结果，不必再次执行函数。计算属性不支持异步，当computed内有异步操作时无效，无法监听数据的变化。而侦听器 watch 是侦听一个特定的值，当该值变化时执行特定的函数。例如分页组件中，我们可以监听当前页码，当页码变化时执行对应的获取数据的函数。watch支持异步操作。