一、三者之间的对比：
1、methods方法表示一个具体的操作，主要书写业务逻辑；
2、watch；一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体业务逻辑操作；可以看作是”computed"和“methods”的结合体；
3、computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用。
二、methods：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8"/>
<title>methods实现名称拼接</title>
<scriptsrc="./lib/vue.js"></script>
</head>
<body>
<divid="app">
<inputtype="text"v-model="firstname"@keyup="getFullname"/>+
<inputtype="text"v-model="lastname"@keyup="getFullname"/>=
<inputtype="text"v-model="fullname"/>
</div>
<script>
varvm=newVue({
el:"#app",
data:{
firstname:"",
lastname:"",
fullname:""
},
methods:{
getFullname(){
this.fullname=this.firstname+"-"+this.lastname;
}
}
});
</script>
</body>
</html>
2、watch:
使用这个属性，可以监视data中指定数据的变化，然后触发这个watch中对应的function处理函数。
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8"/>
<title>methods实现名称拼接</title>
<scriptsrc="./lib/vue.js"></script>
</head>
<body>
<divid="app">
<!--<inputtype="text"v-model="firstname"@keyup="getFullname"/>+
<inputtype="text"v-model="lastname"@keyup="getFullname"/>=-->
<inputtype="text"v-model="firstname"/>+
<inputtype="text"v-model="lastname"/>=
<inputtype="text"v-model="fullname"/>
</div>
<script>
varvm=newVue({
el:"#app",
data:{
firstname:"",
lastname:"",
fullname:""
},
methods:{
//getFullname(){
//this.fullname=this.firstname+"-"+this.lastname;
//}
},
watch:{
firstname:function(newVal,oldval){
this.fullname=newVal+"-"+this.lastname;
},
lastname:function(newVal){
this.fullname=this.firstname+"-"+newVal;
}
}
});
</script>
</body>
</html>
3、watch监听路由地址的变化：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8"/>
<title>methods实现名称拼接</title>
<scriptsrc="./lib/vue.js"></script>
<!--1.导包-->
<scriptsrc="./lib/vue-router.js"><80�methods:{},
router,
watch:{
"$route.path":function(newVal,oldVal){
if(newVal==="/login"){
console.log("欢迎进入登录页面");
}elseif(newVal==="/register"){
console.log("欢迎进入注册页面");
}
}
}
});
</script>
</body>
</html>
4、computed：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8"/>
<title>methods实现名称拼接</title>
<scriptsrc="./lib/vue.js"></script>
<scriptsrc="./lib/vue-router.js"></script>
</head>
<body>
<divid="app">
<inputtype="text"v-model="firstname"/>+
<inputtype="text"v-model="middlename"/>+
<inputtype="text"v-model="lastname"/>=
<inputtype="text"v-model="fullname"/>
</div>
<script>
varvm=newVue({
el:"#app",
data:{
firstname:"",
middlename:"",
lastname:""
},
methods:{},
watch:{},
computed:{
fullname:function(){
console.log("ok");
returnthis.firstname+"-"+this.middlename+"-"+this.lastname;
}
}
});
</script>
</body>
</html>
在computed中，可以定义一些属性，这些属性，叫做【计算属性】，计算属性的本质就是一个方法。
只不过，我们在使用这些计算属性的时候，是把它们的名称，直接当作属性来使用的；并不会把计算属性当作方法去调用。
需要注意的是：
①、计算属性在引用的时候，一定不要加（)去调用，直接把它当作普通属性去使用就好了；
②、只要计算属性，这个function内部，所用到的任何data中的数据发送了变化，就会立即重新计算这个计算属性的值；
③、计算属性的求值结果，会被缓存起来，方便下次直接使用；如果计算属性方法中，所以来的任何数据，都没有发生过变化，则不会重新对计算属性求值。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
html