Vue3中的计算属性与监视

计算属性与监视

computed函数:

• 与computed配置功能一致
• 只有getter
• 有getter和setter

watch函数

• 与watch配置功能一致
• 监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调
• 默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次
• 通过配置deep为true, 来指定深度监视

watchEffect函数

• 不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据
• 默认初始时就会执行第一次, 从而可以收集需要监视的数据
• 监视数据发生变化时回调

<template>
  <h2>计算属性和监视</h2>
  <fieldset>
    <legend>姓名操作</legend>
    姓氏:<input type="text" placeholder="请输入姓氏" v-model="user.firstName"/><br />
    名字:<input type="text" placeholder="请输入名字" v-model="user.lastName"/><br />
  </fieldset>
  <fieldset>
  <legend>计算属性和监视的演示</legend>
    姓名:<input type="text" placeholder="显示姓名" v-model="fullName1" /><br />
    姓名:<input type="text" placeholder="显示姓名" v-model="fullName2"/><br />
    姓名:<input type="text" placeholder="显示姓名" v-model="fullName3"/><br />
</fieldset>
</template>
<script lang="ts">

/*
计算属性与监视
1. computed函数: 
  与computed配置功能一致
  只有getter
  有getter和setter
2. watch函数
  与watch配置功能一致
  监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调
  默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次
  通过配置deep为true, 来指定深度监视
3. watchEffect函数
  不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据
  默认初始时就会执行第一次, 从而可以收集需要监视的数据
  监视数据发生变化时回调
*/
import {defineComponent, reactive,computed,watch,ref,watchEffect} from 'vue'
export default defineComponent({
  name:'App',
  setup(){
    // 定义一个响应式对象
    const user = reactive({
      // 姓氏
      firstName: '东方',
      // 名字
      lastName: '不败'
    })
    // 通过计算属性的方式 实现第一个姓名的显示


    // 第一个姓名    只有getter的计算属性
   const fullName1 = computed(()=>{
     return user.firstName + '_' + user.lastName
   })
  //  console.log(fullName1)
    // 第二个姓名   有getter与setter的计算属性
    const fullName2 = computed({
      get(){
        return user.firstName + '_' + user.lastName
      },
      set(val){
        // console.log('========',val)
        const names = val.split('_')
        user.firstName = names[0]
        user.lastName = names[1]
      }
    }) 
    // 第三个姓名
    const fullName3 = ref('')
     /* 
    watchEffect: 监视所有回调中使用的数据
    */
      /* 
    使用watch的2个特性:
      深度监视
      初始化立即执行
    */
    // 监视指定的数据
    watch(user,({firstName,lastName}) => {
      fullName3.value = firstName + '_' + lastName
    },{immediate:true,deep:true})
    // immediate默认会执行一次watch deep 深度监视

    // 监视  不需要配置immediate 本身默认就会进行监视(执行一次)
    // watchEffect(() => {
      // fullName3.value = user.firstName + '_' + user.lastName
    // })

    // 监视fullName的数据 改变firstName和lastName
    watchEffect (() => {
      const names = fullName3.value.split('_')
      user.firstName = names [0]
      user.lastName = names [1]
    })

    // watch  可以监视多个数据的
    // watch([user.firstName,user.lastName,fullName3],() => {
      // 这里没有执行
      // console.log('=====')
    // })
      /*watch多个数据: 
      使用数组来指定
      如果是ref对象, 直接指定
      如果是reactive对象中的属性,  必须通过函数来指定
    */
      watch([() => user.firstName,() => user.lastName,fullName3],() => {
        // 这里没有执行
        console.log('=====')
      })



    return {
      user,
      fullName1,
      fullName2,
      fullName3
    }
  }
})
</script>