computed和watch

computed

1、什么是computed？

computed是计算属性。类似于方法，但和methods不同，methods每次调用时会重新执行函数，而computed在其内部变量不变或其返回值不变的情况下多次调用只会执行一次，后续执行时直接从缓存中获取该computed的结果。（demo->src->views->learn->computed）

2、computed的原理是什么？

当依赖项不变化时不会进行重新的执行，只有变化时才会再次执行，计算属性的结果会被缓存，除非依赖的响应式 property 变化才会重新计算。注意，如果某个依赖 (比如非响应式 property) 在该实例范畴之外，则计算属性是不会被更新的。

3、为什么有computed？

<div>{{message.split('').reverse().join('')}}</div>

像这样在模版里直接放一些运算逻辑会很繁琐，不利于阅读，也比较难以维护（多个地方使用到时）。这种情况就可以想到使用运算属性，以上可写成：

<div>{{reverseMessage}}</div>

data(){
	return {
		message: 'hello'
	}
}
computed: {
	reverseMessage(){
		return this.message.split('').reverse().join('')
	}
}

这样模版里代码就简洁很多，并多地方使用也可以做到同意管理

5、computed的应用场景？

使用场景：当一个值受多个属性影响的时候

watch

1、什么是watch？

Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。

2、watch的原理 (需要看源码，慢慢理解，有点困难，后期补充)

3、用法：

基础用法用于监听数据的变化，并及时更新dom

<input type="text" v-model="cityName"/>

  data(): {
  	return {
   		cityName: 'shanghai'
	}

  },
  watch: {
    cityName(newName, oldName) {      // ...    }
  } 

或者直接在watch里面写一个监听处理函数，当每次监听到 cityName 值发生改变时，执行函数。也可以在所监听的数据后面直接加字符串形式的方法名：

watch: {
    cityName: 'nameChange'
    }
 }
methods： {
	nameChange () {
		console.log('被调用了')
	}
}

这样使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。比如：当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true

• immediate立即执行

watch: {    
// 关键字    
  cityName: {      
	handler() {       
	    this.nameChange()      
	},
    immediate: true    
  }  
}

监听的数据后面写成对象形式，包含handler方法和immediate，immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。

• deep深度监听
  当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。

<input type="text" v-model="cityName.name"/>  <!-- 监听cityName的name对象 -->

设置deep: true 则可以监听到cityName.name的变化。

  data(): {
  	return: {
	    cityName: {id: 1, name: 'shanghai'}
	}
  },
  watch: {
    cityName: {
      handler(newName, oldName) {      // ...    },
    deep: true,
    immediate: true
    }
  } 

但是，此时会给cityName的所有属性都加上这个监听器，当对象属性较多时，每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值，则可以做以下优化：使用字符串的形式监听对象属性：

watch: {
'cityName.name': {
      handler(newName, oldName) { 
     // ...    
  },
      deep: true,
      immediate: true
    }
  }

数组（一维、多维）的变化不需要通过深度监听，对象数组中对象的属性变化则需要deep深度监听。

区别

computed 是计算一个新的属性，并将该属性挂载到 vm（Vue 实例）上，而 watch 是监听已经存在且已挂载到 vm 上的数据，所以用 watch 同样可以监听 computed 计算属性的变化（其它还有 data、props）
computed 本质是一个惰性求值的观察者，具有缓存性，只有当依赖变化后，第一次访问 computed 属性，才会计算新的值，而 watch 则是当数据发生变化便会调用执行函数。

computed：通过属性计算而得来的属性

1、computed内部的函数在调用时不加()。

2、computed是依赖vm中data的属性变化而变化的，也就是说，当data中的属性发生改变的时候，当前函数才会执行，data中的属性没有改变的时候，当前函数不会执行。

3、computed中的函数必须用return返回。

4、在computed中不要对data中的属性进行赋值操作。如果对data中的属性进行赋值操作了，就是data中的属性发生改变，从而触发computed中的函数，形成死循环了。

5、当computed中的函数所依赖的属性没有发生改变，那么调用当前函数的时候会从缓存中读取。
　　　使用场景：当一个值受多个属性影响的时候------------购物车商品结算
　　
　　watch：属性监听

1、watch中的函数名称必须要和data中的属性名一致，因为watch是依赖data中的属性，当data中的属性发生改变的时候，watch中的函数就会执行。

2、watch中的函数有两个参数，前者是newVal，后者是oldVal。

3、watch中的函数是不需要调用的。

4、watch只会监听数据的值是否发生改变，而不会去监听数据的地址是否发生改变。也就是说，watch想要监听引用类型数据的变化，需要进行深度监听。“obj.name”(){}------如果obj的属性太多，这种方法的效率很低，obj:{handler(newVal){},deep:true}------用handler+deep的方式进行深度监听。
　　
　　5、immediate:true 页面首次加载的时候做一次监听。
　　
　　适用场景：当一条数据的更改影响到多条数据的时候---------搜索框