vue学习(13)：watch，computed的使用

1.名称案例使用keyup实现

//分析：

(1).我们要监听到文本框数据的改变，这样才能知道什么时候去拼接出一个fullname

(2).如何监听到文本框的数据改变

+=

var vm = new Vue({

el:'#app',

data:{

firstname:' ',

lastname:' ',

fullname:' '

}

methods:{

getFullname(){

this.fullname = this.firstname+'-'+this.lastname

}

}

})

2.使用watch监听文本框数据的变化

+=

var vm = new Vue({

el:'#app',

data:{

firstname:' ',

lastname:' ',

fullname:' '

}

methods:{},

watch:{

//使用这个属性，可以监视data中指定数据的变化，然后触发这个watch中对应的function处理函数

'firstname':function(newVal,oldVal){

//newVal是表示监听到的新的数据，oldVal表示旧的数据

//this.fullname = this.firstname+'-'+this.lastname

this.fullname = newVal+'-'+this.lastname

},

'lastname':function(newVal){

this.fullname=this.firstname+'-'+newVal

}

}

})

3.watch监视路由地址的改变

登录

注册

var login={

template:'

登录组件

'

}

var register={

template:'

注册组件

'

}

var router = new VueRouter({

routes:[

{path:'/',redirect:'/login'},

{path:'/login',component:login},

{path:'/register',component:register}

]

})

var vm = new Vue({

el:'#app',

data:{},

methods:{},

router,

watch:{

//this.$route.path

'$route.path':function(newVal,oldVal){

if(newVal === '/login'){

console.log('欢迎进入登录页面')

}else if(newVal === '/register'){

console.log('欢迎进入注册页面')

}

}

}

})

4.computed计算属性的使用和三个特点

+=

var vm = new Vue({

el:'#app',

data:{

firstname:' ',

lastname:' ',

}

methods:{},

computed:{

//在computed中可以定义一些属性，这些属性叫做计算属性，计算属性的本质，就是一个方法，只不过，我们在使用这些计算属性的时候，是把它们的名称，直接当做属性来使用的，并不会把计算属性，当做方法去使用；

//注意：(1).计算属性，在引用的时候一定不要加()去调用，直接把它当做普通属性去使用就好了；

(2).只要计算属性这个function内部，所用到的任何data中的数据发生了变化，就会立即重新计算这个计算属性的值

(3).计算属性的求值结果，会被缓存起来，方便下次直接使用；如果计算属性方法中，所依赖的任何数据，都没有发生变化，则不会重新对计算属性求值

'fullname':function(){

return this.firstname+'-'+this.lastname

}

}

})

5.watch,computed,methods的对比

(1).computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算，主要当做属性来使用；

(2).methods方法表示一个具体的操作，主要书写业务逻辑

(3).watch一个对象，键是需要观察的表达式，值是对应的回调函数，主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作，可以看作是computed和methods的结合体