前端的成长-学习Vue3-计算属性与监视【第四弹】

一. 计算属性(computed)

1. 计算属性的基本语法

1.<script lang="ts">
import { defineComponent, computed } from 'vue'
export default defineComponent({
	name:'App',
	setup(){
		const user = reactive({
	      firstName: 'A',
	      lastName: 'B'
	    })
	    const fullName1 = computed(() => {
	      return user.firstName + '-' + user.lastName
	    })
	    return {
	    	user,
	    	fullName1
	    }
	}
})
</script>

2.<script lang="ts">
import { defineComponent, computed } from 'vue'
export default defineComponent({
	name:'App',
	setup(){
		const user = reactive({
	      firstName: 'A',
	      lastName: 'B'
	    })
	    const fullName2 = computed({
	    	get(){
	    		return user.firstName + '-' + user.lastName
	    	},
	    	set(value:string){
	    		const names = value.split('-')
	    		user.firstName = names[0]
	    		user.lastName = names[1]
	    	}
	    })
	    return {
	    	user,
	    	fullName2
	    }
	}
})
</script>

2. 计算属性的解析

• 如果1. 中，computed属性的函数中只传入一个回调函数，表示的是getter 函数，返回的是一个Ref类型的对象
• 如果2. 中，computed属性的函数中传入一个对象，表示的是getter和setter 函数。

一. 监视属性(watch)

1. 监视属性的基本语法

1.<script lang="ts">
import { defineComponent, ref,watch } from 'vue'
export default defineComponent({
	name:'App',
	setup(){
		const user = reactive({
	      firstName: 'A',
	      lastName: 'B'
	    })
	    const fullName3 = ref('')
	    watch(user,({firstName,lastName})=> {
	    	fullName3.value = firstName + '-' + lastName
	    },{immediate:true,deep:true}),
	    return {
	    	user,
	    	fullName3
	    }
	}
})
</script>

2.<script lang="ts">
import { defineComponent, ref,watchEffect } from 'vue'
export default defineComponent({
	name:'App',
	setup(){
		const user = reactive({
	      firstName: 'A',
	      lastName: 'B'
	    })
	    const fullName3 = ref('')
	    watchEffect(() => {
	      console.log('watchEffect')
	      fullName3.value = user.firstName + '-' + user.lastName
	    }) 
	    return {
	    	user,
	    	fullName3
	    }
	}
})
</script>

3.<script lang="ts">
import { defineComponent, ref,watch } from 'vue'
export default defineComponent({
	name:'App',
	setup(){
		const user = reactive({
	      firstName: 'A',
	      lastName: 'B'
	    })
	    const fullName3 = ref('')
	    watch([() => user.firstName, () => user.lastName, fullName3], (values) =>	{
     		console.log('监视多个数据', values)
    	}),
	    return {
	    	user,
	    	fullName3
	    }
	}
})
</script>

2. 监视属性的解析

• 如果1. 中，watch的函数中，第一个参数（user）为监视的对象；第二个接收的是一个回调函数，解构监视对象中的数据；第三个参数接收的是一个对象，里边包含：immediate的作用是默认执行一次。deep的作用是深度监视。
• 如果2. 中，watchEffect的函数中，也是监视属性并监视所有回调中使用的数据。注意不需要配置immediate，默认会执行一次。
• 如果3. 中，watch函数可以监视多个数据。使用数组来指定监视的数据。
  注意：
  如果是ref对象, 直接指定；如果是reactive对象中的属性, 必须通过函数 来指定。
如果是响应式数据, 直接指定；如果是非响应式的数据, 必须通过函数来指定。

The end…

如果您认真阅读至此，您现在已经掌握了基本的知识啦 ，为接下来我们学习Vue3更加有信心！！。
如果喜欢这个帖子，请不要忘记点赞，留言，评论。我们一起在前端小白中进步