vue中的方法、计算属性和侦听器的区别

计算属性 和方法的区别

<div id="app">
   {{ name }}  {{ age }} 
    <br>
    {{ getPreson1() }}
    <br>
    {{ getPreson2 }}
    <br>
    {{ preson }}
</div>

var vm = new Vue({
	 el:"#app",
     data: {
         // 前提：后台给的
         name : "wh",
         age : 21,
         msg : "哈哈哈哈",
         preson :''
     },
     methods : {//方法   只要调用它，函数就会执行
         getPreson1() {
             console.log("test1");
             // 属性放在methods中,修改其他不相关的属性的时候会触发methods中方法
             // 对性能造成影响
             return `姓名：${ this.name }年龄：${ this.age }`
         }
     },
     computed : { //计算属性
         getPreson2(){  //计算属性是不需要调用，直接使用
             // 计算属性相当于做了一层缓存，只要不涉及修改的值从缓存中取值
             // 只有在涉及到数据更改的时候才会重新执行该函数
             console.log("test2")
             return `姓名：${this.name}年龄：${this.age}`
         }
     },
})

当修改msg这个数据是，methods 中getPreson1会打印 test1，而computed不会

说明计算属性computed是基于它们的依赖进行缓存的，只有相关依赖会发生改变时才会重新求值。只要相关依赖未改变，只会返回缓存中的结果，不会执行函数。
而methods,只要调用它，函数就会执行

侦听器

 //侦听一个数据的变化
  watch:{ //观察  函数，对象
     name(newVal){  //name被修改就会被触发
          //newVal改变name以后的新值
          //监听数据必须先存在
          this.preson = `姓名：${this.name}年龄：${this.age}`
      },
      age(newVal){
          this.preson = `姓名：${this.name}年龄：${this.age}`
      }
  }

computed和watch的区别

1. computed可以观察多个数据，watch只能是一个数据
2. computed生成一个新的数据，直接渲染至视图中，watch是修改本身已经存在的数据
3. computed不可以执行异步的，因为需要返回值，返回值是由js主线程控制，watch可以执行异步的，因为不需要返回数据，定时器是属于异步的线程