watch、computed和methods的比较

watch、computed和methods的比较

先看computed和methods的比较

computed是计算属性，methods是方法，都可以实现对 data 中的数据加工后再输出。不同的是 computed计算属性是基于它们的依赖进行缓存的。计算属性 computed 只有在它的相关依赖发生改变时才会重新求值。这就意味着只要data 中的数据message 还没有发生改变，多次访问 reversedMessage（对message 进行加工的处理函数）计算属性会立即返回之前的计算结果，而不必再次执行函数。而对于method ，只要发生重新渲染，method调用总会执行该函数。当有一个性能开销比较大的的计算属性 A ，它需要遍历一个极大的数组和做大量的计算。 然后我们可能有其他的计算属性依赖于 A ，这时候，我们就需要缓存。也就是使用 computed 而不是methods。但对于每次都需要进行重新计算的属性比如下面这个函数的返回值 function () { return Date.now()} ，我们最好使用 methods。总之：数据量大，需要缓存的时候用 computed ；每次确实需要重新加载，不需要缓存时用methods

这短话有借用别人的博客的内容，但是这是比较早的笔记，没有记录是谁的，所以就直接这样引用了，语言不是讲的很清楚，上代码就看的很明白了

<div id ="app"> 
    <input type="text" v-model="firstName">+
    <input type="text" v-model="lastName">=
    <input type="text" v-model="fullName">
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
    <h2>{{getFullname()}}</h2>
    <h2>{{getFullname()}}</h2>
</div>
<script>
   let app = new Vue({
      el: '#app',
      data: {
          firstName:"",
          lastName:""
      },
      methods: {
          getFullname:function(){
              console.log("getFullname");
              return this.firstName + ' ' + this.lastName;
          }
      },
      computed:{
          fullName:function(){
              //每当这里面使用的data中的数据发生改变时才会调用一次这个方法
              console.log("fullName");
              return this.firstName + ' ' + this.lastName;
          }
      },
   });
</script>

因为computed会检查缓存中的数据有没有变化，只要computed中的函数引用的data里面的数据，那么就只会输出一个fullName

不过computed不支持异步，当computed内有异步操作时无效，无法监听数据的变化，其实computed有setter和getter的属性，不过一般情况下是不使用setter的方法,是只读属性，要写成set和get也可以

fullName:function(){
    set:function(data){
        const names = data.split(" ");
        firstName = names[0];
        lastName = names[1];
    },
    get:function(){
         return this.firstName + ' ' + this.lastName;
    }
}

监听属性watch：

而侦听器 watch 是侦听一个特定的值，当该值变化时执行特定的函数。例如分页组件中，我们可以监听当前页码，当页码变化时执行对应的获取数据的函数，还可以监听this.$route.path的路径改变，这个最好监听一下那些比较虚拟的数据变化，

基本的监听方法

<input type="text" v-model="firstName">+
<input type="text" v-model="lastName">=
<input type="text" v-model="fullName">
data: {
    firstName:"",
    lastName:"",
    fullName:""
},
watch:{
    firstName: function (nawVal,oldVal) {
        this.fullName = newVal + ' ' + this.lastName
    },
    lastName: function (nawVal,oldVal) {
        this.fullName = this.firstName + ' ' + nawVal
    }
}

不过要注意，watch不可以使用箭头函数
watch的其他使用方法：
基本的监听有个不足的地方就是我们在初始值的时候不会执行handler方法。为了解决这个问题我们就需要用到immediate属性了
使用场景：父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，这时只需要将immediate设为true就行了

watch: {
    fullName: {
        immediate: true,
        handler(val) {
            console.log(val)
        }
    }
} 

上面的两种方法监听一个对象的变化时，普通的watch方法无法监听到对象内部属性的变化，这时就需要使用deep属性对对象进行深度监听

data: {
    student: {id: 1, name: "none",sex: "男"}
},
watch: {
    student: {
        handler(val) {
            console.log(val)
        },
        deep: true,
    }
} 

computed和watch的区别

1、
computed计算属性都会有一个返回值，他依赖于多个data中的数据进行计算
watch只依赖于一个数据进行监视，watch没有返回值
2、
computed支持缓存，只有依赖数据发生改变，才会重新进行计算
watch不支持缓存，数据变，直接会触发相应的操作
3、
computed不支持异步，当computed内有异步操作时无效，无法监听数据的变化
watch支持异步