vue3的计算属性和监听及watch和watchEffect区别

谁借莪１个温暖的怀抱￠ 2022-09-05 12:57 195阅读 0赞

三者区别：

*  computed函数:
    
     *  与computed配置功能一致
     *  内部只有一个方法的时候是getter
     *  有getter和setter
 *  watch函数
    
     *  与watch配置功能一致
     *  监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调
     *  默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次
     *  通过配置deep为true, 来指定深度监视
 *  watchEffect函数
    
     *  不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据
     *  默认初始时就会执行第一次, 从而可以收集需要监视的数据
     *  监视数据发生变化时回调

App.vue文件：

<template>
      <h2>计算属性和监视</h2>
      <fieldset>
        <legend>姓名操作</legend>
        姓氏:<input type="text" placeholder="请输入姓氏" v-model="user.firstname"/><br/>
        名字:<input type="text" placeholder="请输入名字" v-model="user.lastname"/>
      </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">
    import { defineComponent, reactive, computed,watch, ref, watchEffect } from 'vue'
    export default defineComponent({
      name: 'App',
      setup(){
        const user = reactive({
          firstname: '东方',
          lastname: '不败'
        })
        // 通过计算属性的方式，实现第一个姓名的显示
        // vue3的计算属性
        // 计算属性的函数中如果只传入一个回调函数，表示的是get
    
        // 第一个姓名：
        // 返回的是一个Ref类型的对象
        const fullName1 = computed(() => {
          return user.firstname +'_'+user.lastname
        })
        console.log('fullName1',fullName1);
        // 第二个姓名
        const fullName2 = computed({
          get(){
            return user.firstname +'_'+user.lastname
          },
          set(val:string){
            // console.log('====',val);
            const names = val.split('_');
            user.firstname = names[0];
            user.lastname = names[1];
          }
        })
    
        const fullName3 = ref('')
        // watch在初始的情况下是不会执行的，需要添加immediate:true 去执行一次
        // 监视指定的数据
        watch(user,({firstname,lastname}) => {
          fullName3.value = firstname + '_'+lastname
        },
        {immediate:true,deep:true}
        )
        // immediate默认会执行一次watch，deep深度监视
    
        // 监视，不需要配置immediate，本身默认就会进行监视（默认执行一次）
        // watchEffect(()=>{
        //   fullName3.value = user.firstname + '_' + user.lastname
        // })
    
        // 监视fullName3的数据，改变firstname和lastname
        watchEffect(()=>{
          const names = fullName3.value.split('_');
          user.firstname = names[0]
          user.lastname = names[1]
        })
    
        // watch---可以监视多个数据
        // watch([user.firstname,user.lastname, fullName3],() => {
        //   // 这里的代码就没有执行，fullName3是响应式数据，但是user.firstname和user.lastname不是响应式数据
        //   console.log('==========');
        // })
    
        // 当我们使用watch监视非响应式数据的时候，代码需要改一下
        watch([()=>user.firstname,()=>user.lastname,fullName3],() => {
          // 这里的代码就没有执行，fullName3是响应式数据，但是user.firstname和user.lastname不是响应式数据
          console.log('==========');
        })
        
        return {
          user, 
          fullName1,
          fullName2,
          fullName3
        }
      }
    })
    </script>