// 例-1      
        <div id="example">{{a}}-{{b}}</div>

        <script>
        let vm = new Vue({
            el : '#example',
            data : {
                a : 1
            },
            // 计算属性需要添加computed
            // 计算属性不管变量值是否改变 只要页面引用了变量b 
            // 或者页面里调用了变量b就会执行b方法
            // computed 和 watch的区别是 watch必须改变值才会触发
            computed : {
                b (){
                    c('b');
                    return this.a + 1;
                }
            }
        });
        </script>



        
        // 例-2
        <div id="example">{{firstName}}-{{lastName}}-{{fullName}}</div>

        <script>
                let vm = new Vue({
                    el : '#example',
                    data : {
                        firstName : 'Foo',
                        lastName : 'Bar'
                    },
                    // 计算属性需要添加computed b的值也会影响a的值
                    // 计算属性不管变量值是否改变 只要页面引用了变量b 或者页面里调用了变量b就会执行b方法
                    // computed和watch的区别是 watch只有变量改变了才会触发
                    computed : {
                        fullName : {
                            // 计算属性默认只有get 当页面引用变量或者js里调用变量会执行
                            get (){
                                return this.firstName + ' ' + this.lastName;
                            },
                            // 设置了set 可以监听fullName变量 变化后就调用set
                            set (newValue){
                                this.firstName = 'firstName我改变了';
                                this.lastName = 'lastName我改变了';
                            } 
                        }
                    }
                });

                // 2秒后改变 fullName的值 触发set 
                // 重新设置firstName lastName
                setTimeout(()=>vm.fullName = '小花', 2000);
        </script>