vue计算属性和watch的区别是什么?

vue中计算属性和watch的区别

学习vue框架,一定少不了学习计算属性computed和watch

computed计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能非常强大,它可以让你的代码更加声明式、数据驱动并且易于维护。

watch监听的是你定义的变量,当你定义的变量的值发生变化时,调用对应的方法。

<div>{{Name}}</div>
data(){
return {
num:0,
lastname:'',
firstname:'',
}
}
//当num的值发生变化时,就会调用num的方法,方法里面的形参对应的是num的新值和旧值
watch:{
num:function(val,oldval){
    console.log(val,oldval);
}
},
//计算属性computed,计算的是Name依赖的值,它不能计算在data中已经定义过的变量。
computed:{
    Name:function(){
        return this.firstname+this.lastname;
    }
}
计算属性 vs 属性检测
计算属性(computed)属性检测(watch)
首次运行 首次不运行
调用时需要在模板中渲染,修改计算所依赖元数据调用时只需修改元数据
默认深度依赖默认浅度观测
适合做筛选,不可异步适合做执行异步或开销较大的操作

更多web前端知识,请查阅 HTML中文网 !!

以上就是vue计算属性和watch的区别是什么?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏