脚本宝典收集整理的这篇文章主要介绍了

Vue学习心得之理解原理篇

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h2 id="articleHeader0"> <strong>写这篇文章的初衷是想总结自己的学习经验,希望对看到的人有所帮助,如有错误,请您指出,以免误人子弟,十分感谢</strong>!</h2> <hr> <p>现在前端比较流行的框架有 <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>、<a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a>、<a href="http://www.js-code.com/tag/angular" title="Angular" target="_blank">Angular</a>三种。个人比较看好<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>,性能强大,而且可学性很强,比较适合新手学习。</p> <p>首先vue是一款轻量级的<strong>MVVM框架</strong>,压缩完之后只有20k+,这个是对比angular、react的明显优势,而且学习曲线平滑,不用像学react一样,还要学习react全家桶套餐。也不用像学习angular一样,要记很多概念,angular的开发思维很像后台的开发思维(例:依赖注入),也不适合前端小白。<a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>还结合了<strong>angular的指令</strong>跟<strong>react的组件化思想</strong>,以上大概介绍了vue的优势,想了解vue对比其他框架的细节,可以去官网上查看<a href="https://cn.vuejs.org/v2/guide/comparison.html" rel="nofollow noreferrer" target="_blank">https://cn.vuejs.org/v2/guide...</a>。</p> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_4_expand" style="display:inline-table;border:none;height:175px;margin:0;padding:0;position:relative;visibility:visible;width:697px;background-color:transparent;"><ins id="aswift_4_anchor" style="display:block;border:none;height:175px;margin:0;padding:0;position:relative;visibility:visible;width:697px;background-color:transparent;"><iframe width="697" height="175" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_4" name="aswift_4" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p>Vue的核心思想是<strong>数据驱动(<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>是数据的一种自然映射)</strong>,<em>怎么理解尼?</em>如果不用vue,那么像我们从后台接口获取数据的时候,需要手动的去修改<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>来触发视图的变化,或者前端交互需要改变数据的时候,一样需要手动去操作<a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a>,这样做不仅繁琐而且非常容易出错!用了vue就省去了去手动操作DOM的步骤,你只需要去修改数据,Vue会自动去触发Dom的改变,Vue会通过VM层中的Directives去对Dom做一层封装,当数据发生变化时,会通知指令去触发对应DOM的变化。<strong>数据驱动DOM的变化,DOM是数据的一种自然映射</strong>这句话是不是就懂了一些!Vue还会对视图(View)去做一些监听,当我们修改视图的时候,vue会通过VM层中的DOM Listeners监听到视图的变化,进而通知数据(Model)改变。这就形成了数据的<strong><a href="http://www.js-code.com/tag/%e5%8f%8c%e5%90%91%e7%bb%91%e5%ae%9a" title="双向绑定" target="_blank">双向绑定</a></strong>。具体看下图:</p> <p><span class="img-wrap"><img data-src="/img/bV6ycS?w=548&amp;h=286" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p><em>那么Vue是怎么做到的尼?数据相应原理( <strong>数据(Model)改变如何驱动视图(view)自动更新</strong> )?</em></p> <p>其实监听到DOM的变化相对简单,通过监听绑定的事件就可以实现。关键在于如何获取到数据的变化,这就用到了ES5的<strong>Object.definePrototype</strong>属性,这也是Vue不支持IE6-IE8的原因。(ps:具体怎么驱动改变在本章就不介绍了,后续会写一篇专门的文章来介绍)</p> <p>Vue的另一个核心思想是<strong>组件化,目的是拓展<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>元素,封装一些可重用的代码</strong>。<em>那么什么是组件,怎么写组件?</em>我在刚学习的时候就有这个疑问,其实跟react一样,整个<strong>页面任何一个独立的可视/可交互区域都是一个组件</strong>,它们可以相互嵌套。每一个组件在创建的时候都会生成一个viewModel树(类似DOM树),它与DOM树是一一对应的关系,这个类似DOM的树就是<strong>虚拟DOM</strong>(vDOM)。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="提到vDOM就不得不提vDOM的diff算法原理,本章简单提一嘴,vDOM的节点为虚拟节点(vNODE),Vue即仅在同级的vnode间做diff,递归地进行同级vnode的diff,最终实现整个DOM树的更新(ps:后续会写一篇专门关于diff算法的理解文章)" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code style="word-break: break-word; white-space: initial;">提到vDOM就不得不提vDOM的diff算法原理,本章简单提一嘴,vDOM的节点为虚拟节点(vNODE),Vue即仅在同级的v<a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>间做diff,递归地进行同级vnode的diff,最终实现整个DOM树的更新(<span class="hljs-string">ps:</span>后续会写一篇专门关于diff算法的理解文章)</code></pre> <p><strong>本章主要介绍了VUE的原理和优势,下一章将介绍怎么开始一个做一个VUE项目 并且分享我在开发学习时候疑问,以及一些问题的解决方案</strong></p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

Vue学习心得之理解原理篇

全部内容,希望文章能够帮你解决

Vue学习心得之理解原理篇

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过