学习笔记（5） computed、watch

1，computed(计算属性)

computed：是一个对象。对象中添加方法，用于对组件的数据进行计算，返回值就是这个计算结果的值。

• computed中：可以通过this使用组件对象；也可以使用其他计算结果，不需要加()。
• computed也会添加到组件对象中，不能和data以及methods中的名字重复。
• 在模板中使用computed时不需要加()。
• computed依赖于data中的数据，只有在它的相关依赖数据发生改变时才会重新计算。

<template>
  <div>
      <h1>欢迎来到页面——computed（计算属性）</h1>
      <h2>结果：{{returnNum1}}</h2>
      <h2>使用其他计算属性后的结果：{{returnNum2}}</h2>
  </div>
</template>

<script>
export default {
    name: 'vueComputed',
    data() {
        return {
            num1: 3,
            num2: 4,
        };
    },
    computed:{
        returnNum1(){
            return this.num1 * this.num2;
        },
        returnNum2(){
            return this.num1 + this.num2 + this.returnNum1;
        },
    },
}
</script>

效果

2，watch(监听器)

watch：监听器中可以为组件中的数据添加监听函数，每当这个数据发生变化时，监听函数就会被调用。监听函数被调用时会传递两个参数，分别是改变之后的值和改变之前的值。

• immediate属性：立即处理，进入页面就触发。
• deep属性：进行深度监听，值为 true。

对象和数组都是引用类型，引用类型变量存的是地址，地址没有变，所以不会触发watch。这时我们需要进行深度监听。

监听器除了可以监听组件的数据，还可以监听组件的计算结果。
组件中凡是通过set/get定义的属性都可以监听。

2.1，监听基础值（data的数据）

watch:{
  number:{
	 handler(newValue, oldalue) {
	    //console.log(newValue)
	    this.txt = newValue;
	  },
	  // 立即处理 进入页面就触发
	  immediate: true,
	  // 深度监听 属性的变化
	  deep: true
	},
},

2.2，监听整个对象

监听整个对象，每个属性值的变化都会执行handler
注意：属性值发生变化后，handler执行后获取的 newVal 值和 oldVal 值是一样的

watch:{
   obj: {
      // 每个属性值发生变化就会调用这个函数
      handler(newVal, oldVal) {
         console.log('oldVal:', oldVal)
         console.log('newVal:', newVal)
      },
   },
},

2.3，监听对象的某个属性

被监听的属性值发生变化就会执行函数。
函数执行后，获取的 newVal 值和 oldVal 值不一样。

watch:{
   "obj.name"(newVal, oldVal) {
       console.log('oldVal:', oldVal)
       console.log('newVal:', newVal)
   },
}

2.4，watch 和 computed 区别是什么？

computed常用于值的计算，是具有缓存的，页面重新渲染值不变化,computed会立即返回之前的计算结果，而不必再次执行函数。
watch用于监听组件的数据，需要在数据变化时执行异步或开销较大的操作时使用.,页面重新渲染时值不变化也会执行。
data中没有声明的数据可以在computed中使用，但是不能在watch中使用。