vue3 watch と watchEffect の使い方と違い

時計モニターのリファレンスタイプ

setup() {
    
     
	let val = ref(1);
	watch(val,(newValue, oldValue)=>{
    
    
		console.log(`原值为${
      
      oldValue}`)
		console.log(`新值为${
      
      newValue}`)
		/* 1秒后打印结果：
			原值为1
			新值为2
		*/
	})
	// 1秒后将val值+1
	setTimeout(() => {
    
    
		val.value ++
	}, 1000)
}

時計モニター リアクティブタイプ

setup() {
    
     
	const obj = reactive({
    
    count: 1})
	watch(() => obj.count, (newValue, oldValue) => {
    
    
		console.log(`原值为${
      
      oldValue}`)
		console.log(`新值为${
      
      newValue}`)
		/* 1秒后打印结果：
			原值为1
			新值为2
		*/
	})

	// 1秒后将obj.count的值+1
	setTimeout(() => {
    
    
		obj.count ++
	}, 1000)
}

ウォッチエフェクト

setup() {
    
     
	const obj = reactive({
    
     name: 'jf', count: 1 })
	watchEffect(() => {
    
    
		console.log(obj.name)
		console.log(obj.count)
		/*  初始化时打印：
			0
			zs
			1秒后打印：
			1
			ls
		*/
	})
	
	setTimeout(() => {
    
    
		obj.name = '117'
		obj.count ++
	}, 1000)
}

watchEffect と watch の主な違いは次のとおりです。

• watchEffect は手動の依存関係を必要としません
• watchEffect は、依存関係を自動的に取得するために初期化されるたびにコールバック関数を実行します。
• watchEffect は元の値を取得できず、変更された値のみを取得します。