Vue 中methods，computed，watch的区别

methods

methods中定义的都是具体的方法，根据一些触发条件，调用一次，重新执行一次。

比如说点击事件

<template>
    <div>
        <!-- 调用一次，执行一次 -->
        <div @click="onClick">
            
    </div>
    </div>
</template>

<script>
export default{
    methods:{
        // 定义一些事件处理函数
        onClick(){
            window.console.log("hello word")
        }
    }
}
</script>

computed

computed是vue中独有的一个计算属性，它是基于它们的依赖进行缓存的,只有在它的相关依赖发生改变时才会重新求值。
就算在data中没有直接声明出要计算的变量，也可以直接在computed中写入。
计算属性默认只有getter，可以在需要的时候自己设定setter
setter默认有一个参数(用不到也可以不写)

比如说购物车总价总价总量计算，用计算属性实现会变得非常容易。

<script>
    export default{
        computed:{
            // 总价计算
            totalPrice(state) {
            // 声明一个变量
            let totalPrice = 0
            // 循环购物车数组
                state.shoppingCartItem.forEach(ele => {
                    // 如果选中则累加商品价格*商品数量
                    if(ele.checked == true){
                        totalPrice += ele.count * ele.price
                    }
                })
                // 导出
            return totalPrice
        }
    }
</script>

vue中input的值双向绑定的数据必须在data中定义，但是由于使用了vuex，数据全部定义在vuex中，所以采用计算属性的get和set定义双向绑定的值。

<script>
    export default{
          computed: {
            test:{
                // get方法获取vuex的数据并return
                get(){
                    return this.$store.state.shoppingCartCheckAll
                },
                //set方法接收一个参数，这个参数就是绑定的布尔值
                //set会改变传过来的值
                set(v){
                //window.console.log(v)
                //提交一个方法 在vuex中定义并处理
                this.$store.commit("oncheckAll",v);
                }
            }
        },
    }
</script>

总结：数据量大，需要缓存的时候用computed；每次确实需要重新加载，不需要缓存时用methods。

watch

watch的作用可以监控一个值的变换，并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。

它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。

商品的多重筛选可以用到这个属性。

<script>
    export default{
        watch: {
    filter: {
      handler: function(val, oldval) {
        window.console.log(oldval);
        // 声明一个数组
        let arr = [];
        // 每次点击价格筛选就会给对象的价格条件属性重新赋值
        // 如果不等于初始设置的值
        if (val.price !== -1) {
          // 如果重新赋值为0判断
          if (val.price === 0) {
            this.data.forEach(ele => {
              if (ele.price < 3999) {
                arr.push(ele);
              }
            });
          } else if (val.price === 1) {
            this.data.forEach(ele => {
              if (ele.price >= 4000 && ele.price <= 4499) {
                arr.push(ele);
              }
            });
          } else if (val.price === 2) {
            this.data.forEach(ele => {
              if (ele.price >= 4500 && ele.price <= 4999) {
                arr.push(ele);
              }
            });
          }
          // 判断完所有下标后把定义的数组赋值给页面显示的数组
          // return出来
          this.currentData = arr;
        } else {
          // 如果没有重新赋值则赋值为原数组
          this.currentData = this.data;
        }
        let newArr = [];
        // 如果类型筛选条件不为空,也就是重新赋值了
        if (val.type.length !== 0) {
          // 循环页面显示的数组
          this.currentData.forEach(ele => {
            // 如果提交的类型存在就添加到新数组
            if (val.type === ele.type) {
              newArr.push(ele);
            }
          });
          // 赋值
          this.currentData = newArr;
        } else {
          newArr = this.currentData;
        }
      },
      deep:true
    }
  },
    }
</script>

computed 和 watch 都可以观察页面的数据变化。当处理页面的数据变化时，我们有时候很容易滥用watch。而通常更好的办法是使用computed属性，而不是命令是的watch回调。

尽量用computed计算属性来监视数据的变化，因为它本身就这个特性，用watch没有computed“自动”，手动设置使代码变复杂。

在大多数情况下computed属性都能够代替watch属性使用，但是在有些情况下我们需要自定义一个watcher，在数据变化时来执行异步操作，这时watch是非常有用的。

最后编辑于：2020.06.19 18:37:50