管中窥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
是一个引用类型,所以即使是该组件被多次引用,而其实操作的是同一个对象,最终导致了引用该组件的所有位置都同步的显示了。