5. 计算属性，方法，侦听器

1、计算属性

<div id="app">
        {{sum}}
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                num1: 10,
                num2: 20
            },
            computed: {
                sum() {
                    return this.num1 + this.num2
                }
            },
           /* updated() {
                console.log(this.sum)
            }*/
        })
    </script>

2、 方法

<div id="app">
        <div>{{sum()}}</div>
    </div>
    <script>
        var vm =new Vue({
            el:"#app",
            data:{
                num1:1,
                num2:2
            },
            methods:{
                sum:function(){
                    return this.num1+this.num2
                }
            }
            
        })
    </script>

3、watch侦听器

    <div id="app">
        {{sum}}
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                num1: 10,
                num2: 20,
                sum: 30
            },
            /* 监听data里面的某个值改变的时候触发 */
            watch: {
                /* 侦听num1的改变 */
                num1() {
                    this.sum = this.num1 + this.num2
                },
               /* num2: function () {
                    this.sum = this.num1 + this.num2
                }*/

            }
        })
    </script>