分别使用watch，computed属性计算两个数之和

现在有个需求，给a一个input，b一个input ，然后用output标签显示两者计算之和

有两种方法：一是使用监听属性，一种是使用computed属性计算。

同时明白，Vue实例中的数据来源有两方面，一种是数据模型，一种是computed对象计算后返回的值

法一：

使用监听属性：（数据来源于数据模型）

<div id="app">
{{msg}}
<br>
a :<input type="text" v-model.number="a">
<!-- <br> -->

+b <input type="text" v-model.number="b">
<!-- <br> -->
=
<!-- <br> -->
<output>{{total}}</output>
</div>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:"hello",
                a:0,
                b:0,
                total:0
            },
            methods:{
                
            },
            //监听 侦听
            watch:{
                a(newValue,oldValue){
                    // console.log(newValue,oldValue);
                    this.total=this.a
                    +this.b;
                },
                b(newValue,oldValue){
                    // console.log(newValue,oldValue);
                    this.total=this.b+this.a;

                }
            }
        })
    </script>
</body>

使用监听属性有点大材小用，因为监听属性大多用来监听在数据变化时执行异步或开销较大的操作，在这里只能略微了解一下它的作用。

法二：

使用computed对象（数据来源于计算属性）

<body>
<div id="app">
{{msg}}
<br>
a <input type="text" v-model.number="a">
+b <input type="text" v-model.number="b">
=
<output>{{total}}</output>
</div>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:"hello",
                a:0,
                b:0,
            },
            methods:{
            },
            computed:{
                    total()
                    {
                        return this.a+this.b;
                    }
                }
          
        })
    </script>

注意，当使用computed来进行计算时，数据模型中不需要再写入total变量名~

计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。而每次调用函数都会导致函数的重新执行。

以上就是该需求的两种计算方式。