Vue中watch与computed区别

最新推荐文章于 2024-08-08 23:04:40 发布

林代码er

最新推荐文章于 2024-08-08 23:04:40 发布

阅读量394

点赞数

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

本文链接：https://blog.csdn.net/m0_71088505/article/details/131489039

版权

linerVue 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

文章讨论了Vue框架中watch和computed属性的区别，强调watch可以执行异步操作而computed不能。此外，还提出了编写Vue相关函数时关于this指针的两个原则：1)Vue管理的函数应使用普通函数确保this正确；2)非Vue管理的函数（如定时器回调）用箭头函数保持this指向。

摘要由CSDN通过智能技术生成

<body>
    <div id="root">
        姓：<input type="text" v-model="firstName"><br/><br/>
        名：<input type="text" v-model="lastName"><br/><br/>
        全名：<span>{{fullName}}</span><br/><br/>
    </div>
</body>
    <script>
        const vm = new Vue({
            el:'#root',
            data:{
                firstName: '张',
                lastName: '三',
                fullName:'张-三'
            },
            watch:{
                firstName(newValue){
                    setTimeout(()=>{
                        this.fullName = newValue+'-'+this.lastName
                    },1000);
                 },
                 lastName(newValue){
                    this.lastName = this.firstName+'-'+newValue
                 }
            }
        })
    </script>

效果：更改姓之后延迟一秒显示改后的全名

总结：

computed和watch之间的区别：

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

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

两个重要的小原则：

1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。

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

林代码er

关注

0
点赞
踩
0

收藏

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

2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等），最好写成箭头函数，这样this的指向才是vm 或组件实例对象。2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。1.computed能完成的功能，watch都可以完成。：更改姓之后延迟一秒显示改后的全名。
复制链接

扫一扫