vue学习笔记---(2)计算属性computed和监视属性watch(完整写法和简写形式)

1. 计算属性—computed

• 定义
  • 需要使用的属性不存在，要通过已存在的属性计算得到
• 原理
  • 底层借助了Objcet.defineproperty()方法提供的getter和setter。

对于任何复杂逻辑，都应当使用计算属性。

Demo.vue---计算属性完整写法

<template>
  <div>
    <input type="text" v-model="first_name">
    <input type="text" v-model="last_name">
    <h4>你的姓名是: {{fullName}}</h4>
  </div>
</template>

<script>
export default {
  name: 'Demo2',
  data() {
    return {
      first_name: '张',
      last_name: '三',
    }
  },
  computed: {
    fullName: {
      get() {
        return this.first_name + '-' + this.last_name
      },
      set(value) {
        const arr = value.split('-')
        this.first_name = arr[0]
        this.last_name = arr[1]
      },
    },
  },
}
</script>

Demo---简写形式

<template>
  <div>
    <input type="text"
           v-model="first_name">
    <input type="text"
           v-model="last_name">
    <h4>你的姓名是: {{fullName}}</h4>
  </div>
</template>

<script>
export default {
  name: 'Demo2',
  data() {
    return {
      first_name: '张',
      last_name: '三',
    }
  },
  computed: {
    fullName() {
      return this.first_name + '-' + this.last_name
    },
  },
}
</script>

第一次渲染展示

更改输入框数据

2. 监视属性—watch

• 当监视的属性发生变化时，自动调用响应的回调函数

计算属性和监视属性的区别：

1. 功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。
2. 是否调用缓存：computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调。
3. 是否调用return：computed中的函数必须要用return返回，watch中的函数不是必须要用return。
4. computed默认第一次加载的时候就开始监听；watch默认第一次加载不做监听，如果需要第一次加载做监听，添加immediate属性，设置为true（immediate:true）
5. 使用场景：computed----当一个属性受多个属性影响的时候，使用computed-----购物车商品结算。watch–当一条数据影响多条数据的时候，使用watch-----搜索框.

Demo.vue---监视属性的完整写法

<template>
  <div>
    <h3>你当前状态是：{{nowState}}</h3>
    <button @click="changeState">点我切换状态</button>
  </div>
</template>

<script>
export default {
  name: 'Demo3',
  data() {
    return {
      isSlack: false
    }
  },
  methods: {
    changeState() {
      this.isSlack = !this.isSlack
    }
  },
  computed: {
    nowState() {
      return this.isSlack ? '摸鱼' : '躺平'
    }
  },
  watch: {
    isSlack: {
      // 第一次加载时执行一次
      immediate: true,
      // 开启深度监视
      deep: true,
      handler(newValue, oldValue) {
        console.log(`状态被修改,newValue:${newValue}, oldValue: ${oldValue}`);
      }
    }
  }
}
</script>

第一次加载展示---由于第一次加载的时候数据并没有改变，所以oldValue的值为undefined

点击按钮进行数据修改之后展示

Demo.vue---监视属性简写形式

简写形式的watch无法进行开启深度监视和第一次加载时执行

<template>
  <div>
    <h3>你当前状态是：{{nowState}}</h3>
    <button @click="changeState">点我切换状态</button>
  </div>
</template>

<script>
export default {
  name: 'Demo3',
  data() {
    return {
      isSlack: false
    }
  },
  methods: {
    changeState() {
      this.isSlack = !this.isSlack
    }
  },
  computed: {
    nowState() {
      return this.isSlack ? '摸鱼' : '躺平'
    }
  },
  watch: {
    isSlack(newValue, oldValue) {
      console.log(`状态被修改,newValue:${newValue}, oldValue: ${oldValue}`);
    }
  }
}
</script>

第一次加载页面展示---简写形式无法开启第一次加载时执行一次

点击按钮进行修改数据之后的页面展示