Vue3 第三节 计算属性，监视属性，生命周期

1.computed计算属性

2.watch监视函数

3.watchEffect函数

4.Vue的生命周期函数

一.computed计算属性

• 计算属性简写和完整写法

<template>
  <h1>一个人的信息</h1>
  姓：<input type="text" v-model="person.firstName" /><br />
  名：<input type="text" v-model="person.lastName" />
  <span>全名：{{ person.fullName }}</span>
  <br />
  全名：<input type="text" v-model="person.fullName" />
</template>

<script>
import { reactive, computed } from 'vue'
export default {
  name: 'Demo',
  // 数据
  setup () {
    let person = reactive({
      firstName: '陈',
      lastName: '玉'
    })
    // 简写
    person.fullName = computed(() => {
      return person.firstName + '-' + person.lastName
    })

    //计算属性 -- 完整写法
    person.fullName = computed({
      get () {
        return person.firstName + '-' + person.lastName
      },
      set (value) {
        const name = value.split('-')
        person.firstName = name[0]
        person.lastName = name[1]
      }
    })

    return {
      person
    }
  }
}
</script>

<style>
</style>

二.watch监视函数 

2.1 监视情况分类

 情况① 监视ref定义的响应式数据: 第一个参数是监视的数据，第二个参数是一个回调函数

immediate:一上来就执行，放到第三个参数中

watch(sum, (newValue, oldValue) => {
      console.log('sum的值变了', newValue, oldValue)
    }, { immediate: true })

情况② 监视多个ref定义的响应式数据

watch([sum, msg], (newValue, oldValue) => {
      console.log('sum或者msg的值变了', newValue, oldValue)
    }, { immediate: true })

情况③ 监视reactive所定义的全部属性

注意：

• 此处无法正确的获取oldValue 

• 强制开启了深度监视，deep属性设置为false无效

    watch(person, (newValue, oldValue) => {
      console.log('person的值变化了')
    }, { deep: false })

情况④ 监视reactive所定义的响应式数据中的某一个属性

    watch(() => person.age, (newValue, oldValue) => {
      console.log('person的值变化了', newValue, oldValue)
    })

情况⑤ 监视reactive所定义的响应式数据中的某些属性

    watch([() => person.name, () => person.age], (newValue, oldValue) => {
      console.log('person的值变化了', newValue, oldValue)
    })

情况⑥ 监视的是 reactive 定义对象中的某个属性，deep是有效的

    watch(() => person.job, (newValue, oldValue) => {
      console.log('person的值变化了', newValue, oldValue)
    }, { deep: true })

watch监视整个代码

<template>
  <h2>当前求和为:{{ sum }}</h2>
  <button @click="sum++">点我+1</button>
  <hr />
  <h2>当前的信息为:{{ msg }}</h2>
  <button @click="msg += '!'">修改信息</button>
  <hr />
  <h2>姓名：{{ person.name }}</h2>
  <h2>年龄：{{ person.age }}</h2>
  <h2>薪资：{{ person.job.j1.salary }}</h2>
  <button @click="person.name += '~'">修改姓名</button>
  <button @click="person.age++">增长年龄</button>
  <button @click="person.job.j1.salary++">涨薪</button>
</template>
<script>
import { reactive, ref, watch } from 'vue'
export default {
  name: 'Demo',
  // 数据
  setup () {
    let sum = ref(0)
    let msg = ref('你好')
    let person = reactive({
      name: '张三',
      age: 18,
      job: {
        j1: {
          salary: 20
        }
      }
    })
    // 情况1 监视ref定义的响应式数据
    // watch(sum, (newValue, oldValue) => {
    //   console.log('sum的值变了', newValue, oldValue)
    // }, { immediate: true })

    // 情况2 监视ref定义的响应式数据
    // watch([sum, msg], (newValue, oldValue) => {
    //   console.log('sum或者msg的值变了', newValue, oldValue)
    // }, { immediate: true })

    // 情况3  监视reactive所定义的全部属性
    // 1.注意：此处无法正确的获取oldValue
    // 2.注意：强制开启了深度监视（deep属性设置为false无效）
    watch(person, (newValue, oldValue) => {
      console.log('person的值变化了')
    }, { deep: false })


    // 情况四：监视reactive所定义的响应式数据中的某一个属性
    // watch(() => person.age, (newValue, oldValue) => {
    //   console.log('person的值变化了', newValue, oldValue)
    // })


    // 情况5：监视reactive所定义的响应式数据中的某些属性
    // watch([() => person.name, () => person.age], (newValue, oldValue) => {
    //   console.log('person的值变化了', newValue, oldValue)
    // })

    // 情况6（特殊）：监视的是 reactive 定义对象中的某个属性，deep是有效的 
    // watch(() => person.job, (newValue, oldValue) => {
    //   console.log('person的值变化了', newValue, oldValue)
    // }, { deep: true })


    return {
      sum,
      msg,
      person
    }
  }
}
</script>

<style>
</style>

2.2 监视ref参数数据时需要注意的问题

① 监视ref基本数据类型的时候不需要加value

 let sum = ref(0)
    let msg = ref('你好')
    let person = ref({
      name: '张三',
      age: 18,
      job: {
        j1: {
          salary: 20
        }
      }
    })
    watch(sum, (newValue, oldValue) => {
      console.log('sum被修改了', newValue, oldValue)
    })

② 监视ref修饰的对象类型的时候，需要加value(相当于监视的是ref生成的reactive对象)

    watch(person.value, (newValue, oldValue) => {
      console.log('person被修改了', newValue, oldValue)
    })

如果不写.value,就加深度监视

watch(person, (newValue, oldValue) => {
      console.log('person被修改了', newValue, oldValue)
    }, { deep: true })

三.watchEffect函数

• watch函数既要指明监视的属性，也要指明监视的回调
• watchEffect函数不需要指明哪个属性，监视的回调中用到哪个属性，就监视哪个属性
• watchEffect函数所指定的回调中的数据只要发生变化，则直接重新执行回调
• watchEffect 有点像computed，但是computed注重计算出来的值，所以必须要写返回值
• watchEffect更注重的是过程，所以不用写返回值

 watchEffect(() => {
      const x1 = sum.value
      const x2 = person.job.j1.salary
      console.log('watchEffect所指定的回调执行了')
    })

四.Vue3 的生命周期函数

① Vue3.0中可以继续使用Vue2.X中的生命周期钩子，但是有两个被更名

• beforeDestroy改名为beforeUnmount
• destroyed改为unmounted

② Vue3.0可以通过配置项的形式使用生命周期钩子

  beforeCreate () {
    console.log('---beforeCreate---')
  },
  created () {
    console.log('---created---')
  },
  beforeMount () {
    console.log('---beforeMount---')
  },
  mounted () {
    console.log('----mounted---')
  },
  beforeUpdate () {
    console.log('---beforeUpdate---')
  },
  updated () {
    console.log('---updated---')
  },
  beforeUnmount () {
    console.log('---beforeUnmount---')
  },
  unmounted () {
    console.log('---unmounted---')
  }

③ Vue3.0提供了组合式API形式的生命周期钩子，与Vue2.x中钩子的对应关系如下

• beforecreate    =>     setup()
• created =>  setup()

• beforeMount =>  onBeforeMount

• mounted => onMounted

• beforeUpdate => onBeforeUpdate

• updated => onUpdated

• beforeUnmount => onBeforeUnmount

• unmounted => onUnmounted

import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
export default {
  name: 'Demo',
  // 数据
  setup () {
    let sum = ref(0)
    onBeforeMount(() => {
      console.log('---onBeforeMount---')
    })
    onMounted(() => {
      console.log('---onMounted---')
    })
    onBeforeUpdate(() => {
      console.log('---onBeforeUpdate---')
    })
    onUpdated(() => {
      console.log('---onUpdated---')
    })
    onBeforeUnmount(() => {
      console.log('---onBeforeUnmount---')
    })

    onUnmounted(() => {
      console.log('---onUnmounted---')
    })

    return {
      sum
    }
    // 
  }