vue中computer watch methods 的区别

computed

计算属性 计算结果会缓存,只有当依赖值改变才会重新计算
对于任何复杂逻辑，你都应当使用计算属性
// 而是依赖于属性的,就是一个属性的封装,属性的值不变化,那么不会多次调用computed,所以性能更好
计算属性默认只有getter，可以在需要的时候自己设定setter：

computed: {
        fullName: {
            // getter
            get: function () {
                return this.firstName + ' ' + this.lastName
            },
            // setter
            set: function (newValue) {
                var names = newValue.split(' ')
                this.firstName = names[0]
                this.lastName = names[names.length - 1]
            }
        }
    }

watch

监听属性 监听数据的变化触发执行函数
// 如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择

如果在data中没有相应的属性的话，是不能watch的，这点和computed不一样

var vm = new Vue({
        el: '#app',
        data: {
            firstName: 'Foo',
            lastName: 'Bar',
            fullName: 'Foo Bar'
        },
        watch: {
            firstName: function (val) {
                this.fullName = val + ' ' + this.lastName
            },
            lastName: function (val) {
                this.fullName = this.firstName + ' ' + val
            }
        }
    })

methods

事件方法 调用一次，执行一次,结果不会缓存

methods和computed的区别

methods中的方法都会执行，
而computed中的方法第一次运行后，就会缓存再内存中，如果数据源不发生改变，computed中的方法不会再执行，从而对于复杂的逻辑计算的程序提高了性能

<div id="app">
  {{reverseMsg}}
   <hr>
  {{reverseMesssage()}}
</div>

app = new Vue({
        el:"#app",
        data:{
            msg:"hello word",
        },
        methods:{
            reverseMesssage(){
                return this.msg.split("").reverse().join("");
            },
        },
        computed:{
            reverseMsg(){
                return this.msg.split("").reverse().join("");
            },
        }
    });