Vue中的watch、computed和methods有什么区别？（学习笔记）

最新推荐文章于 2024-02-19 15:45:00 发布

申公豹59

最新推荐文章于 2024-02-19 15:45:00 发布

阅读量362

点赞数 1

文章标签： vue.js

原文链接：https://blog.csdn.net/weixin_45276056/article/details/110933869

版权

本文详细介绍了Vue.js框架中watch与computed属性的应用场景及区别。watch用于监听特定数据变化并执行回调函数，可获取新旧值；computed则根据依赖属性计算派生属性，并自动缓存结果。同时对比了methods的用途。

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

一、watch、computed、methods的区别：
watch: 一个对象，键是需要观察的表达式，值是对应回调函数。
主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作。
可以看作是computed和methods的结合体。
computed: 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。
主要当属性来使用。
methods: 方法表示一个具体的操作，主要是书写业务逻辑。

二、watch的作用：
(1)watch属性可以来监听data属性中的数据变化。
<div id="app1"></div>
<script>
var vu = new Vue({
el:"#app1",
data:{
firstName:"",
lastName:"",
age:"",
sex:""
},
watch:{
firstName:function(){
console.log(this.firstName);
}
}
})
</script>

(2)watch属性还可以来监听function中使用参数来获取新值(newValue)和旧值(oldValue)。
<div id="app1"></div>
<script>
var vu = new Vue({
el:"#app1",
data:{
firstName:"",
lasttName:"",
age:"",
sex:""
},
watch:{
firstName:function(newValue,oldValue){
console.log(newValue);
console.log(oldValue);
}
}
})
</script>

(3)watch属性还可以用来监听路由router的变化，只是这里的监听元素是固定的。
<div id="app1"></div>
<script>
var login = {
template:'<h3>登录组件</h3>'
}
var routerObj = new VueRouter({
routers:[
// 此处的component只是组件对象
{path:"/login",component:login}
]
})
var vu = new Vue({
el:"#app1",
data:{},
router:routerObj, // 将路由规则对象注册到MV实例上
watch:{
'$router.path':function(newValue,oldValue){
console.log(newValue);
console.log(oldValue);
}
}
})
</script>

三、computed属性的作用：
(1)computed也可以监听属性的变化，只是它会根据他的依赖属性生成一个属性，让MV对象可以使用这个属性。
<div id="app1"></div>
<script>
var vu = new Vue({
el:"#app1",
data:{
firstName:"",
lastName:"",
age:"",
sex:""
},
computed:{
allName:function(){
return this.firstName +"-"+this.lastName
}
}
})
</script>

希望对大家有帮助~加油！
————————————————
原文链接：https://blog.csdn.net/weixin_45276056/article/details/110933869