详解Vue的监听属性

目录
  • Vue监听属性
    • 什么是监听属性?
    • 监听属性和计算属性的区别?
    • 监听属性的使用
      • 深度监听
      • 立即调用
  • 总结

Vue监听属性

什么是监听属性?

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

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

计算属性是依赖的值改变后重新计算结果更新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监听属性通常可以用在 数据持久化、派发事件并同步/异步执行,验证格式…

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!

时间: 2021-11-23

Vue监听属性图文实例详解

目录  什么是监听属性? 监听属性和计算属性的区别? 监听属性的使用 深度监听 立即调用 写在最后  什么是监听属性?

用Vue.js实现监听属性的变化

前言 创建 Vue 实例时,Vue 将遍历 data 的属性,通过 ES5 的 Object.defineProperty 将它们转为 getter/setter,在其内部 Vue 可以追踪依赖.通知变化. const vm = new Vue({ data: {foo: 1} // 'vm.foo' (在内部,同 'this.foo') 是响应的 }) 观察属性变化 Vue 的实例提供了 $watch 方法,用于观察属性变化. const vm = new Vue({ data: {foo:

详解vue2.0监听属性的使用心得及搭配计算属性的使用

我们在工作中常常需要监听某一个属性值的变化,这个时候我们就需要用到了监听属性watch,在这里我总结watch属性的三种场景使用希望对你有所帮助: 1.基础版监听: 场景如下:输入框输入你的年龄,如果年龄在0-15岁提示信息:你还是个小孩,如果年龄在 15-25岁,提示信息:你已经是个少年,如果年龄在25岁以上,提示信息:你已经长大了.根据需求配合监听属性我们得到下面的代码: <template> <div id="app"> 年齡:<input type

Vue2 监听属性改变watch的实例代码

效果: 代码: <div id="app2"> <label>幼儿园入学年龄(3-6):</label><input type="number" v-model="child.age"> <button @click="older"> + </button> <button @click="younger"> - </

Android 监听应用前/后台切换实例代码

前言 这周接到一个需求,需要在应用从后台切换到前台时,展示我们的广告.展示页面其实可以复用以前的开屏广告页,唯一的问题就是如何监听应用从后台切到了前台. 正文 在众多方法中,我采用了以下这种方式.废话不多说,咱们直接看代码: //自定义Application类 public class MyApplication extends Application 在清单文件中声明 <application android:name=".MyApplication" android:allo

jQuery监听浏览器窗口大小的变化实例

方法一:在标签上加入  onLoad="" onResize=""  方法  写上对应的方法即可 方法二:window.onresize=function(){///.....} 在方法里面写上对应的代码即可 着两种方法基本都可以解决问题. <script> function adjust(obj){ var div = document.getElementById("pad"); var txt = document.getEle

Android 监听软键盘状态的实例详解

Android 监听软键盘状态的实例详解 近日遇到要检测软键盘是否显示或隐藏的问题,搜了一下网上,最后找到一个很简单的,记录一下. activityRoot是activity的根view,就是xml里面的第一个view,给它设置一个id. final View activityRootView = findViewById(R.id.activityRoot); activityRootView.getViewTreeObserver().addOnGlobalLayoutListener(ne

微信小程序 监听手势滑动切换页面实例详解

微信小程序 监听手势滑动切换页面实例详解 1.对应的xml里写上手势开始.滑动.结束的监听: <view class="touch" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" ></view> 2.js: var touchDot = 0;//触摸时的原点 var time = 0;// 时

Android EditText 监听用户输入完成的实例

我们都知道, Android EditText输入框,并没有监听用户输入完成的功能,需要我们自己实现. 下面是实现的方法,仅供参考: EditText editText = (EditText) findViewById(R.id.edit); editText.addTextChangedListener(new TextWatcher() { @Override public void beforeTextChanged(CharSequence charSequence, int i, i

vue 纯js监听滚动条到底部的实例讲解

在网页中,我们会遇到很多在滚动条到底部的时候有数据正在加载的事件,那么怎样用vue去实现这样的内容呢?本篇只给出一个雏形,结合vue的生命周期用纯javascript写的一个监听函数,后续操作数据库的部分暂且不议. 1.怎样用纯js判断滚动条是否到底部? 先了解几个关键词: (1)滚动条到顶部的位置:scrollTop (2)当前窗口内容可视区:windowHeight (3)滚动条内容的总高度:scrollHeight 触发监听的函数是: window.onscroll = function(

android studio按钮监听的5种方法实例详解

1.匿名内部类 public class MainActivity extends AppCompatActivity implements View.OnClickListener { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Button btn1 = fin

Vue 监听元素前后变化值实例

我就废话不多说了,大家还是直接看代码吧~ export default { data() { return { item: '' } }, watch: { item(now, before){ let remove = before.filter(x => now.indexOf(x) == -1); let add = now.filter(x => before.indexOf(x) == -1); /* 显示字符串或数组元素的增加和减少 */ console.log(add, remo