Vue-computed与watch

发表于 更新于 分类于 阅读次数：

计算属性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
<div id="box">
    <input type="text" v-model="message"> 
    <p>{{changeMessage}}</p>
	<p>{{changeName}}</p>
</div>


el: '#box',
data: {
    message: '123',
    name: 'Silence'
},
computed: {
    // 这是属性
    changeMessage() {
    	return this.message;
    },
    // 这是属性
    changeName: {
    	get(){
    		return this.name;
    	},
    	set(val){
    		this.name = val;
    	}
    }
},
概念
  • computed计算属性，当依赖的属性的值（data中声明过或者父组件传递的props中的数据）发生变化时触发更改，否则使用的是缓存中属性值；
  • computed中有两个方法get()和set()，如果computed的属性值是函数，那么默认会走get方法，函数的返回值就是属性的属性值；
  • 可以通过自定义set方法来给计算属性赋值；
  • computed的计算属性需要映射到DOM上，否则无效，即计算属性须被模板使用；
  • 不支持异步，当computed内有异步操作时无效，无法监听数据的变化。

监听属性watch

用法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="box">
    <input type="text" v-model="message"> 
</div>

data: {
    message: '123',
    name: 'Silence'
},
watch: {
    // 此处message是data中的message
	message: function(newVal, oldVal){
    	console.log(oldVal+','+newVal);
    },
    name: {
        handler: function(){},
        immediate: true,
        deep: true,
    }
},
概念

  • 不支持缓存，数据发生变化直接会触发相应的操作；

  • 支持异步；

  • 监听的函数接收两个参数，第一个参数是最新的值；第二个参数是变化之前的值；

  • 监听的数据必须是data中声明过或者父组件传递过来的props中的数据；

  • 监听的函数有两个参数：
    immediate：组件加载立即触发回调函数执行

    deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做

computed与watch的区别

  1. computed 适合多个数据变化影响一个数据；watch 适合一个数据的变动影响多个数据或者复杂的运算。
  2. 当需要在数据变化时执行异步或开销较大的操作时使用watch。
  3. computed是在HTML DOM加载后马上执行的，所以执行顺序是先computed然后watch。