computed

基本

作用：computed 函数用来定义计算属性。

<template>
  <p>firstName: {{ person.firstName }}</p>
  <p>lastName: {{ person.lastName }}</p>
  <input type="text" v-model="person.fullName" />
</template>
<script>
  import { computed, reactive } from 'vue'
  export default {
    name: 'App',
    setup() {
      const person = reactive({
        firstName: '朱',
        lastName: '逸之'
      })
      // 也可以传入对象，目前和上面等价
      person.fullName = computed({
        get() {
          return person.firstName + ' ' + person.lastName
        },
        set(value) {
          const newArr = value.split(' ')
          person.firstName = newArr[0]
          person.lastName = newArr[1]
        }
      })
      return {
        person
      }
    }
  }
</script>

Watch

监听 reactive 内部数据

注意 1：监听 reactive 内部数据时，强制开启了深度监听，且配置无效；监听对象的时候 newValue 和 oldValue 是全等的。

<template>
  <p>{{ obj.hobby.eat }}</p>
  <button @click="obj.hobby.eat = '面条'">click</button>
</template>

<script>
  import { watch, reactive } from 'vue'
  export default {
    name: 'App',
    setup() {
      const obj = reactive({
        name: 'ifer',
        hobby: {
          eat: '西瓜'
        }
      })
      watch(obj, (newValue, oldValue) => {
        // 注意1：监听对象的时候，新旧值是相等的
        // 注意2：强制开启深度监听，配置无效
        console.log(newValue === oldValue) // true
      })

      return { obj }
    }
  }
</script>

注意 2：reactive 的【内部对象】也是一个 reactive 类型的数据。

<template>
  <p>{{ obj.hobby.eat }}</p>
  <button @click="obj.hobby.eat = '面条'">click</button>
</template>

<script>
import { watch, reactive, isReactive } from 'vue'
export default {
  name: 'App',
  setup() {
    const obj = reactive({
      name: 'ifer',
      hobby: {
        eat: '西瓜',
      },
    })
    // reactive 的【内部对象】也是一个 reactive 类型的数据
    // console.log(isReactive(obj.hobby))
    watch(obj.hobby, (newValue, oldValue) => {
      console.log(newValue === oldValue) // true
    })

    return { obj }
  },
}
</script>

注意 3：对 reactive 自身的修改则不会触发监听。

<template>
  <p>{{ obj.hobby.eat }}</p>
  <button @click="obj.hobby = { eat: '面条' }">click</button>
</template>

<script>
import { watch, reactive } from 'vue'
export default {
  name: 'App',
  setup() {
    const obj = reactive({
      name: 'ifer',
      hobby: {
        eat: '西瓜',
      },
    })
    watch(obj.hobby, (newValue, oldValue) => {
      // obj.hobby = { eat: '面条' }
      console.log('对 reactive 自身的修改不会触发监听')
    })
    return { obj }
  },
}
</script>