Vue中computed、methods、watch区别

1. computed计算属性

计算属性最常见的写法就是函数写法：

<template>
  <div class="home">
    {{formMsg}}
    <button @click="formMsg = 'uu盘'">点击修改</button>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      msg: 'hello'
    }
  },
  computed: {
    formMsg() {
    // 必须要有返回值，没有return值为undefined，计算属性作为属性({{formMsg}})去使用
      return this.msg.split('').reverse().join('')
    }
  }
}
</script>

当我们去点击按钮修改formMsg的值时，浏览器会报错
这是因为计算属性不能直接赋值，它里面没有设置set属性，我们可以为其添加一个set属性

<template>
  <div class="home">
    {{formMsg}}	// 会显示：uu盘
    <button @click="formMsg = 'uu盘'">点击修改</button>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      msg: 'hello'
    }
  },
  computed: {
    formMsg: {
      get() {
      	return this.msg
      },
      set(val) {
      	this.msg = val
      }
    }
  }
}
</script>

特性

计算属性只有当依赖值发生改变时才会重新计算，否则会缓存生成的属性值 无论多少次使用都只调用一次。

<template>
  <div class="home">
    {{formMsg}}
    {{formMsg}}
    {{formMsg}}
    {{formMsg}}
    <button @click="msg= 'uu盘'">点击改变msg</button>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      msg: 'hello'
    }
  },
  computed: {
    formMsg() {
      console.log(1)
      return this.msg.split('').reverse().join('')
    }
  }
}
</script>
不管我们使用多少次{{formMsg}}，在浏览器中都只会输出一个1
只有当点击按钮[msg发生了变化]，才会再次输出1

2. methods方法

methods 方法表示一个具体的操作，主要书写业务逻辑。

<template>
    <div class='home'>
        你购买的数量：{{num}}<br>
        <button @click="add">增加数量</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            num:1,
        };
    },
    methods: {
        add() {
            this.num++
        }
    }
};
</script>

computed 和 methods区别

在官方文档中，强调了computed区别于method最重要的两点:
1 . computed是属性调用，而methods是函数调用
2 . computed带有缓存功能，而methods不会被缓存

<template>
    <div class='home'>
        {{resetMsg()}}
        {{resetMsg()}}
    </div>
</template>

<script>
export default {
    data() {
        return {
            msg:"你好"
        };
    },
    methods: {
        resetMsg() {
            console.log('methods');
            return this.msg.split('').reverse().join('')
        }
    }
};
</script>
methods是函数调用{{resetMsg()}}，不会缓存，浏览器会输出两次methods

<template>
    <div class='home'>
        {{resetMsg}}
        {{resetMsg}}
    </div>
</template>

<script>
export default {
    data() {
        return {
            msg:"你好"
        };
    },
    computed: {
        resetMsg() {
            console.log('computed');
            return this.msg.split('').reverse().join('')
        }
    }
};
</script>
computed是属性调用{{resetMsg}}，具有缓存功能，浏览器会输出一次computed

3. watch监听属性

watch属性可以用来监听data属性中数据的变化。

<template>
    <div class='home'>
        <button @click="msg = 'uu盘'">改变msg</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            msg:'你好'
        };
    },
    watch:{
        msg(newVal,oldVal) {
            console.log(newVal,oldVal); // uu盘  你好
        }
    }
};
</script>
这种函数写法只能监听基本数据类型的变化，对于引用数据类型(数组、对象)是监听不到他们的变化

watch的深度监听

# 对象
<template>
    <div class='home'>
        <button @click="obj.name = 'uu盘'">改变对象中name属性</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            obj:{
                name:'hello',
            }
        };
    },
    watch:{
    	// 方法一：监听对象中的单个属性变化的方法
        'obj.name'(newVal,oldVal) {
            console.log(newVal);    // uu盘
            console.log(oldVal);    // hello
        },
        // 方法二：深度监听 可以监听引用数据类型中所有的属性
        obj:{
            handler(val) {
                console.log(val); // {name:'uu盘'}
            },
            deep:true,		// 开启深度监听
            immediate: true	// 页面进入后数据监听会立即执行一次
        }
    }
};
</script>
# 数组
<template>
    <div class='home'>
        <button @click="change">改变数组</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            arr:[1,2,3]
        };
    },
    methods:{
        change() {
            this.arr.push(4)
        }
    },
    watch:{
        // 监视程序只接受简单的点分隔路径(obj.name)
        // 'arr[0]'(newVal,oldVal) {	错误写法
        //     console.log(newVal,oldVal);
        // }
        arr:{
            handler(val) {
                console.log(val);	// [1,2,3,4]
            },
            deep:true
        }
    }
};
</script>

总结

1 . computed属性的结果会被缓存，只有当依赖值发生改变才会重新计算，一般处理复杂的逻辑的时候使用，擅长处理一个数据受多个数据影响(购物车商品结算)；
2 . methods 方法表示一个具体的操作，主要书写具体业务逻辑；
3 . watch监听属性，主要用来监听某个值前后变化，从而进行某些具体的业务逻辑操作，擅长处理一个数据影响多个数据(搜索框，表单验证)。