首页 » 前端 » 正文

Vue的methods、computed、watch

| 前端 | | 暂无评论 | 12508 views

methods：是方法，就是一个普通的函数，在逻辑中手动去调取

1
2
3
4
5
6
methods: {
    //一个函数方法，this为vue对象，自由使用即可
    listRolling(){
        this.classAnimate='animate'
    }
},

ps：在生命周期中直接‘this.listRolling()’调用即可

computed：是一个计算属性,类似于过滤器,对绑定到view的数据进行处理，它不能对data或者props里的对象进行重复定义。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
data: {
    firstName: 'Foo',
    lastName: 'Bar'
},
computed: {
    fullName: function () {  //这里会报错的，因为重复定义了
      return this.firstName + ' ' + this.lastName
    },
    newName: function () {   //这里的newName可以在模板中直接用
      return this.firstName + ' ' + this.lastName
    },
    checkName: function () {   //这里的newName可以在模板中直接用
      get(){
           console.log('页面中使用checkName的时候生效')
           return this.firstName
      },
      set(name){
           console.log('页面中设置checkName的时候生效')
           this.firstName=name
      }
    }
}

ps：针对checkName要说一下get和set，get是我们使用‘this.checkName’的时候得到return回去的值，get方法使用‘this.checkName＝xxx’的时候走，当然我这里逻辑写的是重置了firstName。

watch：是一个观察动作，参数就是要监听的值，这个值是data或者props里的所有的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
data:{
     a:1,
     b:{
         c:1
     }
},
watch:{
     a(val, oldVal){//普通的watch监听
         console.log("a: "+val, oldVal);
     },
     b:{//深度监听，可监听到对象、数组的变化
         handler(val, oldVal){
             console.log("b.c: "+val.c, oldVal.c);//但是这两个值打印出来却都是一样的
         },
         deep:true
     }
}