watch与computed的区别

2023-05-16

今天说说watch与computed的区别。

我们知道有些功能既可以用watch实现又可以用computed实现，谁比谁好呢，没个准信。我们先来用它俩实现同一功能再进行对比看看具体好处。

例子：定义两个输入框以及一个span标签，span标签中的内容为两个输入框中的值，span标签中的内容随着输入框中的内容变化而变化

watch实现

<body>
    <div id="app">
        姓： <input type="text" v-model=firstName> 名：
        <input type="text" v-model=lastName> 姓名：
        <span>{{fullname}}</span>
    </div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            firstName: 'z',
            lastName: 's',
            fullname: 'zs'
        },
        watch: {
            firstName(newval) {

                this.fullname = newval + this.lastName
            },
            lastName(newval) {
                this.fullname = this.firstName + newval
            }

        }
    })

</script>

computed实现

<body>
    <div id="app">
        姓： <input type="text" v-model=firstName> 名：
        <input type="text" v-model=lastName> 姓名：
        <span>{{fullname}}</span>
    </div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            firstName: 'z',
            lastName: 's'
        },
        computed: {
            fullname() {
                return this.firstName + this.lastName
            }
        }
    })

</script>

根据上面两个代码可以看出computed实现起来更简单，代码也更简单。但我们不能因此来判断computed比watch好，为什么这么说呢？我们再通过代码来比较一下

<body>
    <div id="app">
        姓： <input type="text" v-model=firstName> 名：
        <input type="text" v-model=lastName> </br>watch姓名：
        <span>{{fullname}}</span> </br>computed姓名：
        <span>{{fullName}}</span>
    </div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            firstName: 'z',
            lastName: 's',
            fullname: 'zs'
        },
        computed: {
            fullName() {
                setTimeout(() => {
                    return this.firstName + this.lastName
                }, 1000);
            }
        },
        watch: {
            firstName(val) {
                setTimeout(() => {
                    this.fullname = val + this.lastName
                }, 1000);
            },
            lastName(val) {
                setTimeout(() => {
                    this.fullname = this.firstName + val
                }, 1000)
            }
        }
    })
</script>

上面代码中两个span标签值一个是通过watch改变，一个是通过computed改变，在两者中都加入了定时器表示当修改input中的值过1秒才更改span的值，但是我们看到computed并没有起作用，查看后台也并没有出错。

为什么会出现这种情况呢？

我们能看到computed主要是通过返回值的方式来实现的，return处在setTimeout的回调函数中返回的值为setTimeout所接收根本不会传到fullName上，意味着fullName中并没有return语句，所以在页面上也没有值;而watch是通过更改fullname属性的值来实现的，fullname一变化vue便会重新解析将新值放上去。

另外，要注意的是setTimeout是由windows管理，如果回调函数写成普通函数那么this指向是为windows对象，所以要写成箭头函数。得出总结：当要使用异步函数（不被vue所管理的函数）时就必须使用watch而非computed，其次，异步函数中的回调函数必须使用箭头函数。

watch与computed区别总结

computed支持缓存，相依赖的数据发生改变才会重新计算；watch不支持缓存，只要监听的数据变化就会触发相应操作
computed不支持异步，当computed内有异步操作时是无法监听数据变化的；watch支持异步操作
computed属性的属性值是一函数，函数返回值为属性的属性值，computed中每个属性都可以设置set与get方法。watch监听的数据必须是data中声明过或父组件传递过来的props中的数据，当数据变化时，触发监听器

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

watch

computed