vue---基本原理（二）

1、slot的基础理解

        slot又名插槽，是vue的内容分发机制，组件内部的模板引擎使用slot元素作为承载分发的出口。是子组件的一个模板标签元素，而这一个标签元素是否显示，以及怎么显示，是由父元素控制的。slot又分为默认插槽、具名插槽、作用域插槽。

        默认插槽：即匿名插槽，slot没有指明name属性值，就是一个默认插槽。一个组件中只能有一个默认插槽。

        具名插槽：带有name属性值的插槽，一个组件中可以有多个具名插槽。

        作用域插槽：既可以是匿名插槽，又可以是具名插槽，该插槽的不同点在于是在子组件渲染作用域插槽时，可以将子组件内部的数据传递给父组件，让父组件根据子组件传递过来的数据，决定如何渲染该插槽。实现：当子组件实例化时，获取到父组件传入的slot内容，存放在vm.$slot中，默认插槽为vm.$slot.default，具名插槽为vm.$slot.name，当组件执行渲染函数时，遇到slot标签，使用$slot的内容进行替换，此时可为插槽传递数据。

2、常见的事件修饰符

• .stop：等同于 JavaScript 中的event.stopPropagation()，防止事件冒泡；
• .prevent：等同于 JavaScript 中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）；
• .capture：与事件冒泡的方向相反，事件捕获由外到内；
• .self：只会触发自己范围内的事件，不包含子元素；
• .once：只会触发一次

3、v-if、v-show、v-html的原理，即v-if、v-show的区别

• v-if会调用addIfCondition方法，生成vnode的时候，会忽略对应节点，render的时候就不会渲染
• v-show会生成vnode，render的时候会渲染成真是的节点，只是在render的过程中，会修改节点的display属性
• v-html会先移除节点下的所有节点，调用html方法，通过addProp添加innerHTML属性，并设置值

        v-if与v-show的区别：

• 手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；
• 编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
• 编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译; v-show是在任何条件下，无论首次条件是否为真，都被编译，然后被缓存，而且DOM元素保留；
• 性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
• 使用场景：v-if适合运营条件不大可能改变；v-show适合频繁切换。

 4、data为什么是一个函数而不是一个对象

        js中的对象是引用数据类型，当多个实例引用一个对象的时候，只要一个实例操作这个对象，其他实例中的数据也会发生变化。vue中，数据以函数返回值的形式定义，当复用组件时，会返回一个新的data，即每个组件有自己的私有数据空间，不会感染其他组件的操作。

5、vue单页面与多页面的区别

• SPA单页面应用：指只有一个主页面的应用，一开始只需要加载一次js、css等相关资源。所有内容都包含在主页面中，对每一个模块功能组件化。单页面应用跳转，就是切换相关组件，仅刷新局部资源。
• MPA多页面应用：指有多个独立页面的应用，每个页面要重复加载js、css等相关资源。多页面跳转，需要整页刷新资源。