【vue-6】监听

news2024/11/17 3:45:16

一、监听watch

完整示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="vue.global.js"></script> --> 
</head>
<body>
    <div id="app">
        星期<select v-model="select">
            <option value="">请选择</option>
            <option value="星期一">星期一</option>
            <option value="星期二">星期二</option>
            <option value="星期三">星期三</option>
        </select><br>
        年<select v-model="web.year">
            <option value="">请选择</option>
            <option value="2023">2023</option>
            <option value="2024">2024</option>
            <option value="2025">2025</option>
        </select>
        月<select v-model="web.month">
            <option value="">请选择</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
        </select>

    </div>
    <script type="module">
        import {createApp, ref, reactive, watch} from './vue.esm-browser.js'
        // const {createApp, reactive} = Vue
        createApp({
            // setup选项，用于设置响应式数据和方法等
            setup(){ 
                const select = ref("")
                const web = reactive({
                    year:"2023",
                    month:"10"
                })
                watch(select,(newValue,oldValue)=>{
                    
                    console.log("newValue",newValue,"oldValue",oldValue)
                    if(newValue == "星期二"){
                        console.log("今天是星期二")
                    }
                })
                // 监听web
                watch(web,(newValue,oldValue)=>{ 
                    console.log("newValue",newValue,"oldValue",oldValue)
                })
                // 监听web中某个属性
                watch(()=>web.year,(newValue,oldValue)=>{ 
                    console.log("newValue",newValue,"oldValue",oldValue)
                    if(web.year == "2023"){
                        console.log("选择了2023年")
                    }
                })     
                return{
                    web,
                    select    
                }
            }
        }).mount("#app")
        // mount为挂载
    </script>
</body>
</html>

JS中对象和数组是通过引用传递的，而不是通过值传递，当修改对象或数组的值时，实际上修改的是对象或数组的引用，而不是创建一个新的对象或数组，所以，若修改了对象或数组的值，则打印出来的结果是修改后的值。

二、自动监听watchEffect

伪代码：

</script><script type="module">
    import {createApp, ref, reactive, watchEffect} from './vue.esm-browser.js'
    // const {createApp, reactive} = Vue
    createApp({
        // setup选项，用于设置响应式数据和方法等
        setup(){ 
            const select = ref("")
            const web = reactive({
                year:"2023",
                month:"10"
            })
            
            watchEffect(()=>{
                console.log("---------自动监听----")
                if(select.value == "星期三"){
                    console.log("选择了星期三")
                }
                if(web.year == "2025"){
                    console.log("选择了2025年")
                }
                if(web.month == "12"){
                    console.log("选择了12月")
                }
                console.log("-----------监听结束--------------")
            })
            
            return{
                web,
                select    
            }
        }
    }).mount("#app")
    // mount为挂载
</script>