Vue中的watch

淡淡的烟草味﹌ 2022-05-09 13:42 250阅读 0赞

假设有如下代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>vue的watch</title>
      <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
    </head>
    <body>
      <div id="app">
          <p>FullName: {
       {fullName}}</p>
          <p>FirstName: <input type="text" v-model="firstName"></p>
      </div>
    </body>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
            firstName: 'Dawei',
    		lastName: 'Lou',
    		fullName: ''
        },
        watch:{ 
    		firstName(newName, oldName) {
    		  this.fullName = newName + ' ' + this.lastName+ ' ' + oldName;
    		  console.log(newName + ' ' + this.lastName + ' ' + oldName);
    		}
    　　　}
      })
     
    </script>
    </html>

上面的代码的效果是，当我们输入`firstName`后，`wacth`监听每次修改变化的新值，然后计算输出`fullName`

**handler方法和immediate属性**

这里watch的一个特点是，最初绑定的时候是不会执行的，要等到  `firstName` 改变时才执行监听计算。那我们想要一开始就让他最初绑定的时候就执行改怎么办呢？我们需要修改一下我们的watch写法，修改过后的watch代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>vue的watch</title>
      <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
    </head>
    <body>
      <div id="app">
          <p>FullName: {
       {fullName}}</p>
          <p>FirstName: <input type="text" v-model="firstName"></p>
      </div>
    </body>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
            firstName: 'Dawei',
    		lastName: 'Lou',
    		fullName: ''
        },
        watch:{ 
    		firstName:{
    			handler(newName, oldName) {
    			  this.fullName = newName + ' ' + this.lastName+ ' ' + oldName;
    			  console.log(newName + ' ' + this.lastName+ ' ' + oldName);
    			},
    			immediate:true
    		}
    　　　},
      })
     
    </script>
    </html>

注意到`handler`了吗，我们给firstName绑定了一个`handler`方法，之前我们写的watch方法其实默认写的就是这个`handler`，Vue.js会去处理这个逻辑，最终编译出来其实就是这个`handler`。

而`immediate:true`代表如果在wacth里声明了firstName之后，就会立即先去执行里面的handler方法，如果为  `false`就跟我们以前的效果一样，不会在绑定的时候就执行。

## **deep属性** ##

watch里面还有一个属性  `deep`，默认值是  `false`，代表是否深度监听，比如我们data里有一个`obj`属性：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>vue的watch</title>
      <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
    </head>
    <body>
      <div id="app">
          <p>obj.a: {
       {obj.a}}</p>
          <p>obj.a: <input type="text" v-model="obj.a"></p>
      </div>
    </body>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
           obj:{
    			a:123
    	   }
        },
        watch:{ 
    		'obj.a':{
    			handler(newName, oldName) {
    			console.log("ob.a is change");
    			},
    			immediate:true,
    		}
    　　　},
      })
     
    </script>
    </html>

当我们在在输入框中输入数据视图改变`obj.a`的值时，我们发现是无效的。受现代JavaScript的限制(以及废弃  `Object.observe`)，Vue不能检测到对象属性的添加或删除。由于Vue会在初始化实例时对属性执行  `getter/setter` 转化过程，所以属性必须在  `data` 对象上存在才能让Vue转换它，这样才能让它是响应的。

如果我们需要监听`obj`里的属性`a`的值呢？这时候`deep`属性就派上用场了！

>     <!DOCTYPE html>
>     <html lang="en">
>     <head>
>       <meta charset="UTF-8">
>       <meta name="viewport" content="width=device-width, initial-scale=1.0">
>       <meta http-equiv="X-UA-Compatible" content="ie=edge">
>       <title>vue的watch</title>
>       <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
>     </head>
>     <body>
>       <div id="app">
>           <p>obj.a: {
>         {obj.a}}</p>
>           <p>obj.a: <input type="text" v-model="obj.a"></p>
>       </div>
>     </body>
>     <script>
>       var vm = new Vue({
>         el: '#app',
>         data: {
>            obj:{
>     			a:123
>     	   }
>         },
>         watch:{ 
>     		'obj.a':{
>     			handler(newName, oldName) {
>     			console.log("ob.a is change");
>     			},
>     			immediate:true,
>     			deep: true
>     		}
>     　　　},
>       })
>      
>     </script>
>     </html>
> 
> `deep`的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改`obj`里面任何一个属性都会触发这个监听器里的handler。
> 
> 优化，我们可以是使用字符串形式监听。

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>vue的watch</title>
      <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
    </head>
    <body>
      <div id="app">
          <p>obj.a: {
       {obj.a}}</p>
          <p>obj.a: <input type="text" v-model="obj.a"></p>
      </div>
    </body>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
           obj:{
    			a:123
    	   }
        },
        watch:{ 
    		'obj.a':{
    			handler(newName, oldName) {
    			  console.log(newName);
    			  console.log(this.obj.a);
    			  console.log(oldName);
    			},
    			immediate:true,
    			deep: true
    		}
    　　　},
      })
     
    </script>
    </html>