管中窥Vue
博客文章链接：管中窥Vue
Vue和Angular、React.js的相同点和不同点？
与React的相同：
- 都使用了
Virtual DOM - 提供了响应式和组件化的视图组件
- 将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。
与React的区别：
-
组件的响应式渲染
-
React的组件的数据状态发生变化时，它会以该组件为根，重新渲染整个组件子树；而Vue不只去渲染需要渲染的组件。
-
-
HTML+CSS的编写-
React使用的JSX语法，将HTML、CSS和JS混写；而Vue使用的是templates模板方式，完全融合与经典的Web技术。
-
与Angular的区别：
- 与
Angular 1对比，Vue的性能更加优越，Angular性能会随着watcher的增加而变慢，而且Angular中一些watcher会触发另一个更新，使得“脏检查循环”可能会运行多次。 -
Angular事实上必须用TypeScript来开发，而且Angular对于TS的支持非常全面，而Vue暂时对于TS的支持还在改进阶段。 -
Vue的体积更小，一个包含了vuex + vue-router的Vue项目 (30kb gzipped) 相比使用了这些优化的angular-cli生成的默认项目尺寸 (~130kb) 还是要小得多。
Vue中的MVVM模型？
-
Vue是以数据为驱动的，Vue自身将DOM和数据进行绑定，一旦创建绑定，DOM和数据将保持同步，每当数据发生变化，DOM会跟着变化。 -
ViewModel是Vue的核心，它是Vue的一个实例。Vue实例是作用在某个HTML元素上的，这个HTML元素可以是body，也可以是某个id所指代的元素。DOM Listeners和Data Bindings是实现双向绑定的关键。DOM Listeners监听页面所有View层DOM元素的变化，当View发生变化，Model层的数据随之变化；Data Bindings监听Model层的数据，当数据发生变化，View层的DOM元素随之变化。
v-if和v-show指令有什么区别？
-
v-show对应的值无论是true还是false，对应Html元素都会存在于浏览器的文档中；而v-if如果是false的话，直接不在文档中了。
如何阻止Vue中的绑定事件不发生冒泡？
- 可以使用“事件修饰符”来处理事件冒泡，如：
v-on:click.stop阻止事件冒泡或v-on:submit.prevent阻止默认事件。
父、子组件间是如何通信的？
- 在
Vue中，每个组件实例的作用域是孤立的。这也意味着不能（也不应该）在子组件的模板内直接应用父组件的数据。父组件通过Props向子组件传递数据，而子组件通过Events向父组件传递数据。
非父子层级的组件如何实现通信？
- 简单的应用场景下，可以使用一个空的
Vue实例作为中央事件总线。 - 在复杂的情况下，可以考虑使用
Vue官方提供的状态管理模式——Vuex来进行管理。
什么是动态组件？它的作用是什么？
- 通过使用保留的
<component>元素，动态地绑定到它的is特性，我们让多个组件可以使用同一个挂载点，并可以动态地切换。 - 除此之外，
Vue还提供了keep-alve指令。keep-alive指令允许把切换出去的组件保留在内存中，并保留它的状态或避免重新渲染。
为什么组件中的data属性的值必须是一个函数？
- 因为在一个组件被多次引用的情况下，如果
data的值是一个Object的话，那么由于Object是一个引用类型，所以即使是该组件被多次引用，而其实操作的是同一个对象，最终导致了引用该组件的所有位置都同步的显示了。
