十四、Vue详解计算属性与侦听器
Vue提供了非常舍便利的表达式计算，在模板中进行过多的表达式计算是一个糟糕的写法，只会让代码越来越难以维护。当需要使用到复杂的计算才能得到结果时，Vue提供了计算属性，而且推荐用它。
下面来看一个糟糕的案例，下面的案例中只进行了一个计算，加入需要数十个甚至更多呢？了解了这个之后再来看看计算属性实现。
<span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">div</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">id</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"example"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> {{ msg.split('').reverse().join('') }}</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span>
使用计算属性与方法实现同一个结果
<span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">div</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">id</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"app"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(84, 110, 122)"><!--最普通的实现--></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> {{webName}}{{webUrl}}</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(84, 110, 122)"><!--计算属性--></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> {{ fullWebNameAndUrl }}</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(84, 110, 122)"><!--方法--></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> {{ fullWebName() }} - {{desc}}</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">var</span> <span style="box-sizing: border-box">app</span> <span style="box-sizing: border-box">=</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">new</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">Vue</span>({</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">el</span>:<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"#app"</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">data</span>:{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">webName</span>:<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"自如初"</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">webUrl</span>:<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"https://www.ziruchu.com"</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">desc</span>:<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"一个记录学习的博客"</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> },</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(84, 110, 122)">// 方法一：计算属性实现</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">computed</span>:{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">fullWebNameAndUrl</span>:<span style="box-sizing: border-box;color: rgb(199, 146, 234)">function</span> () {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">console</span>.<span style="box-sizing: border-box;color: rgb(128, 203, 174)">log</span>(<span style="box-sizing: border-box;color: rgb(195, 232, 141)">'我是计算属性，我执行了一次'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">return</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">this</span>.<span style="box-sizing: border-box;color: rgb(128, 203, 174)">webName</span> <span style="box-sizing: border-box">+</span> <span style="box-sizing: border-box;color: rgb(195, 232, 141)">" "</span> <span style="box-sizing: border-box">+</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">this</span>.<span style="box-sizing: border-box;color: rgb(128, 203, 174)">webUrl</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> },</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(84, 110, 122)">// 方法二：方法实现</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">methods</span>:{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">fullWebName</span>:<span style="box-sizing: border-box;color: rgb(199, 146, 234)">function</span>(){</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">console</span>.<span style="box-sizing: border-box;color: rgb(128, 203, 174)">log</span>(<span style="box-sizing: border-box;color: rgb(195, 232, 141)">'我是方法，我执行了一次'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">return</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">this</span>.<span style="box-sizing: border-box;color: rgb(128, 203, 174)">webName</span> <span style="box-sizing: border-box">+</span> <span style="box-sizing: border-box;color: rgb(195, 232, 141)">" "</span> <span style="box-sizing: border-box">+</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">this</span>.<span style="box-sizing: border-box;color: rgb(128, 203, 174)">webUrl</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> });</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span>
需求：实现网站名与链接在一行输出
1）使用{{}}语法对数据一个一个进行绑定，如果需要计算更复杂的逻辑呢？在此例中显然没法完成；
2）使用计算属性实现：定义一个计算属性，在该属性中进行更种运算。在此案例中，定义了一个fullWebNameAndUrl计算属性，在该计算属性内，对数据进行拼接从而实现它们在一行输出；
3）使用方法实现：同样是对数据进行拼接从而实现了对它们在一行输出，不同的是，使用方法实现时，调用时要加上括号，如fullWebName()
4）浏览器控制台中修改webName的值，app.webName='小白'，可以看到计算属性和方法都计算了一次，再次执行app.webName='小白'这次看到计算属性和方法都没有进行计算。重点来了，执行app.desc='php博客'时，方法执行了一次计算，而计算没有属性没有执行计算，原因在于计算属性有一个缓存机制，只有其依赖的值发生了变化才会进行重新计算。
使用监听器
<span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">div</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">id</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"app"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> {{fullName}}</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">var</span> <span style="box-sizing: border-box">app</span> <span style="box-sizing: border-box">=</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">new</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">Vue</span>({</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">el</span>:<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"#app"</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">data</span>:{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">webName</span>:<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"自如初"</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">webUrl</span>:<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"https://www.ziruchu.com"</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">desc</span>:<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"一个记录学习的博客"</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">fullName</span>:<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"自如初 一个记录学习的博客"</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> },</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">watch</span>:{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">webName</span>:<span style="box-sizing: border-box;color: rgb(199, 146, 234)">function</span>(){</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">console</span>.<span style="box-sizing: border-box;color: rgb(128, 203, 174)">log</span>(<span style="box-sizing: border-box;color: rgb(195, 232, 141)">'我专门用于监听webName是否发生变化'</span>)</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">this</span>.<span style="box-sizing: border-box;color: rgb(128, 203, 174)">fullName</span> <span style="box-sizing: border-box">=</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">this</span>.<span style="box-sizing: border-box;color: rgb(128, 203, 174)">webName</span> <span style="box-sizing: border-box">+</span> <span style="box-sizing: border-box;color: rgb(195, 232, 141)">" "</span> <span style="box-sizing: border-box">+</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">this</span>.<span style="box-sizing: border-box;color: rgb(128, 203, 174)">webUrl</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> },</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">webUrl</span>: <span style="box-sizing: border-box;color: rgb(199, 146, 234)">function</span>(){</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">console</span>.<span style="box-sizing: border-box;color: rgb(128, 203, 174)">log</span>(<span style="box-sizing: border-box;color: rgb(195, 232, 141)">'我专门监听webUrl是否发生变化'</span>)</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">this</span>.<span style="box-sizing: border-box;color: rgb(128, 203, 174)">fullName</span> <span style="box-sizing: border-box">=</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">this</span>.<span style="box-sizing: border-box;color: rgb(128, 203, 174)">webName</span> <span style="box-sizing: border-box">+</span> <span style="box-sizing: border-box;color: rgb(195, 232, 141)">" "</span> <span style="box-sizing: border-box">+</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">this</span>.<span style="box-sizing: border-box;color: rgb(128, 203, 174)">webUrl</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> });</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span>
用途：当fullName所依赖的webName与webUrl发生变化时都重新计算。
<span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">div</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">id</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"app"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> {{fullName}}</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">var</span> <span style="box-sizing: border-box">app</span> <span style="box-sizing: border-box">=</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">new</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">Vue</span>({</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">el</span>:<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"#app"</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">data</span>:{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">webName</span>:<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"自如初"</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">webUrl</span>:<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"https://www.ziruchu.com"</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">desc</span>:<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"一个记录学习的博客"</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">fullName</span>:<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"自如初 一个记录学习的博客"</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> },</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">watch</span>:{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">webName</span>:<span style="box-sizing: border-box;color: rgb(199, 146, 234)">function</span>(){</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">console</span>.<span style="box-sizing: border-box;color: rgb(128, 203, 174)">log</span>(<span style="box-sizing: border-box;color: rgb(195, 232, 141)">'12312'</span>)</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">this</span>.<span style="box-sizing: border-box;color: rgb(128, 203, 174)">fullName</span> <span style="box-sizing: border-box">=</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">this</span>.<span style="box-sizing: border-box;color: rgb(128, 203, 174)">webName</span> <span style="box-sizing: border-box">+</span> <span style="box-sizing: border-box;color: rgb(195, 232, 141)">" "</span> <span style="box-sizing: border-box">+</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">this</span>.<span style="box-sizing: border-box;color: rgb(128, 203, 174)">webUrl</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> },</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(128, 203, 174)">webUrl</span>: <span style="box-sizing: border-box;color: rgb(199, 146, 234)">function</span>(){</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">console</span>.<span style="box-sizing: border-box;color: rgb(128, 203, 174)">log</span>(<span style="box-sizing: border-box;color: rgb(247, 118, 105)">1223</span>)</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">this</span>.<span style="box-sizing: border-box;color: rgb(128, 203, 174)">fullName</span> <span style="box-sizing: border-box">=</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">this</span>.<span style="box-sizing: border-box;color: rgb(128, 203, 174)">webName</span> <span style="box-sizing: border-box">+</span> <span style="box-sizing: border-box;color: rgb(195, 232, 141)">" "</span> <span style="box-sizing: border-box">+</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">this</span>.<span style="box-sizing: border-box;color: rgb(128, 203, 174)">webUrl</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> });</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span>
总结：对于使用计算属性、方法与侦听器可以得到同一个结果或者需求者，最好是使用计算属性来实现。尽管侦听器同样也有缓存，但是代码对比下来，计算属性更加简洁。
我是小白，期待和优秀的你一起同行!
小白
2020年12月03日
请登录后再评论