watch ,methods, computed 区别
watch,methods,computed 是什么?
computed :属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算,主要当作属性来使用,
methods : 方法表示一个具体的操作,主要写业务逻辑
watch :一个对象,键时需要观察的表达式,值时对应回调函数,主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作,可以看做是computed和methods的结合体
区别:
1.watch和methods 不需要return , 计算属性(computed) 需要 return
2.methods 里面可以写大量的业务逻辑 ,computed 不适合写大量业务逻辑
案例:
1. Watch -监听路由
watch - 适合监听一些虚拟的数据,比如路由地址的变化
<body>
<div id="app">
<router-link to='/login'>登录</router-link>
<router-link to='/register'>注册</router-link>
<router-view ></router-view>
</div>
<script>
var login={
template:`<h1>这是登录组件</h1>`
}
var register={
template:`<h1>这是注册组件</h1>`
}
var router=new VueRouter({
routes:[
{
path:'/',
redirect:'/login'
},
{
path:'/login',
component:login
},
{
path:'/register',
component:register
}
],
linkActiveClass:'myactive'//和激活相关的类
})
new Vue({
el:'#app',
router,
watch:{
'$route.path':function(newV,oldV){
if(newV==='/login'){
console.log('欢迎进入登录界面');
}else if(newV==='/register'){
console.log('欢迎进入注册页面');
}
}
}
})
</script>
</body>
上面的代码监听了路由的变化
2. computed - 名称案例
computed - 监听一些数据,通过复杂的计算返回
<div id="app">
<!-- 分析:
我们要监听到文本框数据的改变,这样才能知道 什么时候去拼接 出一个fullname -->
<!-- keyup 键盘事件 -->
<input type="text" v-model="firstname">+
<input type="text" v-model="midename">+
<input type="text" v-model="lastname">=
<input type="text" v-model="fullname">
</div>
<script>
new Vue({
el:'#app',
data(){
return{
firstname:'',
midename:'',
lastname:'',
}
},
computed:{
'fullname':function(){
console.log('ok');
return this.firstname+this.lastname
}
}
})
</script>
注意:1.计算属性,在引用的是时候,一定不要加()去调用,直接把它当作普通属性去使用就好了
注意2:只要计算属性,这个function内部,所用到的任何data中的数据发生了改变,就坏立即重新计算,这个计算属性的值
注意3:计算属性的求值结果,会缓存起来,方便下次直接使用,如果计算属性方法中,所有来的数据,都没有发生变化,则不会重新对计算属性重新赋值