watch与computed的区别

最新推荐文章于 2022-04-05 07:51:15 发布

进阶的菜熊

最新推荐文章于 2022-04-05 07:51:15 发布

阅读量1.4k

点赞数 1

分类专栏： Vue 文章标签： javascript html 前端 vue.js

本文链接：https://blog.csdn.net/qq_44998582/article/details/122343318

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

今天说说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中的数据，当数据变化时，触发监听器

进阶的菜熊

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
watch与computed的区别

今天说说watch与computed的区别。我们知道有些功能既可以用watch实现又可以用computed实现，谁比谁好呢，没个准信。我们先来用它俩实现同一功能再进行对比看看具体好处。例子：定义两个输入框以及一个span标签，span标签中的内容为两个输入框中的值，span标签中的内容随着输入框中的内容变化而变化watch实现<body> <div id="app"> 姓： <input type="text" v-model=firs...
复制链接

扫一扫