watch-watchEffect-侦听器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="../js/vue.js"></script>
    <style>
 
    </style>

</head>
<body>
   
    <div id="root"></div>
     
    <script>  
        // watch 侦听器
        // watchEffect 侦听器

       var app = Vue.createApp({    
            setup(){  
                const { reactive, watch, toRefs,watchEffect,watchEffecttoRefs } = Vue
                const nameObj = reactive({name:"Eric",englishName:'Ren'})

                // 具备一定的惰性 lazy  
                // watch(() => nameObj.name,(curName,prevName)=>{
                //     console.log(curName,prevName);
                // })
 
                // watch([() => nameObj.name,() => nameObj.englishName],([curName,curEng],[prevName,prevEng])=>{
                //     console.log(curName,prevName + ' --- ' +curEng,prevEng);
                // })

                // 3秒后停止 监听器
                // const stop1 =   watch([() => nameObj.name,() => nameObj.englishName],([curName,curEng],[prevName,prevEng])=>{
                //     console.log(curName,prevName + ' --- ' +curEng,prevEng);
                //     setTimeout(()=>{
                //         stop1()
                //     },3000)
                // })


                // 利用  watch 实现 实时非惰性监听
                // watch([() => nameObj.name,() => nameObj.englishName],([curName,curEng],[prevName,prevEng])=>{
                //     console.log(curName,prevName + ' --- ' +curEng,prevEng);
                // },{
                //     immediate:true
                // })

                // 立即执行 没有惰性
                // 不需要传递 监听的内容
                // 不能获取去数据之前的值
                // watchEffect(()=>{
                //     // console.log('abc');
                //     console.log(nameObj.name);
                //     console.log(nameObj.englishName);
                // })


                // 3秒后停止 监听器
                const stop = watchEffect(()=>{
                    // console.log('abc');
                    console.log(nameObj.name);
                    console.log(nameObj.englishName);

                    setTimeout(()=>{
                        stop()
                    },3000)
                })
               
                const { name, englishName } = toRefs(nameObj)
                return {
                    name,englishName
                }
            },
            template:`  
                <div>
                    <div>
                        Name: <input v-model="name" >
                    </div>
                    <div>
                        Name is {{name}}
                    </div>
                    <div>
                        englishName: <input v-model="englishName" >
                    </div>
                    <div>
                        englishName is {{englishName}}
                    </div>
                </div>  
            `
        })
 
        app.mount('#root')

    </script>

</body>
</html>
posted @ 2021-12-14 11:53  13522679763-任国强  阅读(31)  评论(0)    收藏  举报