<p><code></p> <p><strong>1. 代码示例:</strong></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="<template></p> <div id=&quot;app&quot;> <input type=&quot;text&quot; v-model=&quot;firstName&quot;><br /> <input type=&quot;text&quot; v-model=&quot;lastName&quot;><br /> <input type=&quot;text&quot; v-model=&quot;age&quot;></p> <p> 计算属性: {{name}}</p> <p> 调用方法: {{getName()}} </p></div> <p></template></p> <p><script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { data () { return { firstName: 'Samantha', lastName: 'Carter', age: 25 } }, methods: { getName () { console.log('name changed') return `${<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.firstName} ${<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.lastName}` } }, computed: { name () { console.log('getName invoked') return `${<a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a>.firstName} ${this.lastName}` } } } </script></p> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"firstName"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"lastName"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"age"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span> 计算属性: {{name}} <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span> 调用方法: {{getName()}} <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span> { data () { <span class="hljs-keyword">return</span> { <span class="hljs-attr">firstName</span>: <span class="hljs-string">'Samantha'</span>, <span class="hljs-attr">lastName</span>: <span class="hljs-string">'Carter'</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">25</span> } }, <span class="hljs-attr">methods</span>: { getName () { <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'name changed'</span>) <span class="hljs-keyword">return</span> <span class="hljs-string">`<span class="hljs-subst">${<span class="hljs-keyword">this</span>.firstName}</span> <span class="hljs-subst">${<span class="hljs-keyword">this</span>.lastName}</span>`</span> } }, <span class="hljs-attr">computed</span>: { name () { <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'getName invoked'</span>) <span class="hljs-keyword">return</span> <span class="hljs-string">`<span class="hljs-subst">${<span class="hljs-keyword">this</span>.firstName}</span> <span class="hljs-subst">${<span class="hljs-keyword">this</span>.lastName}</span>`</span> } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <p><strong>2. 执行结果</strong><br /><em>(1) 初始结果</em></p> <p><span class="img-wrap"><img data-src="/img/bVbqldD?w=1010&amp;h=144" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p><em>(2) firstName或lastName改变之后的执行结果</em></p> <p><span class="img-wrap"><img data-src="/img/bVbqldK?w=1029&amp;h=362" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p><em>(3) age改变之后的执行结果</em></p> <p><span class="img-wrap"><img data-src="/img/bVbqlef?w=1019&amp;h=362" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p><strong>3. 分析结论</strong></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="在使用vue进行开发的过程中,经常会遇到computed动态计算属性值的场景,使用{{}}调用方法(getName)能达到同样的目的,但效率不及computed,原因在于每当绑定在this上的值发生变化时,都会调用一次方法,而computed会缓存计算结果,只有当其依赖的属性值发生变化时才会重新计算,因此才会出现图三的情况,当年龄发生变化时,getName()方法被调用以输入&quot;getName invoked&quot;,而name所依赖的firstName和lastName都没有发生变化,所以name没有重新计算,由此可见,computed的性能是要比方法调用高很多的。" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code style="word-break: break-word; white-space: initial;">在使用vue进行开发的过程中,经常会遇到computed动态计算属性值的场景,使用{{}}调用方法(getName)能达到同样的目的,但效率不及computed,原因在于每当绑定在<span class="hljs-keyword">this</span>上的值发生变化时,都会调用一次方法,而computed会缓存计算结果,只有当其依赖的属性值发生变化时才会重新计算,因此才会出现图三的情况,当年龄发生变化时,getName()方法被调用以输入<span class="hljs-string">"getName invoked"</span>,而name所依赖的firstName和lastName都没有发生变化,所以name没有重新计算,由此可见,computed的性能是要比方法调用高很多的。</code></pre> <p></code></p>

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