vue计算属性和监听属性

野性酷女 2023-07-13 03:42 93阅读 0赞

**计算属性**

1.首先，先看一个字符串反转的例子：

<div id="app1">
         { {  message.split('').reverse().join('') }}
    </div>
    <script>
    	new Vue({ 
            el: "#app1",
            data: { 
                message: 'xiaoqi'
            }
        })
    </script>

当在遇到复杂的逻辑时应该使用计算属性，如下所示，改写为：

<div id="app2">
        <p>原字符串：{ { message}}</p>
        <p>计算后反转字符串: { { reverseMessage}}</p>
     </div>
    <script>
    new Vue({ 
            el: "#app2",
            data: { 
                message: 'xiaoqi'
            },
            computed: { 
                // 计算属性的getter
                reverseMessage: function() { 
                    return this.message.split('').reverse().join('');
                }
            }
        })
    </script>

效果如下：  
![在这里插入图片描述][20200310103914373.png]  
**注：**  
上面的模板中声明了一个**计算属性reverseMessage**。  
提供的函数将用作属性**reverseMessage**的**getter**（用于读取）。  
reverseMassage依赖于massage，在massage发生变化时，reverseMassage也会更新。

**监听属性** watch

1.通过使用watch实现计数器：

<div id="app5">
            <p style = "font-size: 25px;">计数器：{ {  counter }}</p>
            <button @click = "counter++" style="font-size: 25px"> 点击我</button>
     </div>
     <script> 
        var vm1 = new Vue({ 
            el: "#app5",
            data: { 
                counter: 1
            }
        });
        vm1.$watch('counter',function(nval,oval) { 
            alert('计数器值的变化：' + oval + '变为' + nval + "!");
        })
     </script>

**注：**  
$watch是一个实例方法，后面是一个回调函数，这个回调函数将在counter值改变之后调用。

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pob3VjaGFuZ3l1ZQ_size_16_color_FFFFFF_t_70]

[20200310103914373.png]: https://img-blog.csdnimg.cn/20200310103914373.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pob3VjaGFuZ3l1ZQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200310104657563.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pob3VjaGFuZ3l1ZQ==,size_16,color_FFFFFF,t_70