管中窥Vue

62次阅读

共计 1474 个字符,预计需要花费 4 分钟才能阅读完成。

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

正文完
 0