在做项目的时候,我们会需要监听数据的变化,从而做一些相应的操作。通过使用watch、computed与methods可以实现此目的。
- methods
<div id="app">
<input type="text" v-model="firstname" @keyup="getFullname"> +
<input type="text" v-model="lastname" @keyup="getFullname"> =
<input type="text" v-model="fullname">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstname : '',
lastname : '',
fullname : ''
},
methods: {
getFullname(){
this.fullname = this.firstname + '-' + this.lastname
},
}
});
</script>
通过keyup事件来监听数据的变化,效果如下图:
- watch
使用watch可以监视data中指定数据的变化,然后触发这个 watch 中对应的function处理函数
<div id="app">
<input type="text" v-model="firstname"> +
<input type="text" v-model="lastname"> =
<input type="text" v-model="fullname">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstname : '',
lastname : '',
fullname : ''
},
methods: {
},
watch : {
'firstname' : function(newVal,oldVal){
//function可带两个参数,newVal是更新后的数据,oldVal是更新前的数据
console.log(newVal,oldVal)
this.fullname = newVal + '-' + this.lastname
},
'lastname' : function(newVal){
this.fullname = this.firstname + '-' + newVal
}
}
});
</script>
效果如下:
- computed
计算属性的本质是一个方法,只不过在使用计算属性时,把它们的名称直接当作属性来使用的,并不会把计算属性当作方法去调用。
注意:
只要计算属性这个function内部,所要用到的任何data中的数据发生了变化,就会立即重新计算这个计算属性的值。
计算属性的求值结果会被缓存,方便下次直接使用;如果任何数据都没有发生变化,则不会重新求值。
<div id="app">
<input type="text" v-model="firstname"> +
<input type="text" v-model="lastname"> =
<input type="text" v-model="fullname">
<p>{{fullname}}</p>
<p>{{fullname}}</p>
<p>{{fullname}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstname : '',
lastname : '',
},
methods: {
},
computed : {
'fullname' : function(){
console.log('ok')
return this.firstname + '-' + this.lastname
}
}
});
</script>
当firstname只改变了一次的时候,四个fullname的值随之改变,因为求值的结果会被缓存,其余三个fullname不会重新求值,因此此时控制台只打印出一个ok。效果如下图:
- watch监听路由对象
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>router</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./to/vue-router.js"></script>
<style>
/*动效*/
.router-link-active,
.myActive{
color: pink;
font-weight: 600;
font-style: italic;
font-size: 30px;
text-decoration: underline;
}
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateX(140px);
}
.v-enter-active,
.v-leave-active{
transition: all 0.4s ease;
}
</style>
</head>
<body>
<div id="app">
<!-- router-link默认渲染为一个a标签 -->
<router-link to="/login" tag="span">登录</router-link>
<router-link to="/register">注册</router-link>
<!-- 这是vue-router提供的,路由规则匹配到的组件,就会展示在router-view中-->
<transition mode="out-in">
<router-view></router-view>
</transition>
</div>
<script>
var login = {
template:'<h1>登录组件</h1>'
}
var register = {
template:'<h1>注册组件</h1>'
}
//创建一个路由对象
var routerObj = new VueRouter({
routes:[ //路由匹配规则
// {
// path : '/',
// component : login
// },
{
path : '/',
redirect : '/login'
},
{
path : '/login',
component : login
},
{
path : '/register',
component : register
}
],
linkActiveClass : 'myActive'
})
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router : routerObj, //将路由规则对象,监听到vm实例上
watch : {
//this.$route.path
'$route.path' : function(newVal,oldVal){
//console.log(newVal+'-----'+oldVal);
if(newVal === '/login'){
console.log('欢迎进入登录界面')
}else if(newVal === '/register'){
console.log('欢迎进入注册界面')
}
}
}
});
</script>
</body>
当点击登录时,打印出“欢迎进入登录界面”
当点击注册时,打印出“欢迎进入注册界面”
watch、computed与methods的对比
1.computed属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算,主要当作属性来使用,并且需要return一个值;
2.methods方法表示一个具体的操作,主要书写业务逻辑;
3.watch一个对象,键是需要观察的表达式,值是对应回调函数。主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作;可以看作是computed和methods的结合体。
-
computed和methods区别
1.computed属性的方法可以作为属性变量,methods只能被调用
2.computed属性的方法计算值有缓存作用,再次使用不会被计算(直接使用) -
computed 和 watch 的区别和运用的场景
computed: 是计算属性,依赖其它属性值,并且 computed 的值有缓存,只有它依赖的属性值发生改变,下一次获取 computed 的值时才会重新计算 computed 的值;
watch: 更多的是「观察」的作用,类似于某些数据的监听回调 ,每当监听的数据变化时都会执行回调进行后续操作;
运用场景:
- 当我们需要进行数值计算,并且依赖于其它数据时,应该使用 computed,因为可以利用 computed 的缓存特性,避免每次获取值时,都要重新计算;
- 当我们需要在数据变化时执行异步或开销较大的操作时,应该使用 watch,使用 watch 选项允许我们执行异步操作 ( 访问一个 API ),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。