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

我们在工作中常常需要监听某一个属性值的变化，这个时候我们就需要用到了监听属性watch，在这里我总结watch属性的三种场景使用希望对你有所帮助：

1.基础版监听：

场景如下：输入框输入你的年龄，如果年龄在0-15岁提示信息：你还是个小孩，如果年龄在 15-25岁，提示信息：你已经是个少年，如果年龄在25岁以上，提示信息：你已经长大了。根据需求配合监听属性我们得到下面的代码：

<template>
 <div id="app">
  年齡：<input type="number" v-model="age"><br>
  提示信息：<span>{{infoMsg}}</span>
 </div>
</template>

<script>
export default {
 data() {
  return {
   age: "",
   infoMsg:""
  }
 },
 watch:{
  age:function(val,oldval){
   if(val>0 && val<15){
    this.infoMsg="你还是个小孩"
   }else if(val>15 && val<25){
    this.infoMsg="你已经是个少年"
   }else{
    this.infoMsg="你已经长大了"
   }
  }
 }
}
</script>

这里需要特别说明一下的是：坚挺属性方法中的两个参数分别代表的含义：第一个val是当面正在监听的属性的值，oldval是属性改变之前的值，由于这是形参的原因，参数的名字可以自己定义，但是但是参数所代表的含义是不会变化的。

2.进阶版监听：

下面我们改变一下需求：基础规则不变，但是因为后台数据库的更改（画个圈圈咀咒他）我们需要提交一个这样的数据结构

 data() {
  return {
   info: {
    age: ""
   },
   infoMsg: ""
  };
 },

由于我们监听的是对象info中的属性age值的变化，所以我们需要使用到的是深度监听，具体代码如下：

<template>
 <div id="app">
  年齡：<input type="number" v-model="info.age"><br>
  提示信息：<span>{{infoMsg}}</span>
 </div>
</template>

<script>
export default {
 data() {
  return {
   info: {
    age: ""
   },
   infoMsg: ""
  };
 },
 watch: {
  info: {
   handler: function(val, oldval) {
    var that = this;
    if (val.age > 0 && val.age < 15) {
     that.infoMsg = "你还是个小孩";
    } else if (val.age > 15 && val.age < 25) {
     that.infoMsg = "你已经是个少年";
    } else {
     that.infoMsg = "你已经长大了";
    }
   },
   deep: true
  }
 }
};
</script>

在这里需要注意的有两点：1，这里的function不能使用箭头函数替代，如果使用箭头函数的话，this的指向会是全局。2，你会注意到这里多加入一个属性是deep，它的含义表示是否开启深度监听，如果开启值为true，反之为false。

3.最高级监听：

针对第二个案例不知道你有没有发现一个问题：我们监听的是一个对象里面某个属性的变化，但是如果当这个对象里面有很多个值的时候，虽然也可以使用第二种方法进行监听，但是这将会是对资源的一种极大的浪费，身为一个严谨的程序员（微笑脸），绝对不能允许这样的事情发生，所以我们可以结合computed（计算属性）对上面的代码进行优化：

<template>
 <div id="app">
  年齡：<input type="number" v-model="info.age"><br>
  提示信息：<span>{{infoMsg}}</span>
 </div>
</template>
<script>
export default {
 data() {
  return {
   info: {
    age: "",
    name: "",
    hobit: ""
   },
   infoMsg: ""
  };
 },
 computed: {
  ageval: function() {
   return this.info.age;
  }
 },
 watch: {
  ageval: {
   handler: function(val, oldval) {
    var that = this;
    if (val > 0 && val < 15) {
     that.infoMsg = "你还是个小孩";
    } else if (val > 15 && val < 25) {
     that.infoMsg = "你已经是个少年";
    } else {
     that.infoMsg = "你已经长大了";
    }
   },
   deep: true
  }
 }
};
</script>

通过上面的我们看出，这次我们监听的是计算属性ageval，而计算属性返回的则是info对象中age的值，与第二次的代码进行比较我们可以发现两次代码中监听的一个是对象info，一个是info对象中age的值，性能大大增强，这就是我们期待的结果了。

总结

以上所述是小编给大家介绍的vue2.0监听属性的使用心得及搭配计算属性的使用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

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

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

  • 使用watch监听路由变化和watch监听对象的实例

    一.watch监听路由变化 解决办法: export default{ data(){ return{} }, watch:{ "$route":"getPath" // 监听事件 }, methods:{ getPath(){ let path = this.$roune.path; //或得当前路径 进行逻辑判断 } } } 二.watch监听对象 例子: <el-select v-model="form.region" placeho

  • 解决Vue2.0 watch对象属性变化监听不到的问题

    问题 很早之前就遇到一个问题,父组件向子组件传值,子组件监听传入对象的某个属性.发现子组件使用deep watch都不能观察到对象中属性的变化,今天终于找到为啥出现这种问题和解决办法了. 解决 为啥出现这种问题?受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除. 请参照https://v1-cn.vuejs.org/guide/reactivity.html 解决方式: 通过vue的this.$set(object, key, value)方法 通过Object.assign()

  • vue监听对象及对象属性问题

    监听整个对象,使用watch就行 export default { data() { return { a: { b: 1, c: 2 } } }, watch() { a: { handler(newVal, oldVal) { console.log('监听a整个对象的变化'); }, deep: true } } } 监听对象中具体属性的变化,需要使用watch配合computed export default { data() { return { a: { b: 1, c: 2 } }

  • 关于vue中watch检测到不到对象属性的变化的解决方法

    关于vue中watch检测到不到对象属性的变化的解决方法

    前言 在vue开发的过程中发现一个问题:改变vue.$data中对象的属性,watch是观测不到变化,但其实对象的属性是有变化的.这--,有点难以置信! 正文 <template> <div> <dl>name: {{option.name}}</dl> <dl>age: {{option.age}}</dl> <dl> <button @click="updateAgeTo25">upda

  • vue watch监听对象及对应值的变化详解

    如下所示: var vm=new Vue({ data:{ a:1, b:{ c:1 } }, watch:{ a(val, oldVal){//普通的watch监听 console.log("a: "+val, oldVal); }, b:{//深度监听,可监听到对象.数组的变化 handler(val, oldVal){ console.log("b.c: "+val.c, oldVal.c);//但是这两个值打印出来却都是一样的 }, deep:true }

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

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

  • 详解JavaScript实现监听路由变化

    目录 history pushState()方法 pushState()使用场景 replaceState() 方法 popstate事件 pushState和replaceState如何监听呢? 获取当前状态 对比 总结 前端实现路由变化主要有两种方式,这两种方式最大特点就是实现URL切换无刷新功能 通过hash改变,利用window.onhashchange 监听. 通过history的改变,进行js操作加载页面,然而history并不像hash那样简单,因为history的改变,除了浏览器

  • 详解React Native监听Android回退按键与程序化退出应用

    详解React Native监听Android回退按键与程序化退出应用 前言 我们知道Android回退按键,会控制页面返回, 并且退出应用并非真正意义退出,仍在后台运行,所以在某些场景下需要监控android回退按键,那么在React Native中应该如何应用呢?我们具体来看看. BackAndroid 此模块用于监听硬件的back键操作. 看下具体代码: BackAndroid.addEventListener('hardwareBackPress', function() { if (!

  • 详解Vue的监听属性

    详解Vue的监听属性

    目录 Vue监听属性 什么是监听属性? 监听属性和计算属性的区别? 监听属性的使用 深度监听 立即调用 总结 Vue监听属性 什么是监听属性? 所谓监听就是对内置对象的状态或者属性变化进行监听并且做出反应的响应,监听属性,意思就是可以监视其他数据的变化. 监听属性和计算属性的区别? 计算属性是依赖的值改变后重新计算结果更新DOM,会进行缓存. 属性监听的是属性值,当定义的值发生变化时,执行相对应的函数. 最主要的用途区别: 计算属性不能执行异步任务.计算属性一般不会用来向服务器请求或者执行异步任

  • 详解vue2.0组件通信各种情况总结与实例分析

    Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用props传递数据---组件内部 //html <div id="app1"> <i>注意命名规定:仅在html内使用my-message</i> <child my-message="组件内部数据传递"></child> </div> //js

  • 详解Vue2.0之去掉组件click事件的native修饰

    这个是在组件开发中遇到的问题,当时我在编写button的组件,模板是这样的: <template> <button class="disable-hover button ion-button" :class="[modeClass,typeClass,shapeClass,sizeClass,colorClass,roleClass,strongClass]"> <span class="button-inner"

  • 详解vue2.0脚手架的webpack 配置文件分析

    前言 作为 Vue 的使用者我们对于 vue-cli 都很熟悉,但是对它的 webpack 配置我们可能关注甚少,今天我们为大家带来 vue-cli#2.0 的 webpack 配置分析 vue-cli 的简介.安装我们不在这里赘述,对它还不熟悉的同学可以直接访问 vue-cli 查看 目录结构 . ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server

  • 详解vue2.0+vue-video-player实现hls播放全过程

    起因 最近公司想做一套视频点播服务,因为考虑到成本问题,领导希望一切都用开源系统来完成.基于这个出发点,那就肯定排除了各大云视频平台(腾讯云 音视频点播VOD.网易云视频.七牛云.阿里云 视频服务等).其实这里我还是建议购买云视频平台,因为自己造轮子肯定没有别人造的好(专门研发团队除外.以此业务为生的公司除外),再说,云视频平台服务商提供的都是一整套解决方案:收集.存储.转码.播放器等,并且在cdn和弹性扩容上都能得到最大保障. 准备 视频点播最少需要两样东西:流媒体服务.视频播放器. 因为这是

  • 详解Vue 如何监听Array的变化

    详解Vue 如何监听Array的变化

    回忆 在上一篇Vue响应式原理-理解Observer.Dep.Watcher简单讲解了Observer.Dep.Watcher三者的关系. 在Observer的伪代码中我们模拟了如下代码: class Observer { constructor() { // 响应式绑定数据通过方法 observe(this.data); } } export function observe (data) { const keys = Object.keys(data); for (let i = 0; i

  • 详解vue2.0模拟后台json数据

    详解vue2.0模拟后台json数据

    最近在跟着做vue2.0以上版本的一个购物平台,在涉及到模拟后台数据交互的时候,视频里讲的是通过json-server这个插件和express,由于之前的配置都是在build/dev-server.js文件夹下,在vue2.0都没有了,全部整合到了build/webpack.dev.conf.js文件里,通过不断查阅资料后终于模拟成功. 1.首先 npm install vue-resource  --save安装vue-resourse,并且在页面上引用(--save 会把依赖包名称添加到 p

随机推荐