computed和watch的用法和区别
computed可以监听v-model(data)中的值,只要值发生变化 他就会重新去计算 computed必须是要有一个返回值的哦
computed 属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。主要当作属性来使用;
<div id="app">
<input type="text" v-model="firstname">+
<input type="text" v-model="lasttname">=
<input type="text" v-model="fullname">
</div>
var vm = new Vue({
el: "#app",
data: {
firstname: "",
lasttname: "",
},
methods: {
},
// computed可以监听v-model(data)中的值,只要值发生变化 他就会重新去计算
// computed必须是要有一个返回值的哦
computed: {
fullname: function () {
return this.firstname + "-" + this.lasttname
}
},
})
//watch除了可以监听data中值的变化,还可以监听路由的变化,
//watch中有两个参数 分别是新值和旧值
var vm = new Vue({ el: "#app", data: { }, methods: { }, router: router, watch: { "$route.path":function(newval,oldval){ if(newval==="/login"){ console.log("这是denglu页面") }else if(newval==="/zhuce"){ console.log("这是注册页面") } } }, })
computed和watch的区别
《1》计算属性computed 必须要返回一个值哦 通过return来返回的
会缓存,只要数据不发生变化,就使用缓存的数据
《2》 watch的回调函数里面有两个参数,分别是newval和oldval。
不会缓存 只要数据发生变化 就会重新的去计算
遇见问题,这是你成长的机会,如果你能够解决,这就是收获。
作者:晚来南风晚相识
出处:https://www.cnblogs.com/IwishIcould/
本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
如果文中有什么错误,欢迎指出。以免更多的人被误导。
出处:https://www.cnblogs.com/IwishIcould/
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!
万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
支付宝
微信
如果文中有什么错误,欢迎指出。以免更多的人被误导。