Vue中的computed和watch对比

computed和watch的区别

1. computed能完成的功能，watch都可以完成

2. watch能完成的功能，computed不一定能完成，例如：watch可以完成异步操作

   两个重要的原则 :

   1. 所被vue管理的函数，最好写成普通函数。这样的this的指向才是vm或者组件实例对象
   2. 所有不被vue所管理的函数（定时器的回调函数，ajax的回调函数等，promise的回调函数），最好写成箭头函数。这样this的指向才是vm或组件实例对象

   代码举例：

computed: {

    fullName() {
        // 不能实现延迟的效果，return的是setInterval，不能是fullname
        setInterval(() => {
            return this.firstName + '-' + this.lastName
         }, 1000);
    },
},
watch: {
    //可以实现延迟显示
    firstName(val) {
        setTimeout(() => {
            this.fullName = val + '-' + this.lastName
        }, 1000)
    },
    lastName(val) {
            setTimeout(() => {
                this.fullName = this.lastName + '-' + val
            }, 1000)
     },
}