vue3.0页面模板-watch-事件监听——vue2.0-深度监听 & vue3.0中-只能有一个watch

vue3.0页面模板-watch-事件监听——vue2.0-深度监听 & vue3.0中-只能有一个watch

watch的作用可以监控一个值的变换，并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。

vue2.0之深度监听

 data:{
     a:1,
     b:{
         c:1
     }
 },
 watch:{
     a(val, oldVal){//普通的watch监听
         console.log("a: "+val, oldVal);
     },
     b:{//深度监听，可监听到对象、数组的变化
         handler(val, oldVal){
             console.log("b.c: "+val.c, oldVal.c);
         },
         deep:true //true 深度监听
     }
 }

1. 监听普通类型

 let count = ref(1);
 const changeCount = () => {
	 count.value+=1
 };

watch(count, (newValue, oldValue) => { //直接监听
	console.log("count改变了");
});

2. 监听响应式对象

 let book = reactive({
     name: "js书籍",
     price: 50,
 });
 const changeBookName = () => {
 	book.name = "c#"; 
 };
 watch(()=>book.name,()=>{//通过一个函数返回要监听的属性
 	console.log('书名改变了')
 })

3. 监听多个参数执行不同的方法

不过以上只是一些简单的例子，对于vue2中，watch可以监听多个源，并且执行不同的函数

watch:{
    count(){
		console.log("count改变了");
	});
	"book.name"(){
        console.log("书名改变了");
    }
);

在vue3中同理也能实现相同的情景，通过多个watch来实现，但在vue2中，只能存在一个watch

watch(count, () => {
	console.log("count改变了");
});
watch(
    () => book.name,
    () => {
        console.log("书名改变了");
    }
);

4. 监听多个参数执行相同的方法

在vue2中可能存在需要执行同一事件的情况，解决方法通常是利用computed把他们存入一个对象中，监听这个对象的变化

computed:{
    messageInfo(){
        return this.message.toLowerCase();
    },
    myBook(){
        const {count,book} = this;
        return{
            count,
            name:book.name,
        }
    }
},
watch:{
    // count(){
	// 	console.log("count改变了");
	// });
	// "book.name"(){
    //     console.log("书名改变了");
    // }
    myBook(newVal,oldVal){
        console.log(newVal)
        console.log(oldVal)
        console.log("watch的使用")
    }
);

对于vue3，可以免去computed的操作

watch([() => book.name, count], ([name, count], [preName, preCount]) => {
	console.log("count或book.name改变了");
});

实例-vue3.0

1、demo-watch、onMounted、computed

结构

<!--maxlength  changePrice -->
<el-input :maxlength="maxlength" placeholder="请输入时长" class="width-140" @keydown="handleInput" @input="changePrice('billMoney')">日期</el-input>

<!-- onClosedDialog -->
<el-dialog v-model="dialogVisible" :before-close="onClosedDialog" title="考核指标" width="740px" >

<!-- quotaNameLoadMore -->
<el-select  v-model="scope.row.biIndicatorsId" placeholder="请选择指标" v-el-select-load-more:renderCount="quotaNameLoadMore(renderCount)" @change="quotaChange(scope.row)" ></el-select>    

<script lang="ts">
import { computed, defineComponent, getCurrentInstance, onMounted, reactive, toRefs, watch } from 'vue';
import { useRoute } from 'vue-router';

export default defineComponent({
    emits: ['onClosedDialog'],
    setup(props, context) {
        const maxlength = computed(() => {
			return state.acFormData.durationUnit == 1 ? 3 : 2;
		});
        const state = reactive({
            name:'',
            list:[]
        });
		onMounted(async() => {
			await methodsA()
			methodsB();
		});
		 const WatchPaneName = watch(()=> state.form.phoneNum, (v,o)=> {
            console.log(2222,v,o);
        })
		const funMethod = {
			// 按时间切换
			timeChange(v) {
				if(state.acFormData.duration && v === 2){
					state.acFormData.duration = "周五"
				}
			},
        }
        const changePrice = (name) => {  
            state.acFormData[name] = state.acFormData[name].replace(/[^\d.]/g,"") //清除非 数字和小数点的字符 
        }
		const onClosedDialog = () => {
			context.emit('onClosedDialog')
		}
		// 指标list-滚动底部-追加项
		const quotaNameLoadMore = n => {
			return () => state.renderCount += n;
		}        
		return {
			...toRefs(state),
			...funMethod,
			onClosedDialog,
			maxlength,
			quotaNameLoadMore,
			changePrice
		};
	},
});
</script>        

2、页面模板-watch

index.vue

<template>
    <div class="home">
        <div style="height: 100px;width: 400px;background-color: #42b983">
          <div>{{userName}}</div>
          <a-button @click="updateFormData">按钮</a-button>
        </div>
    </div>
</template>
<script>
  import {reactive,toRefs,watch} from "vue"
    export default {
        name: "Home",
        setup() {
          const formData = reactive({
            userName:'admin',
            password:'123456'
          })
          const data = toRefs(formData);

          const updateFormData = ()=>{
            formData.userName = "superAadmin";
          }

          watch(formData,(newVal,oldVal)=>{
            console.log(newVal+":==="+oldVal)
          })
          return {
            ...data,
            updateFormData
          }
        }
    };
</script>