【Vue3】第四部分 计算属性和监视

【Vue3】第四部分 计算属性和监视

---

---

4. 计算属性和监视

4.1 计算属性（computed）

具体代码

<template>
  <div>
      姓：<input type="text" v-model="person.firstname"><br>
      名：<input type="text" v-model="person.lastname"><br>
      全名：<input type="text" v-model="person.fullname">
  </div>
</template>

<script>
import { reactive,computed } from 'vue'
export default {
  name:'TestDemo',
  setup(){

    const person = reactive({
      firstname:'张',
      lastname:'三'
    })

    //计算属性(简写)
    // let fullname = computed(()=>{
    //   return person.firstname + '-' + person.lastname
    // })

    //计算属性（完整写法）
    person.fullname = computed({
      get(){
        return person.firstname + '-' + person.lastname
      },
      set(value){
          const nameArr = value.split('-')
          person.firstname = nameArr[0]
          person.lastname = nameArr[1]
      }
    })


    return{
      person
    }
  }
}
</script>

<style>

</style>

4.2 watch监视（六种情况）

具体代码

<template>
  <div>
    <h1>计数:{{sum}}</h1>
    <button @click="sum++">点击我+1</button>
    <hr>
    <h1>{{message}}</h1>
    <button @click="message+='!'">点击我加！</button>
    <hr>
    <h1>姓名：{{person.name}}</h1>
    <h1>年龄：{{person.age}}</h1>
    <h1>薪资：{{person.job.salary}}K</h1>
    <button @click="person.job.salary++">点击我加薪</button>
    <button @click="person.name+='~'">点击我加~</button>
    <button @click="person.age+=1">点击我加年龄</button>
  </div>
</template>

<script>
import {reactive, ref, watch} from "vue"
export default {
  name:'TestDemo',
  setup(){
    let sum = ref(0)
    let message = ref('你好啊')
    let person = reactive({
      name:'张三',
      age:18,
      job:{
        salary:16
      }
    })

    /* 
        watch
          - 第一个参数：监视对象
          - 第二个参数：回调函数
          - 第三个参数：配置项
    */

    /* 情况一：监视ref所定义的响应式数据（一个） */
    watch(sum,(newval,oldval)=>{
      console.log("sum的值发生变化！",newval,oldval);
    },{immediate:true})


    /* 情况二：监视ref所定义的多个响应式数据（多个） */
    watch([sum,message],(newval,oldval)=>{
      console.log("监视多个响应式数据发生变化",newval,oldval);
    },{immediate:true})

    /* 
      情况三：监视reactive定义的响应式数据（对象）
          出现的小问题：
            - 强制开启深度监视（deep配置失效）
            - 此处没有办法正确获取到oldval
    */
    watch(person,(newval,oldval)=>{
      console.log("person的值发生了变化！",newval,oldval);
    },{immediate:true,deep:true})  //deep配置无效

    /* 
        情况四：监视reactive定义的响应式数据（某一个属性）
        监视reactive中的某个属性需要写成函数
        可以正确获取到oldval
     */
    watch(()=>person.age,(newval,oldval)=>{
      console.log("person下的age发生变化",newval,oldval);
    },{immediate:true})

    /* 
        情况五：监视reactive定义的响应式数据（多个属性）
        可以正确获取到oldval
    */
    watch([()=>person.age,()=>person.name],(newval,oldval)=>{
      console.log("监视reactive下多个属性",newval,oldval);
    },{immediate:true})

    /* 
      情况六: 监视reactive定义的响应式数据中的某个属性，这个属性的值依然还是对象
        - 需要开启深度监视，这里深度监视是起作用的
        - 但是依旧是不能正确获取到oldval
    */
    watch(()=>person.job,(newval,oldval)=>{
      console.log("监视reactive中属性，该属性依然是一个对象",newval,oldval);
    },{immediate:true,deep:true})

    /* 
        总结来说：
          - 只要是监视对象类型的都拿不到oldval的值
            并且会强制开启深度监视
          - 如果想要获取oldval就将它单独拿出来用
    */

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

<style>

</style>

4.3 watchEffect函数

watch：既要指明监视的属性，也要指明监视的回调

watchEffect：不需要监视哪个属性，监视的回调中使用了哪个属性就监视哪个属性，watchEffect关注的是回调函数的函数体，所以不需要写返回值

import {reactive, ref, watch, watchEffect} from "vue"
export default {
  name:'TestDemo',
  setup(){
    let sum = ref(0)
    let message = ref('你好啊')
    let person = reactive({
      name:'张三',
      age:18,
      job:{
        salary:16
      }
    })

    watch(sum,(newval,oldval)=>{
      console.log("sum的值发生变化",newval,oldval);
    })


    watchEffect(()=>{
      const x = person.job.salary
      const y = person.name
      console.log("监视数据",x,y);
    })


    return {
     sum,
     message,
     person
    }
  }
}

---

总结

以上就是今天要讲的内容，本文介绍了 计算属性和监视的使用方法和注意点，希望对大家有所帮助！！！