computed和watch

发表于
字数统计: 850字 | 阅读时长 ≈ 3分钟

一、computed相关的用法说明

先看下面这行代码的效果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import Vue from 'vue'

new Vue({
    el:'#root',
    template:`
    <div>
        <div>{{name}}</div>
        <div>{{getname()}}</div>
        <div>{{number}}</div>
        <input type="text" v-model="number"/>
    </div>
    `,
    data:{
        firstname:'Jone',
        lastname:'Lou',
        number:0
    },
    computed:{
        name(){
            console.log('new name')
            return `${this.firstname} ${this.lastname}`
        }
    },
    methods:{
        getname(){
            console.log('new name invoke')
            return `${this.firstname} ${this.lastname}`
        }
    }
})

​ 这里在computed中声明了一个name()方法和getname()方法，在改变输入框的值时候，整个应用的值是会被重新渲染的，可以发现computed中的方法并没有被触发，但是getname()中的方法被触发了。这对性能的优化是很有效的。但是并不是改变的时候都不会触发。如果这个时候在template中加上：

1
2
<input type="text" v-model="firstname"/>
  <input type="text" v-model="lastname"/>

并且在输入框中改变输入的值的时候，就会看见input中的值改变了computed中的方法被触发了。这是当它依赖的值被改变的时候它的计算属性会被调用。

当然，computed还可以做一些属性的设置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
computed:{
        name:{
            get(){
                console.log('new name');
                return `${this.firstname} ${this.lastname}`
            },
            set(name){
                const names = name.split(' ')
                this.firstname = names[0]
                this.lastname = names[1]
                console.log('hhh')
            }
        }
    },

这里可以对name设置get和set方法从而实现读取的相关操作。

二、watch

watch可以对一个变量的值的变化进行监听，并做一些响应的操作。这里我们对firstname及逆行一次监听：

1
2
3
4
5
watch:{
    firstname(newname,oldname){
        this.fullname = newname+" "+this.lastname
    }
},

这里引入了一个新的变量叫fullname，并且在上面的div中对其进行渲染，可以看见，刚开始打开的时候并不能看见fullname的值，这是因为watch方法最初绑定的时候是不会被渲染的，只有被监听的值发生变化的时候才会被执行。当然我们也可以对其进行一些处理：

1
2
3
4
5
6
7
8
watch:{
    firstname:{
        handler(newname,oldname){
            this.fullname = newname+" "+this.lastname
        },
        immediate:true
    }
}

这样在初始化的时候就可以将数据渲染到页面上了。watch不适合用来做数据的显示，但适合见町名数据的变化并在后台做一些相关的处理。

当然，watch还有一个属性叫做deep这里做一个例子：

1
2
3
4
5
6
7
8
9
10
11
12
//data
      obj:{
          a:'123'
      } 
//watch
obj:{
          handler(newname,oldname){
              console.log('obj.a changed')
          },
          immediate:true,
          //deep:true
      }

​ 这里，如果在输入框中仅仅改变obj.a的值的时候，watch里面的方法并不会被触发，这是因为对象中的watch只会监听对象的变化，但是改变内部的属性是不起作用的。常用的办法就是加上deep:true。但这里也会有一个问题，每当对象中的属性发生变化的时候，不管和a这个属性有关还是无关，都会触发这个方法，这对性能是有影响的。一个好的处理办法就是将监听的obj换成字符串的’obj.a’。这时候就会只监听a属性。同时注意，在computed中不要对监听值进行修改，不然可能会导致无限次触发。

0%