Vue3的Composition组合式API(computed计算属性、watch监视属性、watchEffect函数)

1. computed计算属性

与Vue2中的computed配置功能一致。使用示例如下：

1. Student.vue

• 计算属性的简写只能进行读取；完整写法有get和set能进行读写
• 能读取姓和名，姓和名能构成全名
• 修改姓或名，全名也一起修改
• 修改全名，姓或名也一起修改

<template>
  <div>姓：<input type="text" v-model="person.firstName"></div>
  <div>名：<input type="text" v-model="person.lastName"></div>
  <div>全名：<input type="text" v-model="person.fullName"></div>
</template>

<script>
import {reactive,computed} from 'vue'

export default {
  name: 'Student',
  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 arr = value.split('-')
        person.firstName = arr[0]
        person.lastName = arr[1]
      }
    })

    return {
      person
    }
  }
}
</script>

2. App.vue

<template>
  <Student/>
</template>

<script>
  import Student from './components/Student'

  export default {
    name: 'App',
    components: {Student}
  }
</script>

3. 页面如下。给姓添加123，全名同步修改。给全名添加456，名同步修改
   

2. watch监视属性

与Vue2中watch配置功能一致

2.1 watch监视ref定义的数据

Student.vue

• 情况一：监视ref所定义的一个基础类型数据
  • immediate开启时初始化就会调用一下
  • 使用watch监视一个属性多次，监视回调函数就会调用多次
• 情况二：监视ref所定义的多个基础类型数据
• 情况三: 监视ref所定义的一个对象类型数据。对象内的属性发生改变不能监视到
  • 监视方式一: 使用person.value，这样监视的不是RefImpl，而是Proxy。这种也能深度监视
  • 监视方式二: 使用配置参数{deep:true}开启深度监视
  • 监视问题: 监视的oldValue和newValue一样

<template>
  <h2>当前sum为：{{sum}}</h2>
  <button @click="sum++">点我sum+1</button>
  <hr>
  <h2>当前的信息为：{{msg}}</h2>
  <button @click="msg+='！'">修改信息</button>
  <hr>
  <h2>姓名：{{person.name}}</h2>
  <h2>薪资：{{person.job.salary}}K</h2>
  <button @click="person.name+='~'">修改姓名</button>
  <button @click="person.job.salary++">涨薪</button>
</template>

<script>

import {ref,watch} from 'vue'

export default {
  name: 'Student',
  setup(){
    let sum = ref(0)
    let msg = ref('你好啊')
    let person = ref({
      name:'张三',
      job:{
        salary:20
      }
    })

    // 情况一：监视ref所定义的一个基础类型数据。immediate开启时初始化就会调用一下
    // 使用watch监视一个属性多次，监视回调函数就会调用多次
    watch(sum,(newValue,oldValue)=>{
      console.log('sum变了',newValue,oldValue)
    },{immediate:true})

    // 情况二：监视ref所定义的多个基础类型数据
    watch([sum,msg],(newValue,oldValue)=>{
      console.log('sum或msg变了',newValue,oldValue)
    })

    // 情况三: 监视ref所定义的一个对象类型数据。对象内的属性发生改变不能监视到
    // 监视方式一: 使用person.value，这样监视的不是RefImpl，而是Proxy。这种也能深度监视
    // 监视方式二: 使用配置参数{deep:true}开启深度监视
    // 监视问题: 监视的oldValue和newValue一样
    watch(person.value,(newValue,oldValue)=>{
      console.log('person变化了',newValue,oldValue)
    },{deep:true})


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

效果如下：

1. 初次访问页面，监视sum的immdiate为true生效
2. 点我sum+1，由于sum被监视了两次，所以监视回调函数调用两次
3. 点修改信息，能监视到
4. 点修改姓名，能监视到。但oldValue和newValue一样
5. 点涨薪，能深度监视到。但oldValue和newValue一样
   

2.2 watch监视reactive定义的数据

Student.vue

• 情况一：监视reactive所定义的一个响应式数据的全部属性
  • 注意1：获取的oldValue和newValue一样
  • 注意2：强制开启了深度监视，deep配置无效
• 情况二：监视reactive所定义的一个响应式数据中的某个属性
  • 注意1: 能正常获取到oldValue和newValue
• 情况三：监视reactive所定义的一个响应式数据中的多个属性。此时newValue和oldValue都是数组
• 情况四：监视reactive所定义的一个响应式数据中的某个深度对象类型属性
  • 注意1: 获取的oldValue和newValue一样
  • 注意2: 修改对象里面的内部属性，需要开启{deep:tree}才能监测到

<template>
  <h2>姓名：{{person.name}}</h2>
  <h2>姓名：{{person.age}}</h2>
  <h2>薪资：{{person.job.salary}}K</h2>
  <button @click="person.name+='~'">修改姓名</button>
  <button @click="person.age+=1">修改年龄</button>
  <button @click="person.job.salary++">涨薪</button>
</template>

<script>

import {reactive,watch} from 'vue'

export default {
  name: 'Student',
  setup(){
    let person = reactive({
      name:'张三',
      age:18,
      job:{
        salary:20
      }
    })

    // 情况一：监视reactive所定义的一个响应式数据的全部属性
    //    注意1：获取的oldValue和newValue一样
    //    注意2：强制开启了深度监视，deep配置无效
    /* watch(person,(newValue,oldValue)=>{
      console.log('person变化了',newValue,oldValue)
    }) */

    // 情况二：监视reactive所定义的一个响应式数据中的某个属性
    //    注意1: 能正常获取到oldValue和newValue
    watch(()=>person.name,(newValue,oldValue)=>{
      console.log('person的name变化了',newValue,oldValue)
    })

    // 情况三：监视reactive所定义的一个响应式数据中的多个属性。此时newValue和oldValue都是数组
    watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
      console.log('person的name或age变化了',newValue,oldValue)
    })

    // 情况四：监视reactive所定义的一个响应式数据中的某个深度对象类型属性
    //    注意1: 获取的oldValue和newValue一样
    //    注意2: 修改对象里面的内部属性，需要开启{deep:tree}才能监测到
    watch(()=>person.job,(newValue,oldValue)=>{
      console.log('person的job变化了',newValue,oldValue)
    },{deep:true})

    return {
      person
    }
  }
}
</script>

效果如下：

1. 点修改姓名，能监视到。且监视两次所以监视回调函数执行两次。能正常获取到oldValue和newValue
2. 点涨薪，能深度监视到。但oldValue和newValue一样
   

3. watchEffect函数

• 不用指明监视哪个属性，监视的回调中用到哪个属性，这个属性改变就会自动执行监视回调函数
• watchEffect更注重的是回调函数的执行过程，所以不用写返回值

使用示例：

<template>
  <h2>薪资：{{person.job.salary}}K</h2>
  <button @click="person.job.salary++">涨薪</button>
</template>

<script>

import {reactive,watchEffect} from 'vue'

export default {
  name: 'Student',
  setup(){
    let person = reactive({
      job:{
        salary:20
      }
    })

    watchEffect(()=>{
      person.job.salary
      console.log('watchEffect所指定的回调执行了')
    })

    return {
      person
    }
  }
}
</script>

效果如下。点击涨薪，person.job.salary发生变化，就会自动调用watchEffect的回调函数