第十七篇 watch监听（computed、methods、watch区别）

        上一篇 内容讲到computed的运用以及 computed 和 methods 的区别，本篇内容将从watch监听开始，继而讲这三者的区别；

        在大部分情况下计算属性的使用是非常重要的，它解决了模板过重以及处理一些重逻辑的东西，有时我们需要做一个监听器，当需要数据变化时执行异步或者开销较大的操作，用watch是比较合适的，这个可以看一下Vue开发文档中的一个例子，这个例子能让你瞬间知道watch与计算属性的区别，附上地址：watch | 侦听器，下面给这个例子进行最简化，先让一些不是特别清除的朋友们知道一个大致，然后再去了解开发文档当中的那个例子；

watch

        这里为兼顾一些刚接触的朋友或者学了不久的，将文档中例子当中的部分东西去掉了；

<div id="watch-example">
    <p>
        Ask a yes/no question:
        <input v-model="question">
    </p>
    <p>{{ answer }}</p>
</div>

<script>
  var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.getAnswer()
    }
  },
  methods: {
    getAnswer: function () {
      this.answer = 'Thinking...'
      var vm = this
      axios.get('https://yesno.wtf/api')
        .then(function (response) {
          vm.answer = response.data.answer
        })
        .catch(function (error) {
          vm.answer = 'Error! Could not reach the API. ' + error
        })
    }
  }
})
</script>

不难看出在我们直接获取得到结果之前有一个中间的状态，我们输入了一个问题（Ask a yes/no question），不是直接给我们一个结果（yes/no），而是在获取结果之前有一个状态（Thinkiing...），这些是计算属性不能够完成的，同时watch还允许我们做一个异步操作，这个在后面会讲到如何做请求之类的，当前是掌握watch的一些用法以及与计算属性的一个区别，下面进行对之前的一个案例调整；

 watch 购物车页面

         继续之前的一个购物车页面，分别使用过了methods和computed，这次使用的是watch实现里面的一个小功能，完成表当控件的一个勾选状态监听，是否触发全选和非全选；下面将勾选状态的代码拿过来；

原先代码：

// methods
<script>
    ...
    //全选/全不选
    handleAllCheck(ev){
        // 用事件对象
        // console.log(ev.target.checked)
        if(this.isAllChecked){
           this.checkGroup = this.list
         }else{
           this.checkGroup = []
         }
    },
    //判断是否全选 用数组的长度 checked()不会自动执行
    // 什么时候调用，就在单选框点击的时候进行调用判断一下
    checked(){
        if(this.checkGroup.length === this.list.length){
            this.isAllChecked = true
        }else{
            this.isAllChecked = false
        }
    }
    ...
</script>

         全选则勾选的列表（checkGroup）就应该是购物车当中的全部数据（list），不全选则是勾选列表中什么也没有（checkGroup = [ ]）；每次勾选会加到checkGroup中来，是否触发全选，则每次勾选进行比对勾选的列表长度是否等于购物车的数据，是的话全选，反之不全选；

watch 修改后代码：

        原先用methods函数方法，绑定在input上监听勾选变化时触发handleAllcheck，也即是：

<input type="checkbox" @change="handleAllCheck" v-model="isAllCheackComputed" />全选

        用计算属性，computed时用到的是getter,setter，具体可以看上一篇内容

<input type="checkbox" v-model="isAllCheackComputed" />全选
...
computed:{
    isAllCheackComputed:{
        set(isChecked){
            if(isChecked){
                this.checkGroup = this.list
            }else{
                this.checkGroup = []
            }
        },
        get(){
            return this.checkGroup.length === this.list.length
        }
    }
}

        用 watch监听器 来监听状态改变，不用 @change="handleAllCheck" ，即：

<input type="checkbox"  v-model="isAllChecked" />全选
...
watch:{
    //监听状态改变
    isAllChecked(data){
        // console.log("变化了",data)
        // if(data){
        if(this.isAllChecked){
            this.checkGroup = this.list
        }else{
            if(this.checkGroup.length === this.list.length){
                this.checkGroup = []
            }   
        }
    }
}

        以上就是用methods、computed 以及 watch 进行对购物车页面的使用以及区别；如果感觉看这篇有些不是很清楚，请结合之前的几篇内容，内容渐进性比较强的；

---

附上关于以上内容的其他几篇关联：

第十四篇 表单控件 - 购物车页面_灵魂学者的博客-CSDN博客

第十六篇 Computed 计算属性的应用_灵魂学者的博客-CSDN博客

---

methods、computed、watch 区别总结

        上一篇内容小结了 methods 和 computed 的区别，那么这次也将上次的内容归纳到这里面进来进行一个总结：

computed：注重结果
    1. 逻辑计算，防止模板过重，有缓存
    2. 监听：依赖修改，get方法必须 return

methods:
    1. 点击事件处理函数，return 是不必需要的
    2. 函数表达式的逻辑处理，没有缓存

watch：注重过程
    1. 监听，充当观察者
    2. 不用return 调用

---

methods 和 computed

相同点：

作为模板的数据显示，两者都能实现响应功能，唯一不同的是methods定义的方法需要执行；

不同点：

1、computed 会基于响应数据缓存，methods不会缓存；

2、diff之前先看data里的数据是否发生变化，如果没有变化computed的方法不会执行，但methods里的方法会执行；

3、computed是属性调用，而methods是函数调用。

---

computed 和 watch

computed计算属性：

基于响应数据缓存，依赖它的属性值也会发生改变，只有computed取其他值时才会重新计算computed的值；

watch 监听器：

更多的是充当 " 观察 "的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；

运用场景：

• 当需要进行数值计算，并且依赖于其它数据时，应该使用computed，因为可以利用computed的缓存特性，避免每次获取值时，都要重新计算；

• 当需要在数据变化时执行异步或开销较大的操作时，应该使用watch，使用watch选项允许执行异步操作( 访问一个API)，限制我们执行该操作的频率，并在得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

---

        以上就是本篇的记录内容，主要关于watch使用和 使用watch修改之前购物车页面的小功能以及总结methods，computed和watch的区别，感谢观看，支持一下！