十五、Vue详解计算属性的setter与getter

作者: 温新

分类: 【Vue.js】

阅读: 2670

时间: 2020-12-03 14:55:14

计算属性默认有getter,如果需要时也可以提供一个setter。那么什么是getter与setter呢?可以这样去理解,get获取值,set设置值。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)">"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)"><!--通过计算属性中的get与set--></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 style="box-sizing: border-box;color: rgb(84, 110, 122)"><!--计算属性--></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    {{ getFullName }}</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(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(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)">getFullName</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(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 style="box-sizing: border-box;color: rgb(84, 110, 122)">// 计算属性中的get与set</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><br></br><span style="box-sizing: border-box;padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(128, 203, 174)">get</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(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 style="box-sizing: border-box;color: rgb(128, 203, 174)">set</span>: <span style="box-sizing: border-box;color: rgb(199, 146, 234)">function</span>(<span style="box-sizing: border-box">value</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)">let</span> <span style="box-sizing: border-box">arr</span> <span style="box-sizing: border-box">=</span> <span style="box-sizing: border-box;color: rgb(128, 203, 196)">value</span>.<span style="box-sizing: border-box;color: rgb(128, 203, 174)">split</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)">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(128, 203, 196)">arr</span>[<span style="box-sizing: border-box;color: rgb(247, 118, 105)">0</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)">webUrl</span>  <span style="box-sizing: border-box">=</span> <span style="box-sizing: border-box;color: rgb(128, 203, 196)">arr</span>[<span style="box-sizing: border-box;color: rgb(247, 118, 105)">1</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><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使用了计算属性中的get与set实现。计算属性中默认使用get,因此getFullName与fullName的实现是一样的。

1)创建一个计算属性fullName,这个计算属性中有2个方法,get与set。当在模板中使用{{fullName}}时,计算属性中的get方法就会调用,与此同时getFullName计算属性也被调用了;

2)当对fullName依赖的数据进行修改时,那么就会触发fullName中的set方法,该方法接收要修改的数据,当对依赖的数据修改时,视图所展示的数据也就发生了变化。

我是小白,期待和优秀的你一起同行!

小白

2020年12月03日

请登录后再评论