vue侦听器watch

1.1.1基本用法

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

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

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

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

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

1.1.2 watch侦听数据的数据类型

1.1.2.1 监听一般数据 num 的变化

一般数据指的是基础类型的数据（数字，字符串，布尔，null，undefined）

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

 

        

            
{{num}}
            自增
        
    

预览：

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

        

            
{{title}}
            点击显示
        
    

预览：

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

深度侦听 deep设置为true

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

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

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

        

            
        
        

            你输入的信息是：{{msg.text}}
        
    

 

预览：

数组(一维、多维)的变化不需要通过深度监听，对象数组中对象的属性变化则需要 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：

        

            a等于
            a+10
        
    

预览：

例如2：

 

        

            
        
        
你的姓名：{{man.name}}
        
你的年龄：{{man.age}}
        
你的性别：{{man.gender}}
        
你的身高：{{man.height}}
    

预览：

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执行 异步操作

 

        
        

        

            

                

                    
高温
                    
低温
                    
风向
                    
天气
                
                

                    
{{item.high}}
                    
{{item.low}}
                    
{{item.fengxiang}}
                    
{{item.type}}
                
            
        
    

预览：

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

（1）下载，安装lodash 库

npm install lodash --save

（2）页面中引入lodash.js

（3）使用_.debounce函数

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

（4） 具体操作

访问 天气的接口地址

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

完整代码：

        
        

        

            

                

                    
高温
                    
低温
                    
风向
                    
天气
                
                

                    
{{item.high}}
                    
{{item.low}}
                    
{{item.fengxiang}}
                    
{{item.type}}
                
            
        
    

预览：

1.1.2.6 watch 监听路由变化

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

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

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

        登录
        注册
        
    

    
    

预览：