watchでのdeep:trueの使い方について

最近、 deep: true を使用する場合、オブジェクト内の特定のフィールドをリッスンする場合、つまり特定のフィールドに固有の場合には deep: true を使用する必要がないことがわかりました。deep: true は主にオブジェクトの詳細な監視に使用されます。以下に私の例を示します。
「searchData.time」をリッスンするときは、詳細な監視を使用する必要はありませんが、「searchData」に変更する場合は、値がある限り、 deep: true を追加してこのオブジェクトを監視します。このオブジェクトが変更されると、ウォッチ内のコードが実行されます。

子コンポーネント内:

<template>
	<div>
		...
	</div>
</template>
<script>
import {
    
     dateFormat } from '@/utils/formatDate'
import {
    
     calDateRange } from '@/utils/util'
export default {
    
    
	name: 'Search',
	data() {
    
    
		return {
    
    
			// 查询条件
			searchData: {
    
    
				time: 'week',
				sex: '女',
				age: 18
			},
		}
	},
	watch: {
    
    
		// 获取开始时间和结束时间
		'searchData.time': {
    
    
			handler(selectDay) {
    
    
				console.log(selectDay)
				this.search()
			},
			// deep: true,  如果改成监听searchData，然后把这行放开，就可以监听到searchData中任一值
		},
	},
	methods: {
    
    
		search() {
    
    
			const params = {
    
    
				sex: this.searchData.sex,
				age:  this.searchData.age
			}
			this.$emit('search', params)
		},
	},
}
</script>
<style lang="less" scoped>
</style>

親コンポーネント内:

<template>
	<div class="content">
		<div class="homeBody">
			<Search @search="queryListParams"></Search>
		</div>
	</div>
</template>
<script >
import Search from './components/Search.vue'

export default {
    
    
	name: 'ReportList',
	components: {
    
    
		Search,
	},
	data() {
    
    
		return {
    
    
			queryParams: {
    
    },
		}
	},
	methods: {
    
    
		queryListParams(params) {
    
    
			this.queryParams = {
    
     ...params }
		},
	},
}
</script>
<style lang="less" scoped>
</style>

しかし、私が遭遇した問題は次のとおりです。データ内の searchData: { time: 'week'、sex: '女性'、age: 1 }、searchData はテンプレートタグ内の別の searchData.school にも双方向バインドされており、 searchData.time を作成しましたが、誤って deep: true を書き込んだため、学校と時間が変更され、監視に影響します

何を理解しているのか分かりませんよね？修正大歓迎です~

watchでのdeep:trueの使い方について

おすすめ