vue中watch监听器

小孟学Java

于 2024-09-08 17:48:01 发布

阅读量503

点赞数 4

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_67929601/article/details/142029830

版权

watch作用

vue中,主要使用watch来监听和响应数据的变化,然后调用数据变化需要执行的方法.也可以通过watch动态的改变关联的状态.

基本格式

{

watch:{

被监听的变量(新值,老值){}

}

}

代码演示:

<body>

    <!-- 使用vue开发前端页面，必须在页面给出vue所控制（管理）的区域 -->
    <div id="app">
        <p><input type="text" placeholder="请输入关键字" v-model="keyword"></p>
        <ul>
            <li v-for="item in resultArr.length == 0 ? arr : resultArr">{{item}}</li>
        </ul>
    </div>

    <script src="./js/vue3.js"></script>

    <script>
        // 1. 创建vue实例
        const app = Vue.createApp({
            data() {
                return {
                    arr: ["张三", "李四", "王五", "张三丰", "李小四", "王麻子", "王小五", "赵六", "赵四", "田七", "田八"],
                    keyword: "",
                    resultArr: []
                }
            },
            // watch配置项，它的作用是用来监听vue中的变量变化情况
            // 只要监听的数据发生改变，watch中对应的监听的代码就自动执行
            watch: {
                // 有两个参数
                // 第一个参数为新值
                // 第二个参数为旧值
                keyword(newVal, oldVal) {
                    // 监听到keyword的变化，需要将resultArr原来的数据清空
                    this.resultArr.splice(0);
                    this.arr.forEach(item => {
                        if (item.includes(newVal)) {
                            this.resultArr.push(item);
                        }
                    });
                    if (this.resultArr.length == 0) {
                        this.resultArr.push("搜索的数据不存在")
                    }
                }
            }
        });
        // 2、将vue与页面绑定
        app.mount("#app");
    </script>
</body>

深度监听和立即执行

深度监听:

watch默认是浅层的:被侦听的属性,仅在被赋新值时,才会触发回调函数----而嵌套属性的变化不花触发.如果向侦听所有嵌套的变更,需要使用深层侦听器.

立即执行:

watch默认是懒执行的; 仅当数据源变化的时候,才会执行毁掉.但在某些场景中,我们希望监听器立即执行一遍回调.注:开启立即执行,导致监听到之后,只有新值,没有老值.所有在处理逻辑时,如果需要老值进行应用要对值进行判断非NULL的情况.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
        <p>搜索关键字:<input type="text" v-model.lazy="keyword"></p>
        <p>关键数据:</p>
        <p v-for=" name in (selectName.length>0?selectName:names)">{{name}}</p>
    </div>
    <script src="./js/vue3.js"></script>

    <script>
       //创建Vue实例
        const app=Vue.createApp({
            
            data () {
                return {
                    keyword:'',
                    names:["张三","李四","李烈","张三丰"],
                    selectName:[]
                  
                }
            },       
            methods: {
             
            },
            watch: {
                // keyword(newValue,oldValue){
                //     this.selectName=[];
                //     if(nameValue!=""){
                //         this.names.forEach(name => {
                //             if(name.startsWith(newValue)){
                //                 this.selectName.push(name);
                //             }
                       
                //     });

                //   }
                
                // },
            keyword:{
                handler(newValue,oldValue){
                    this.selectName=[];
                    if(newValue!=''){
                        this.names.forEach(element => {
                            if(element.startsWith(newValue)){
                                this.selectName.push(element);
                            }
                            
                        });
                    }
                    if(this.selectName.length==0){
                        this.selectName.push(...this.names);
                    }
                },
                

                deep:true
                //立即加载,  监听器默认是不会执行的,只有被监听的数据发生变化的时候才执                                    
                //行.
                immediate:true

            }          
            }
        })

        //将Vue与页面绑定
        app.mount('#app')

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

注:在深度监听时newVal和oldVal的值会显示相等,因为器底层使用的是proxy代理,相当于两者只是同一个对象,不同的引用.

解决方案:在computed配置项中将JSON转换为字符串,再将字符串转换成JSON类型,这一过程就相当于新建了一个对象.