vue使用节流函数-静水博客

vue使用节流函数

2021/09/30 标签： vue lodash immediate debounce

<html>
    <head>
        <script type="text/javascript" src="https://unpkg.com/vue@3.2.19/dist/vue.global.js"></script>
        <script type="text/javascript" src="https://cdn.staticfile.org/lodash.js/4.17.21/lodash.min.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="name"/>
        </div>
        <div id="app_immediate">
            <input type="text" v-model="name"/>
        </div>
    </body>
    <script type="text/javascript">
        Vue.createApp({
            data(){
                return {
                    name:"li"
                }
            },
            methods:{
                
            },
            watch:{
                name:_.debounce(function(newValue,oldValue){
                    console.log(newValue,oldValue);
                },500)
            }
        }).mount('#app');
        Vue.createApp({
            data(){
                return {
                    name:"li"
                }
            },
            methods:{
                
            },
            watch:{
                name:{
                    handler:_.debounce(function(newValue,oldValue){
                        console.log(newValue,oldValue);
                    },500),
                    deep:true,
                    immediate:true
                }
            }
        }).mount('#app_immediate');
    </script>
</html>

上一篇: js内存泄露简单处理方式

下一篇: ios app打包分发

静水缘首页

刘丕水+宋静静于2007年9月相识于山东理工大学，毕业后2011年相恋，共甘苦，历时四年，终于在11月23号拿到了红本本，组建了自己的小家庭......

快速发布

静水缘首页

文章分类

最新文章