vue--watch

看案例的用法

1把被监听的数据协作函数

<div id="app">
       <span>请输入你喜欢的城市名称</span> <input type="text" v-model="cityName" />
 </div>
var vm = new Vue({
            el: '#app',
            data: {
              cityName: "杏花林"
               
            },
            watch: {
             cityName(newName, oldName) {
              
                  console.log(this.cityName)
               },            
                deep:true, // 深度监听
                immediate: true,// 第一次加载就被监听
            },
            methods: {
             
            }
        })

2 写作方法的引用

<div id="app">
       <span>请输入你喜欢的城市名称</span> <input type="text" v-model="cityName" />
 </div>
var vm = new Vue({
            el: '#app',
            data: {
              cityName: "杏花林"
               
            },
            watch: {
              cityName: 'nameChange', //注意 要放在引号中
                deep:true, // 深度监听
                immediate: true,// 第一次加载就被监听
            },
            methods: {
               nameChange() {
                    console.log("你改变文本了")
                }
            }
        })

3要监听的是一个对象的时候

<div id="app">
       <span>请输入你喜欢的城市名称</span> <input type="text" v-model="cityName.name" />
 </div>
var vm = new Vue({
            el: '#app',
            data: {
              cityName:{name:"杏花村","ids":1}
               
            },
            watch: {
             handler(newName, oldName) {
                      
                        // 无论监听什么，无论以上三种哪个函数若有参数 第一个参数为需要监听的(cityName.name)改变后的新数据，第二个参数为需要监听的(cityName.name)之前的数据 newName 可以改为hhh 同理第二个参数。
                        console.log(newName) // 只要鼠标进入输入框有所改变，就会触发
                    },
                deep:true, // 深度监听
                immediate: true,// 第一次加载就被监听
            },
            methods: {
        
            }
        })

• 注意不知怎么回事，深度监听对象，没法实现其内部例如4。

4下面的例子，并不起作用，还在研究怎么回事。

<div id="app">
       <span>请输入你喜欢的城市名称</span> <input type="text" v-model="cityName.name" />
 </div>
var vm = new Vue({
            el: '#app',
            data: {
              cityName:{name:"杏花村","ids":1}
               
            },
            watch: {
           cityName: {
                    handler(newName, oldName) {
                        // ...
                        console.log(this.cityName.name)
                    },
                },
                deep:true, // 深度监听
                immediate: true,// 第一次加载就被监听
            },
            methods: {
        
            }
        })