vue计算属性和监听属性

计算属性

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>

效果如下：

注：
上面的模板中声明了一个计算属性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值改变之后调用。

效果如下：