一、watch、computed、methods的区别:
Methods:定义事件和方法的,定义的方法调用才会触发,不会缓存。
Computed:计算属性,当依赖值发生变化的时候,定义在computed的方法会触发,会缓存结果。
Watch:监听属性,不会缓存结果,依赖数据变化触发
二、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>