Vue-计算属性和侦听属性

复杂逻辑应使用计算属性而不应写在插值表达式{{ }}里

<div id="app">
    原值:{{ msg }} <br>
    翻转后的值:{{ reverseMsg }}
</div>
<script>
    new Vue({
        el: '#app',
        data: {
           msg:'abc'
        },
        computed: {
            reverseMsg:function () {
               return this.msg.split('').reverse().join('');
           }
        }
    })
</script>

计算属性会基于响应式依赖进行缓存,只有原值msg发生变化时,才会重新进行计算,否则会立即返回之前的计算结果

计算尚属性默认只有getter,当reverseMsg为一个对象时,可为其设置setter

var vm = new Vue({
el: '#app',
    data: {
        msg: 'abc'
    },
    computed: {
        reverseMsg: {
            get: function () {
                return this.msg.split('').reverse().join('');
            },
            set: function (value) {

            }
        }
    }
});

运行vm.msg = 'Sam'时,reverseMsg的setter会被调用

watch属性会监听所指定数据的变化，然后可执行对应函数

var vm = new Vue({
    el: '#app',
    data: {
        msg: 'abc'
    },
    watch:{
        msg:function (newValue,oldValue) {
                
        }
    }
});

oldValue为旧数据,newValue为新数据

学习资料

Vue官网-计算属性和侦听器