Vue计算属性

Vue计算属性

对于任何包含响应式数据的复杂逻辑，都应该去使用计算属性（computed）。

示例：

<div id="app">
    A：<input type="text" v-model="a"><br>
    B：<input type="text" v-model="b"><br>
    A+B：<span>{{ab}}</span><br>
    A+B：<span>{{ab1}}</span>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;   //阻止vue在启动时生成生产提示

    const vm = new Vue({
        el: '#app',
        data: {
            a: 'A',
            b: 'B'
        },
        methods: {

        },
        computed: {
            ab:{
              // 1.初次读取ab时，get就会被调用，返回值为ab的值，然后缓存起来
              // 2.所依赖的数据发生变化时，也会调用get
              get(){
                  console.log('get被调用了')
                  return this.a + '-' + this.b;
              },
              //当ab被修改时调用(vm.ab='xx')
              set(value){
                console.log('set',value)
              }
            },
            //简写(当只有get时可简写)
            ab1(){
                console.log('简写get被调用了')
                return this.a + '-' + this.b;
            }
        }
    })
</script>