computed

computed: {
         total: function (){
           return this.first + this.second
         }
 },

computed监控定义的变量，不在data中声明，就可以在页面上直接展示结果，如果在data中申明，会报错

如果定义会报错,total作为计算属性定义，，在里面计算的结果返回给这个变量，那么就不可以被 重复定义和赋值

比较常用的场景类似于购物车，，，商品的多和少或者数量的增和减都会影响最后总的金额，多个变量中的某一个发生了变化 那么总的值也会发生变化

computed中定义的变量有两个方法，get和set

 <h1>b----{{b}}</h1>
<button @click="add">click me</button>
<h2>a-----{{a}}</h2>

        data() {
           return {
              a: 1,
           }
         },
        computed: {
          b: {
            get() {
              console.log('GET')
              return this.a + 2;
            },
            set(val) {
              console.log('SET')
              this.a = val
            }
          }
        },
        methods: {
            add: function(){
               this.b = 10
            }
        }

get方法是默认的，获取值

set方法就是改变这个属性值的时候会触发，比如在这里点击了按钮就会触发这个set方法

点击按钮，走add的方法，然后改变了计算属性定义的变量b，这个时候就会执行set方法，重新给a赋值为10，然后通过get方法返回b的值是12

watch

监控的变化必须在data里面声明才可以，变量，对象都可以
工作中常用的，监听路由

//简单数据
      watch:{
        total(newVal,oldVal){
          console.log(newVal)
          console.log(oldVal)
          console.log('watch')
        }
      },
//复杂数据
    return {
          obj: {
              name: 'Lily',
              age: 12
          }
        }
      },
      watch:{
        obj:{
            deep:true,
            handler:function(newVal,oldVal){
                console.log(newVal)
                console.log(oldVal)
            }
        }
      },
      methods: {
        changeName() {
          this.obj.name = 'Jack'
        }
      }‘
输出的两个值都是更新后的值，无法拿到更新之前的值 ，，因为newVal和oldVal的索引指向同一个对象，，，，也就是说可以监听对象的变化，监听不了具体对象的变化
深度监听的函数名必须是handler，否则无效
官方文档指出数组监听不要使用deep:true

//单个对象
 'obj.name'(newVal,oldVal) {
    console.log(newVal)
    console.log(oldVal)
}
如果不想这么写，也可以借助computed
     computed: {
        change() {
            return this.obj.name
        }
      },
      watch:{
        change(newVal,oldVal) {
          console.log(newVal)
          console.log(oldVal)
        }
    }

区别

一、computed与watch

computend就是在它关联的数据发生改变的时候才会触发,,, 简化逻辑，，可以缓存，页面重新渲染也不会变化，会返回之前的结果，不会再次执行

watch就是监听哪个发生了变化就变化，页面只要重新渲染就会执行

二、computed与method

一个是属性调用 一个是函数调用,,,,而且computed具有缓存功能

computed: {{add}}

method: {{add()}}

    <h1>{{message}}</h1>
    <p>{{totalMethod}}</p>
    <p>{{totalMethod()}}</p>
    <p>{{totalMethod()}}</p>
    <p>{{totalComputed}}</p>
    <p>{{totalComputed}}</p>
     computed: {
          totalComputed() {
              console.log('computed')
              return this.message + 'computed'
          }
      },
      methods: {
            totalMethod() {
                console.log('method')
                return this.message + 'method'
            }
      }

执行次数.png

从截图中可以看出，方法是每次都执行， 而computed在这个里面只有message发生了改变，才会执行
复杂逻辑使用computed有利于性能的提升
computed依赖于data中的数据，只有在它的相关依赖数据发生改变时才会重新求值