watch 和 computed 对比-姓名案例

文章目录

• ​​watch 实现​​
• ​​computed 实现​​

watch 实现

<div id="root">
    姓：<input type="text" v-model="firstName"><br/><br/>
    名：<input type="text" v-model="lastName"><br/><br/>
    全名：<span>{{fullName}}</span>
</div>

new Vue({
        el: '#root',
        data: {
            firstName: '张',
            lastName: '三',
            fullName: '张-三'
        },
        watch: {
            firstName(val) {
                this.fullName = val + this.lastName
            },
            lastName(val) {
                this.fullName = this.firstName + val
            }
        }
    })

computed 实现

<div id="root">
    姓：<input type="text" v-model="firstName"><br/><br/>
    名：<input type="text" v-model="lastName"><br/><br/>
    全名：<span>{{fullName}}</span>
</div>

new Vue({
        el: '#root',
        data: {
            firstName: '张',
            lastName: '三',
        },
        computed: {
            fullName() {
                return this.firstName + '-' + this.lastName
            }
        }
    })

现在看起来是计算属性更方便，但某些情况只有监视属性才能做到，比如当修改姓或名后延迟一秒种改变

watch: {
            firstName(val) {
                setTimeout(() => {
                    this.fullName = val + '-' + this.lastName
                }, 1000);
            },
            lastName(val) {
                this.fullName = this.firstName + '-' + val
            }
        }

而计算属性不可以，因为计算属性是靠返回值的，不能开启异步任务

另外还有一个细节，这里的定时器是箭头函数，因为定时器是js管理的，而不是vm，如果写普通函数，setTimeout 里的 this 是 window，如果写成箭头函数，就没有了自己的 this，会向外找，就变成了 vm

firstName(val) {
                setTimeout(() => {
                    this.fullName = val + '-' + this.lastName
                }, 1000);
            },

computed 和 watch 之间的区别
1、computed 能完成的功能，watch 都可以完成
2、watch 能完成的功能，computed 不一定能完成，例如: watch 可以进行异步操作

两个重要的小原则
1、所被Vue管理的函数，最好写成普通函数，这样 this 的指向才是 vm 或组件实例对象
⒉、所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数、promise的回调函数等），最好写成箭头函数，这样 this 的指向才是 vm 或组件实例对象。