<p><code></p> <p><strong>博客文章链接:<a href="https://whjin.github.io/2018/10/31/%E7%AE%A1%E4%B8%AD%E7%AA%A5Vue/" rel="nofollow noreferrer" target="_blank">管中窥Vue</a></strong></p> <blockquote><p> <code><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a></code>和<code><a href="http://www.js-code.com/tag/angular" title="Angular" target="_blank">Angular</a></code>、<code><a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a>.js</code>的相同点和不同点?</p></blockquote> <p><strong>与<code><a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a></code>的相同:</strong></p> <ul> <li>都使用了<code>Virtual <a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a></code> </li> <li>提供了响应式和组件化的视图组件</li> <li>将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库。</li> </ul> <p><strong>与<code><a href="http://www.js-code.com/tag/react" title="浏览关于“React”的文章" target="_blank" class="tag_link">React</a></code>的区别:</strong></p> <ul> <li> <p>组件的响应式渲染</p> <ul> <li> <code>React</code>的组件的数据状态发生变化时,它会以该组件为根,重新渲染整个组件子树;而<code><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a></code>不只去渲染需要渲染的组件。</li> </ul> </li> <li> <p><code><a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>+<a href="http://www.js-code.com/tag/css" title="CSS" target="_blank">CSS</a></code>的编写</p> <ul> <li> <code>React</code>使用的<code><a href="http://www.js-code.com/tag/jsx" title="JSX" target="_blank">JSX</a></code>语法,将<code><a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a></code>、<code><a href="http://www.js-code.com/tag/css" title="CSS" target="_blank">CSS</a></code>和<code>JS</code>混写;而<code><a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a></code>使用的是<code>templates</code>模板方式,完全融合与经典的<code>Web</code>技术。</li> </ul> </li> </ul> <p><strong>与<code><a href="http://www.js-code.com/tag/angular" title="Angular" target="_blank">Angular</a></code>的区别:</strong></p> <ul> <li>与<code><a href="http://www.js-code.com/tag/angular" title="浏览关于“Angular”的文章" target="_blank" class="tag_link">Angular</a> 1</code>对比,<code>Vue</code>的性能更加优越,<code>Angular</code>性能会随着<code>watcher</code>的增加而变慢,而且<code>Angular</code>中一些<code>watcher</code>会触发另一个更新,使得“脏检查循环”可能会运行多次。</li> <li> <code>Angular</code>事实上必须用<code>TypeScript</code>来开发,而且<code>Angular</code>对于<code>TS</code>的支持非常全面,而<code>Vue</code>暂时对于<code>TS</code>的支持还在改进阶段。</li> <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: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 652px; background-color: transparent;"><ins id="aswift_4_anchor" style="display: block; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 652px; background-color: transparent; overflow: hidden; opacity: 0;"><iframe width="652" height="163" 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:652px;height:163px;"></iframe></ins></ins></ins></div> <li> <code>Vue</code>的体积更小,一个包含了 <code>vuex + vue-router</code> 的 <code>Vue</code> 项目 (<code>30kb gzipped</code>) 相比使用了这些优化的 <code>angular-cli</code> 生成的默认项目尺寸 (<code>~130kb</code>) 还是要小得多。</li> </ul> <blockquote><p> <code>Vue</code>中的<code>MVVM</code>模型?</p></blockquote> <ul> <li> <code>Vue</code>是以数据为驱动的,<code>Vue</code>自身将<code><a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a></code>和数据进行绑定,一旦创建绑定,<code><a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a></code>和数据将保持同步,每当数据发生变化,<code>DOM</code>会跟着变化。</li> <li> <code>ViewModel</code>是<code>Vue</code>的核心,它是<code>Vue</code>的一个实例。<code>Vue</code>实例是作用在某个<code><a href="http://www.js-code.com/tag/html" title="浏览关于“HTML”的文章" target="_blank" class="tag_link">HTML</a></code>元素上的,这个<code>HTML</code>元素可以是<code>body</code>,也可以是某个<code>id</code>所指代的元素。 <code>DOM Listeners</code>和<code>Data Bindings</code>是实现<a href="http://www.js-code.com/tag/%e5%8f%8c%e5%90%91%e7%bb%91%e5%ae%9a" title="双向绑定" target="_blank">双向绑定</a>的关键。<code>DOM Listeners</code>监听页面所有<code>View</code>层<code>DOM</code>元素的变化,当<code>View</code>发生变化,<code>Model</code>层的数据随之变化;<code>Data Bindings</code>监听<code>Model</code>层的数据,当数据发生变化,<code>View</code>层的<code>DOM</code>元素随之变化。</li> </ul> <blockquote><p> <code>v-if</code>和<code>v-show</code>指令有什么区别?</p></blockquote> <ul> <li> <code>v-show</code>对应的值无论是<code>true</code>还是<code>false</code>,对应<code>Html</code>元素都会存在于浏览器的文档中;而<code>v-if</code>如果是<code>false</code>的话,直接不在文档中了。</li> </ul> <blockquote><p>如何阻止<code>Vue</code>中的绑定事件不发生冒泡?</p></blockquote> <ul> <li>可以使用“事件修饰符”来处理事件冒泡,如:<code>v-on:click.stop</code>阻止事件冒泡或<code>v-on:submit.prevent</code>阻止默认事件。</li> </ul> <blockquote><p>父、子组件间是如何通信的?</p></blockquote> <ul> <li>在<code>Vue</code>中,每个组件实例的作用域是孤立的。这也意味着不能(也不应该)在子组件的模板内直接应用父组件的数据。父组件通过<code><a href="http://www.js-code.com/tag/prop" title="Prop" target="_blank">Prop</a>s</code>向子组件传递数据,而子组件通过<code>Events</code>向父组件传递数据。</li> </ul> <blockquote><p>非父子层级的组件如何实现通信?</p></blockquote> <ul> <li>简单的应用场景下,可以使用一个空的<code>Vue</code>实例作为中央事件总线。</li> <li>在复杂的情况下,可以考虑使用<code>Vue</code>官方提供的状态管理模式——<code>Vuex</code>来进行管理。</li> </ul> <blockquote><p>什么是动态组件?它的作用是什么?</p></blockquote> <ul> <li>通过使用保留的 <code>&lt;component&gt;</code> 元素,动态地绑定到它的 <code>is</code> 特性,我们让多个组件可以使用同一个挂载点,并可以动态地切换。</li> <li>除此之外,<code>Vue</code>还提供了<code>keep-alve</code>指令。<code>keep-alive</code>指令允许把切换出去的组件保留在内存中,并保留它的状态或避免重新渲染。</li> </ul> <blockquote><p>为什么组件中的<code>data</code>属性的值必须是一个函数?</p></blockquote> <ul> <li>因为在一个组件被多次引用的情况下,如果<code>data</code>的值是一个<code>Object</code>的话,那么由于<code>Object</code>是一个引用类型,所以即使是该组件被多次引用,而其实操作的是同一个对象,最终导致了引用该组件的所有位置都同步的显示了。</li> </ul> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_25557.html