计算属性和watcher的使用区别(15)

一.结论

1.computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；(定义变量的位置在computed)

2.watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象，一般用于监控路由、input输入框的值特殊处理等等，它比较适合的场景是一个数据影响多个数据，它不具有缓存性

3.watch：监测的是属性值， 只要属性值发生变化，其都会触发执行回调函数来执行一系列操作

(监听的是属性值，属性值改变其会触发执行的回调函数来进行一系列操作)

4.computed：监测的是依赖值，依赖值不变的情况下其会直接读取缓存进行复用，变化的情况下才会重新计算。(具有缓存的特性，依赖值不变的情况复用，具有缓存的特性)

5.除此之外，有点很重要的区别是：**计算属性不能执行异步任务，计算属性必须同步执行**。也就是说计算属性不能向服务器请求或者执行异步任务。如果遇到异步任务，就交给侦听属性。watch也可以检测computed属性

二.计算属性(Computed)。

1.具有缓存的特点

举例在methods里面计算价格:

<template>
  <div class="">
    <h1>{{ aa }}</h1>
    <h1>{{ aa }}</h1>
    <h1>{{ aa }}</h1>
    <h1>{{ cc() }}</h1>
    <h1>{{ cc() }}</h1>
    <h1>{{ cc() }}</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      arr: [
        { name: 1, price: 5 },
        { name: 2, price: 10 },
        { name: 3, price: 15 }
      ]
    }
  },
  computed: {
    aa: function () {
      console.log('缓存当依赖项不变的情况下,会进行缓存')
      return this.arr.reduce((a, b) => a + b.price, 0)
    }
  },
  methods: {
    cc: function () {
      console.log('触发methods里面')
      return this.arr.reduce((a, b) => a + b.price, 0)
    }
  }
}
</script>

<style scoped></style>

一个数据依赖于另外一些数据计算而来的，上方的总的价格通过数组里面的price属性而得来的,

那么上方的price就是变量aa的依赖项。

3.计算属性的复合写法

代码：

<template>
  <div class="">
    <h1>总的价格:{{ allPrice }}</h1>
    <input type="text" v-model="allPrice" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      price: 25
    }
  },
  name: '',
  computed: {
    allPrice: {
      // 获取一些依赖来进行计算
      get: function () {
        return this.price * 2
      },
      // 通过set函数来进行值的设定
      set: function (val) {
        // 获取表单里面的值,改变依赖项
        this.price = val / 3
      }
    }
  },
  methods: {}
}
</script>

<style scoped></style>

可以通过get来进行值的获取，也可以通过set来赋值

三.监听器

<template>
  <div class="">
    <input type="text" v-model="name" />
    <p>{{ name }}</p>
    <input type="text" v-model="obj.basktBall" />
    <p>{{ obj }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      name: '哈哈',
      obj: {
        basktBall: '篮球 '
      }
    }
  },
  watch: {
    name (newValue, OldValue) {
      console.log('name', newValue, OldValue)
    },
    // obj (newValue, OldValue) {
    //   // obj进行监听
    //   console.log('obj', newValue, OldValue)
    // }
    obj: {
      deep: true,
      handler: function (newValue, OldValue) {
        console.log('info', newValue, OldValue)
      }
    }
  },
  name: '',
  methods: {}
}
</script>

<style scoped></style>

watch能够监听值的改变,复杂的数据类型需要开启深度监听,deep:true。并且还要写上handler函数，总共有两个参数，第一个是新的值（newValue），第二个值是以前的值（oldValue）// 实现刚进入页面就触发监听 immediate: true。