前端开发第七讲（计算属性+侦听器）

1.计算属性

计算属性通过computed()函数定义，该函数的参数为一个回调函数

<template>
	<p>初始message:{{message}}</p>
	<p>反转之后的message：{{reversedMessage}}</p>
	<button @click="updateMessage">更改</button>
</template>

<script setup>
	import { ref,computed } from 'vue'
	const message = ref('Hello World')
	const reversedMessage=computed(()=>
	message.value.split('').reverse().join('')
	)
	const updateMessage=()=>{
		message.value='hello'
	}
</script>

<style>
</style>

2.侦听器

侦听器可以通过watch()函数定义，watch()函数的语法格式

watch(侦听器的来源，回调函数，可选参数)

watch()函数有3个参数

1.第一个参数是侦听器的来源有4种：

<>一个函数，返回一个值

<>一个响应式数据

<>一个响应式对象

<>一个由以上类型的值组成的数组

2.第二个参数是数据发生变化时的要调用的回调函数，这个回调函数的第一个参数表示新值，即数据发生变化后的值，第二个参数表示旧值，即数据发生变化前的值。

3.第三个参数时可选参数，它是一个对象，

（1）deep:默认情况下，当监听到一个对象时，如果对象种的属性值发生了变化，则无法被监听到，如果想监听到，可以将该选项设为true,默认为false

（2）immediate：默认情况下，组件在初次架子啊完毕后不会调用侦听器的回调函数，