????所谓监听就是对内置对象的状态或者属性变化进行监听并且做出反应的响应，监听属性，意思就是可以监视其他数据的变化。

监听属性和计算属性的区别？

计算属性是依赖的值改变后重新计算结果更新DOM，会进行缓存。

属性监听的是属性值，当定义的值发生变化时，执行相对应的函数。

最主要的用途区别：

计算属性不能执行异步任务。计算属性一般不会用来向服务器请求或者执行异步任务，因为耗时可能会比较长，我们的计算属性要实时更新。所以这个异步任务就可以用监听属性来做。

总之一句话：computed能实现的，watch都能实现，computed不能实现的，watch也能实现

监听属性的使用

使用watch配置项，在配置项里面写上要监视的属性，每次属性值的变化都会触发handler函数回调，也可以监视计算属性的变化。

例子：

监视输入框的变化

代码

<template>
<div class="main">
    我:<el-input v-model="name" placeholder="请输入名字"></el-input>
    好友1<el-input v-model="friends.friend_1" placeholder="请输入名字"></el-input>
    好友2<el-input v-model="friends.friend_2" placeholder="请输入名字"></el-input>
</div>
</template>

<script>
export default {
  data(){
    return{
      name:'浪漫主义码农',
      friends:{friend_1:'张三',friend_2:'李四'}
    }
  },
  watch:{
    name:{
      handler(newValue,oldValue){  //newValue 新的值，oldValue变化前的值
        console.log(newValue,oldValue)
        this.friends.friend_1='王五'
      }
    },
    //监视多级结构中某个属性的变化
    'friends.friend_1':{
      handler(newValue,oldValue){
        console.log(newValue,oldValue)
      }
    },
    'friends.friend_2':{
      handler(newValue,oldValue){
        console.log(newValue,oldValue)
      }
    },
  }
};
</script>

深度监听

当我们的对象有多层结构的时候，我们要监听的对象的属性很多，避免一个一个属性单独写，这个时候用到深度监听。

在watch配置中，监视属性对象中，配置deep 设置为 true 用于监听多级对象或者数组内部值的变化

 watch:{
    //监视多级结构中所有属性的变化
    friends:{
      handler(newValue,oldValue){
        console.log(newValue,oldValue,"aa")
      },
      deep:true, //开启深度监听
    }
  }

注意：这里有个问题，深度监听时会出现新旧值相同的现象？

原因：

官方的解释：

在变异(不是替换)对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue不会保留变异之前值的副本

就是导致了指针的变化。在我的js深拷贝你还不会吗 文章里讲到数据的存储

立即调用

和deep配置的地方一样。

immediate 设置为 true 将立即以触发当前handler回调

  watch:{
    name:{
      handler(newValue,oldValue){  //newValue 新的值，oldValue变化前的值
        console.log(newValue,oldValue)
        this.friends.friend_1='王五'
      },
      immediate:true
    },
  }

在页面加载的时候就执行了一次，所以旧数据为undefined

写在最后

watch监听属性通常可以用在 数据持久化、派发事件并同步/异步执行，验证格式...

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JS截取字符串的三个常用方法及区别是什么

  substr() 方法substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。stringObject.substr(start,length)start：必需。要抽取的子串的起始下标。必须是数值。如

• JS前端跨域如何实现，有哪些方法及其原理是什么

  这篇文章主要介绍了js前端解决跨域的八种实现方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• axios怎么判断和取消重复请求？方法是什么？

  这篇文章主要给大家分享解决重复请求的问题，下文给介绍了如何判断重复请求及如何取消重复请求的方法，本文有很详细的介绍，有这方面学习需要的朋友可以参考了解看看。

• Node.js中的gm是什么，如何使用

  gm是基于node.js的图片处理插件，它封装了图片处理工具GraphicsMagick（GM）和ImageMagick（IM），可使用spawn的方式调用。gm插件不是node默认安装的，需执行“npm install gm -S”进行安装才可使用。

• 用JavaScript怎样做一个日期倒计时的功能？

  这篇文章给大家分享的是用JavaScript怎样实现一个日期倒计时的功能。小编觉得挺实用的，因此分享给大家做个参考，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起学习一下吧。