vue的watch可以监听一个响应式数据的变化。
以下为示例，需要注意的是，对对象中某一属性的监听方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue之watch监听属性</title>
</head>
<body>
    
    <div id="app">

<input type="text" v-model="number">

<input type="text" v-model="web.url">
<p>{{web.url}}</p>

    </div>

    <script type="module">

        import {createApp,reactive,ref,watch} from './vue.esm-browser.js'

        createApp({

            setup(){


                let number = ref(10)

                watch(number,(numberN,numberO)=>{
                    console.log('原数据'+numberO)
                    console.log('新数据'+numberN)

                })

                //监听对象中的某个属性，需要注意的是，watch()传入的第一个参数，是以()=>obj.attr的形式
                let web = reactive({
                    title:'vue之watch监听属性',
                    url:'cn.vuejs.org'
                })

                watch(()=>web.url,(newV,oldV)=>{
                    console.log(newV,oldV)
                })




                return {
                    web,
                    number
                }
            }

        }).mount('#app')



    </script>
</body>
</html>

学习地址：https://www.dengruicode.com/classes_content?uuid=ef28d4c1408e491284d1486a7e04f4cb

标签: none

评论已关闭