首页 前端知识 vue侦听器watch

vue侦听器watch

2024-01-24 15:01:35 前端知识 前端哥 693 480 我要收藏

1.1.1基本用法

  • 使用watch来响应数据的变化

  • 一般用于异步或者开销较大的操作

  • watch 中的属性 一定是data 中 已经存在的数据

  • 当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听

watch 是一个对象,这个对象里 可以写 很多 方法。

1.1.2 watch侦听数据的数据类型

1.1.2.1 监听一般数据 num 的变化

一般数据指的是基础类型的数据(数字,字符串,布尔,null,undefined)

下面这三种写法,都对,用哪个都可以

 <div id="app">
        <div>
            <p>{{num}}</p>
            <button @click="num++">自增</button>
        </div>
    </div>
<script src="./js/vue.js"></script>
    <script>
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){

                return{
                   num:0,
                }

            },
            //侦听器
            //侦听的数据,一定是要在数据中心中 存在的数据
            watch:{
                //es5写法
                // num:function(newVal,oldVal){
                //     console.log('旧值:'+oldVal);
                //     console.log('新值:'+newVal);

                // }

                //es6写法
                // num(newVal,oldVal){
                //     console.log('旧值:'+oldVal);
                //     console.log('新值:'+newVal);

                // }
                num:{
                    handler(newVal,oldVal){
                        console.log('旧值:'+oldVal);
                        console.log('新值:'+newVal);
                    }

                }
            },
            methods:{
               

            }
        })
    </script>

预览:

watch侦听 的数据 是 布尔类型的数据,操作如下所示:

<div id="app">
        <div>
            <p v-if="flag">{{title}}</p>
            <button @click="isflag">点击显示</button>
        </div>
    </div>
 <script src="./js/vue.js"></script>
    <script>
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){

                return{
                   title:'平凡的世界',
                   flag:false,
                }

            },
         
            watch:{
               flag(newVal,oldVal){
                console.log('旧值:'+oldVal);
                console.log('新值:'+newVal);

               }
            },
            methods:{
               isflag(){
                this.flag= !this.flag
               }

            }
        })
    </script>

预览:

1.1.2.2 监听对象变化,需进行deep深度侦听

深度侦听 deep设置为true

deep 属性:深度监听对象变化 (代表是否深度监听)当需要监听一个对象的改变时,普通的 watch 方法无法监听到对象内部属性的改变,此时就需要 deep 属性对对象进行深度监听。

vue 是不能检测到对象属性的添加或删除,我们使用 watch 监听一个对象时,除非是直接重新给对象赋值,否则是不能监听到对象里的值的变化的deep 就是用来进行深度监听的!deep:false //值为 true 或 false,默认 false

deep 为 true把 deep 设为 true 后,就可以得到我们想要的结果了,可以监听到对象属性的变化。

<div id="app">
        <p>
            <input type="text" name="" id="" v-model="msg.text">
        </p>
        <p>
            你输入的信息是:{{msg.text}}
        </p>
    </div>

 

 <script src="./js/vue.js"></script>
    <script>
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){

                return{
                   msg:{text:''}
                }

            },
            watch:{
                msg:{
                    handler(val){
                        console.log('新值:'+val.text);
                    },
                    deep:true

                }

            },
            methods:{
               

            }
        })
    </script>

预览:

数组(一维、多维)的变化不需要通过深度监听,对象数组中对象的属性变化则需要 deep 深度监听。

1.1.2.3 watch中immediate 属性的应用

使用 watch 时有一个特点,就是当值第一次绑定时,不会执行 handler()监听函数,只有值发生改变时才会执行 handler()监听函数。如果我们需要在最初绑定值的时候也执行函数,则就需要用到 immediate 属性。

immediate的值默认是false,在第一次进入页面页面时,如果没有发生数据变化watch并不会立即监听只有发生数据改变,hander才会有操作,但是如果将immediate设置为true,在第一次进入页面时就会绑定值。

immediate [ɪˈmiːdiət] 立即属性:该值默认是 false,在进入页面时,第一次绑定值,watch 不会“立刻执行”监听,只有数据发生改变 watch 才会执行 handler 中的操作。immediate:false, //值为 true 或 false,默认 falseimmediate:true,---- 刚进入页面的时候,watch 可以立刻 监听到 对象中属性的值。immediate:false,---- 刚进入页面的时候,watch 不会“立刻执行” 监听。

immediate 为 true我们可以看到,handler 方法会在第一次绑定值时就触发(调用执行)。

例如1:

<div id="app">
        <div>
            a等于
            <button @click="a=a+10">a+10</button>
        </div>
    </div>
<script src="./js/vue.js"></script>
    <script>
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){

                return{
                   a:1
                }

            },
            watch:{

                a:{
                    handler(newVal,oldVal){
                        console.log('a的默认值是:'+newVal);
                        console.log('点击后a的值是:'+newVal);

                    },
                    immediate:true,
                    deep:false
                }
            },
            methods:{
               

            }
        })
    </script>

预览:

例如2:

 <div id="app">
        <p>
            <input type="text" name="" id="" v-model="man.name">
        </p>
        <p>你的姓名:{{man.name}}</p>
        <p>你的年龄:{{man.age}}</p>
        <p>你的性别:{{man.gender}}</p>
        <p>你的身高:{{man.height}}</p>
    </div>
<script src="./js/vue.js"></script>
    <script>
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){

                return{
                    man:{
                    name:'无',
                    age:'无',
                    gender:'无',
                    height:'无'
            }
                }

            },
            watch:{
            man:{
                handler(newVal){
                    console.log('新值:'+newVal.name);
                    console.log('新值:'+newVal.age);
                    console.log('新值:'+newVal.gender);
                    console.log('新值:'+newVal.height);
                    if(newVal.name == '小谷'){
                        newVal.age = 19;
                        newVal.gender = '男';
                        newVal.height = 176;
                        }else if(newVal.name == '李方利'){
                        newVal.age = 18;
                        newVal.gender = '女';
                        newVal.height = 166;
                    }
                },
                deep:true,
                immediate:true
            }
        },
            methods:{
               

            }
        })
    </script>

预览:

1.1.2.4 watch异步操作

Vue 的 watch 允许我们执行“异步操作”以响应数据更改。

前端的数据均是通过接口请求拿到的,而 Vue 本身不支持 ajax 请求,在项目中安装 axios 库

首先,你要查看下你计算机里有没有安装nodejs。查看是否安装node,我们使用node -v 命令查看node版本。

我们使用where  node命令查看 node的安装路径

异步请求npm install axios 库axios-get 请求axios.get('/getData1').then(r => console.log(r))//接口调用成功返回的数据.catch(err => console.log(err)),//接口调用失败返回的数据

postman接口测试工具 (下载在win7下安装不了)

地址 Postman

接口测试工具(下载安装,可以使用)

Apifox - API 文档、调试、Mock、测试一体化协作平台 - 接口文档工具,接口自动化测试工具,接口Mock工具,API文档工具,API Mock工具,API自动化测试工具

免费天气接口地址

http://wthrcdn.etouch.cn/weather_mini?city=北京

watch执行 异步操作

 <div id="app">
        <input type="text" v-model.trim="word">
        <hr>
        <div>
            <table border="1" width="500">
                <tr>
                    <th>高温</th>
                    <th>低温</th>
                    <th>风向</th>
                    <th>天气</th>
                </tr>
                <tr v-for="item in result">
                    <td>{{item.high}}</td>
                    <td>{{item.low}}</td>
                    <td>{{item.fengxiang}}</td>
                    <td>{{item.type}}</td>
                </tr>
            </table>
        </div>
    </div>
<script src="./js/vue.js"></script>
    <script src="./js/axios.js"></script>
    <script>
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){

                return{
                   word:'',
                   result:[]
                }

            },
            watch:{
                word(newVal,oldVal){
                   
                 if(newVal.length>0){
                    //发送异步请求
                    apiUrl=`http://wthrcdn.etouch.cn/weather_mini?city=${newVal}`
                    axios.get(apiUrl).then((res)=>{
                    console.log(res.data.data.forecast);
                    this.result=res.data.data.forecast
                   })
                }

                 }

                 
            },
            methods:{
               

            }
        })
    </script>

预览:

1.1.2.5 使用 lodash 库减少 watch 对后台请求的压力

(1)下载,安装lodash 库

npm install lodash --save

(2)页面中引入lodash.js

<!-- 页面里引入js -->
<script src="./js/lodash.js"></script>

(3)使用_.debounce函数

_.debounce(func, [wait=0], [options={}])

(4) 具体操作

访问 天气的接口地址

http://wthrcdn.etouch.cn/weather_mini?city='合肥'

完整代码:

<div id="app">
        <input type="text" v-model.trim="word">
        <hr>
        <div>
            <table border="1" width="500">
                <tr>
                    <th>高温</th>
                    <th>低温</th>
                    <th>风向</th>
                    <th>天气</th>
                </tr>
                <tr v-for="item in result">
                    <td>{{item.high}}</td>
                    <td>{{item.low}}</td>
                    <td>{{item.fengxiang}}</td>
                    <td>{{item.type}}</td>
                </tr>
            </table>
        </div>
    </div>
<script src="./js/vue.js"></script>
    <script src="./js/axios.js"></script>
    <script src="./js/lodash.js"></script>
    <script>
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){

                return{
                   word:'',
                   result:[]
                }

            },
            watch:{
               
                word:_.debounce(function(newVal,oldVal){
                       //发送异步请求
                    apiUrl=`http://wthrcdn.etouch.cn/weather_mini?city=${newVal}`
                    axios.get(apiUrl).then((res)=>{
                    console.log(res.data.data.forecast);
                    this.result=res.data.data.forecast
                   })
                },2000)//2秒后,执行异步操作,每2s向后台服务器发送一次请求,作用:减少向服务器发送请求的压力

                 
            },
            methods:{
               

            }
        })
    </script>

预览:

1.1.2.6 watch 监听路由变化

watch 除了可以监听数据的变化,路由的变化也能被其监听到。

vue 核心插件之一————Vue Router 路由模块vue-router 路由插件是 vue 的核心插件 1.下载npm install vue-router -S

路由,其实就是"指向"的意思。 / 路由

<div id="app">
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>
        <router-view></router-view>
    </div>

    <template id="login">
        <div>
            <h1>登录组件</h1>
        </div>
    </template>
    <template id="register">
        <div>
            <h1>注册组件</h1>
        </div>
    </template>
   <script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
    <script>
        //穿件局部组件
        let login={
            template:'#login'
        }
        let register={
            template:'#register'
        }
        //创建路由对象,配置路由规则
        var router=new VueRouter({
            routes:[{
                path:'/login',
                name:'login',
                component:login
            },
            {
                path:'/register',
                name:'register',
                component:register
            }]
        })

        //根实例(根组件)
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){

                return{
                   
                }

            },
            router,
            //侦听器--监听路由变化
            watch:{
                '$route.path':function(newVal){
                    console.log(newVal);
                    if(newVal=='/login'){
                        console.log('欢迎进入到登录页面');

                    }
                    if(newVal=='/register'){
                        console.log('欢迎进入到注册页面');
                    }
                }
            },
            methods:{
               

            },
            components:{
                login,register
            }
        })
    </script>

预览:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/200.html
评论
会员中心 联系我 留言建议 回顶部
复制成功!