资讯专栏INFORMATION COLUMN

管中窥Vue

yy736044583 / 381人阅读

摘要:博客文章链接管中窥和的相同点和不同点与的相同都使用了提供了响应式和组件化的视图组件将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库。在复杂的情况下,可以考虑使用官方提供的状态管理模式来进行管理。

博客文章链接:管中窥Vue

VueAngularReact.js的相同点和不同点?

React的相同:

都使用了Virtual DOM

提供了响应式和组件化的视图组件

将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库。

React的区别:

组件的响应式渲染

React的组件的数据状态发生变化时,它会以该组件为根,重新渲染整个组件子树;而Vue不只去渲染需要渲染的组件。

HTML+CSS的编写

React使用的JSX语法,将HTMLCSSJS混写;而Vue使用的是templates模板方式,完全融合与经典的Web技术。

Angular的区别:

Angular 1对比,Vue的性能更加优越,Angular性能会随着watcher的增加而变慢,而且Angular中一些watcher会触发另一个更新,使得“脏检查循环”可能会运行多次。

Angular事实上必须用TypeScript来开发,而且Angular对于TS的支持非常全面,而Vue暂时对于TS的支持还在改进阶段。

Vue的体积更小,一个包含了 vuex + vue-routerVue 项目 (30kb gzipped) 相比使用了这些优化的 angular-cli 生成的默认项目尺寸 (~130kb) 还是要小得多。

Vue中的MVVM模型?

Vue是以数据为驱动的,Vue自身将DOM和数据进行绑定,一旦创建绑定,DOM和数据将保持同步,每当数据发生变化,DOM会跟着变化。

ViewModelVue的核心,它是Vue的一个实例。Vue实例是作用在某个HTML元素上的,这个HTML元素可以是body,也可以是某个id所指代的元素。 DOM ListenersData Bindings是实现双向绑定的关键。DOM Listeners监听页面所有ViewDOM元素的变化,当View发生变化,Model层的数据随之变化;Data Bindings监听Model层的数据,当数据发生变化,View层的DOM元素随之变化。

v-ifv-show指令有什么区别?

v-show对应的值无论是true还是false,对应Html元素都会存在于浏览器的文档中;而v-if如果是false的话,直接不在文档中了。

如何阻止Vue中的绑定事件不发生冒泡?

可以使用“事件修饰符”来处理事件冒泡,如:v-on:click.stop阻止事件冒泡或v-on:submit.prevent阻止默认事件。

父、子组件间是如何通信的?

Vue中,每个组件实例的作用域是孤立的。这也意味着不能(也不应该)在子组件的模板内直接应用父组件的数据。父组件通过Props向子组件传递数据,而子组件通过Events向父组件传递数据。

非父子层级的组件如何实现通信?

简单的应用场景下,可以使用一个空的Vue实例作为中央事件总线。

在复杂的情况下,可以考虑使用Vue官方提供的状态管理模式——Vuex来进行管理。

什么是动态组件?它的作用是什么?

通过使用保留的 元素,动态地绑定到它的 is 特性,我们让多个组件可以使用同一个挂载点,并可以动态地切换。

除此之外,Vue还提供了keep-alve指令。keep-alive指令允许把切换出去的组件保留在内存中,并保留它的状态或避免重新渲染。

为什么组件中的data属性的值必须是一个函数?

因为在一个组件被多次引用的情况下,如果data的值是一个Object的话,那么由于Object是一个引用类型,所以即使是该组件被多次引用,而其实操作的是同一个对象,最终导致了引用该组件的所有位置都同步的显示了。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/99217.html

相关文章

  • 轻舟已过万重山——真正的技术派公司是怎么联调、测试和发布的?

    摘要:这么思考问题的原因也很简单,我们笃信工程师文化,靠技术而不是管理解决问题,正如陈皓同学所言如果你是一个技术公司,你就会更多的相信技术而不是管理。 郑昀 创建于2017/3/8 最后更新于2017/3/10 关键词:研发协作,Docker,环境变量,开发联调,环境维护,虚拟机,中间件,配置与代码分离,git,jenkins 开发联调,测试,预发,生产,稍微上规模的互联网技术团队,每一次...

    makeFoxPlay 评论0 收藏0
  • 轻舟已过万重山——真正的技术派公司是怎么联调、测试和发布的?

    摘要:这么思考问题的原因也很简单,我们笃信工程师文化,靠技术而不是管理解决问题,正如陈皓同学所言如果你是一个技术公司,你就会更多的相信技术而不是管理。 郑昀 创建于2017/3/8 最后更新于2017/3/10 关键词:研发协作,Docker,环境变量,开发联调,环境维护,虚拟机,中间件,配置与代码分离,git,jenkins 开发联调,测试,预发,生产,稍微上规模的互联网技术团队,每一次...

    yexiaobai 评论0 收藏0
  • PyShark入门(1):简介

    摘要:如主页文档中展示的打开存储的捕获文件从网络接口上进行捕获使用或者方法建立对象后,在捕获和数据包层面就会有多个方法和属性可用。的强大在于可以调用内建的所有数据包解码器。后续文章中会说明需要那些措施来保留内存。下一篇入门和模块 原文地址:http://zodiacg.net/2016/07/in... 本系列文章译自thePacketGeek的系列文章。原创翻译,转载请注明出处。 文章作者...

    includecmath 评论0 收藏0
  • 苹果财报数据分析

    摘要:而且苹果也提供了专门的页面供下载你可以手动下载不同格式的年报数据。反过来,这两年国行销量下降,对苹果也是很伤注年数据实为大中华区。 苹果昨天夜里发布了今年份儿的新手机: iPhone Xs 、史上最大款 iPhone Xs Max ,以及史上最贵廉价版 iPhone Xr 。 看着动辄万元的价格,我不禁摸了摸自己的腰。 showImg(https://segmentfault.com/...

    yearsj 评论0 收藏0
  • JS中的双向数据绑定及Object.defineProperty方法

    摘要:,而且每种框架双向数据绑定的实现方式都不太一致,比如内部使用的是脏检查,而内部实现方式的本质是设置属性访问器。在中也有类似的概念,不过不叫魔术方法,而是叫做访问器。 缘起前几天在看一些流行的迷你mvvm框架(比如avalon.js、 vue.js 这种较轻的框架,而非Angularjs、Emberjs这种较重的框架)的实现。现代流行的mvvm框架一般都会将数据双向绑定(two-ways...

    szysky 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<