Vue 基础面试题（1）

1.在new Vue 中的el属性

new Vue({
    el:"#app" //在vue内部运行机制中，须要根据传递的字符串进行判断，好比,#xxx仍是.xxx，仍是div元素查找
    //el:document.getElementById('app')//更为优化，将元素直接找到，避免了vue来去判断
})
复制代码

2.vue中组件的data使用的是一个函数，而不是直接使用对象

在vue中，组件是可复用的vue实例，一个组件被建立好以后，就可能被用在各个地方，而组件无论被复用了多少次，组件中的data数据都应该是相互隔离，互不影响的，基于这一理念，组件每复用一次，data数据就应该被复制一次，以后，当某一处复用的地方组件内data数据被改变时，其余复用地方组件的data数据不受影响，组件中将data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就返回一份新的data，相似给每一个组件实例建立一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得全部组件实例共用了一份data，就会形成一个变了所有都变得结果

3.请问 v-if 和 v-show 有什么区别：

相同点： 二者都是在判断DOM节点是否要显示

不一样点：

• 实现方式： v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点。 v-show只是在修改元素的css样式，也就是display的属性值，元素始终在Dom树上。

• 编译过程：v-if切换有一个局部编译/卸载的过程，切换过程当中合适地销毁和重建内部的事件监听和子组件； v-show只是简单的基于css切换；

• 编译条件：v-if是惰性的，若是初始条件为假，则什么也不作；只有在条件第一次变为真时才开始局部编译； v-show是在任何条件下（首次条件是否为真）都被编译，而后被缓存，并且DOM元素始终被保留；

• 性能消耗：v-if有更高的切换消耗，不适合作频繁的切换； v-show有更高的初始渲染消耗，适合作频繁的额切换；

4.VUE优化 使用v-if和v-for

缘由：

• 当for和if同时使用时，若是数据发生变化for和if都会同时执行一遍，对性能和展示不友好；
• v-for 比 v-if 具备更高的优先级，这意味着 v-if 将分别重复运行于每一个 v-for 循环中。

解决方案：

• 将if指令添加到父级元素上，这能够避免对每一个列表项进行条件判断。
• 若是须要在列表中过滤掉不须要的某一项，建议使用计算属性。

备注：未完待续，后有更新哦