vue计算属性computed、事件、监听器watch的使用讲解


Posted in Javascript onJanuary 21, 2019

一.计算属性(computed)

<template>
  <div class="box">
    <h1>计算属性</h1>
    <hr>
    <!-- 直接渲染得到数据 -->
    <p><input type="text" v-model="message"></p>
    <!-- 对data的数据进行简单的操作
    这样有一个不好的地方就是后期对页面数据的维护不是那么方便 -->
    <p>{{message.toUpperCase()}}</p>
    <!-- 通过计算属性改变mesage进行渲染 -->
    <p>{{computedMessage}}</p>
    <hr>
    <!-- 通过事件来改变属性 -->
    <span>{{message}}</span><button @click="changeMessage()">点击改变</button>
    <hr>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello world!',
      passw2: 'sss',
    }
  },
  // computed属性是return返回值,在使用的时候只使用函数名不是调用函数
  computed:{
    computedMessage(){
      return this.message.split('')
    }
  },
  methods:{
    changeMessage(){
      this.message = this.computedMessage+'altman'
    }
  },
}
</script>

这里需要注意的是computed中的函数名不能和所操作data中的数据一样;computed中的函数名相当于是操作data数据后的新数据,在模块中直接使用这个函数名即可实现对data中数据改变的渲染。

二.监听器(watch)

首先确认 watch是一个对象,一定要当成对象来用。

对象就有键,有值。

第一种 键:就是你要监听的那个数据,比如说$route,这个就是要监控路由的变化。或者是data中的某个变量。

值可以是函数:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是改变后的新值,第二个是改变之前的值。

第二种  值也可以是函数名:不过这个函数名要用单引号来包裹。(不常用)

第三种情况厉害了(监听的那个数据值是一个对象):

值是包括选项的对象:选项包括有三个。

  •     第一个handler:其值是一个回调函数。即监听到变化时应该执行的函数。
  •     第二个是deep:其值是true或false;确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到。)
  •     第三个是immediate:其值是true或false;确认是否以当前的初始值执行handler的函数。

用法一:基础用法

<template>
  <div class="box">
    <h1>监听器</h1>
    <label>二次密码:</label>
    <input v-model="watchMsg" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello world!',
      watchMsg: '我是监听操作',
    }
  },
  watch:{
    watchMsg(newVal,oldVal){
      console.log('newVal:'+newVal,'oldVal:'+oldVal);
    },
  }
}
</script>

用法二:handler方法和immediate属性

<template>
  <div class="box">
    <h1>监听器</h1>
    <label>二次密码:</label>
    <input v-model="watchMsg" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello world!',
      watchMsg: '我是监听操作',
    }
  },
  watch:{
    watchMsg: {
      handler(newVal,oldVal){
        console.log('newVal:'+newVal,'oldVal:'+oldVal);
      },
      immediate:true,
    }
  }
}
</script>

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

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

用法三:

deep属性

watch 里面还有一个属性 deep,默认值是 false,代表是否深度监听,比如我们 data 里有一个obj属性/数组:

<template>
  <div class="box">
    <h1>监听器</h1>
    <label>二次密码:</label>
    <input v-model="obj.watchMsg" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello world!',
      obj:{
        watchMsg: '我是监听操作',
      }
    }
  },
  watch:{
    // 需要注意的是这里的监听对象也需要变化
    'obj.watchMsg': {
      handler(newVal,oldVal){
        console.log('newVal:'+newVal,'oldVal:'+oldVal);
      },
      immediate:true,
      deep:true,
    }
  }
}
</script>

2、数组的watch

<template>
  <div class="box">
    <h1>监听器</h1>
    <p>{{array}}</p>
    <button @click='addArray()'>点击改变数组</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello world!',
      array:['mu','zi','dig','big']
    }
  },
  watch:{
    // 需要注意的是这里所监听的对象应该是数组
    array:{
      handler(newVal,oldVal){
        console.log(newVal+'--'+oldVal)
      },
      deep:true,
      immediate:true,
    }
  },
  methods:{
    addArray() {
      this.array.push('66')
    }
  }
}
</script>

3、数组中对象的watch

<template>
  <div class="box">
    <h1>监听器</h1>
    <ul>
      <li v-for="(item,index) in arrayObj" :key="item.id">{{index}}--{{item.name}}---<input type="text" v-model="item.age" @keydown="change(index)"></li>
    </ul>
    <hr>
    <ul>
      <li v-for="(item,index) in arrayObj" :key="item.id">{{index}}--{{item.name}}---{{item.age}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arrayObj:[
        {name:'张三',age:'23'},
        {name:'李四',age:'22'}
      ],
    }
  },
  watch:{
    // 需要注意的是这里所监听的对象应该是数组
    arrayObj:{
      handler(newVal,oldVal){
        console.log(newVal+'--'+oldVal)
      },
      deep:true,
      immediate:true,
    }
  },
  methods:{
    change(i) {
      // console.log(this.changeValue)
      this.arrayObj[i].age = this.arrayObj[i].age
    }
  }
}
</script>

4、对象具体属性的watch[活用computed]

<template>
  <div class="box">
    <h1>监听器</h1>
    <p>{{obj.name}}</p>
    <input type="text" v-model="obj.name" name="" id="">
    <p>{{newName}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      obj:{name:'muzi',age:'23'},
    }
  },
  computed:{
    newName(){
      return this.obj.name.toUpperCase();
    }
  },
  watch:{
    newName(newVal,oldVal){
      console.log(newVal+'--'+oldVal)
    },
    // newName:{
    //   handler(newVal,oldVal){
    //     console.log(newVal+'--'+oldVal)
    //   },
    //   deep:true,
    //   immediate:true,
    // }
  },
}
</script>

从效果图上可以看出,计算属性最好使用在更改数据上然后进行渲染;先进行的计算属性再进行的监听。

vue计算属性computed、事件、监听器watch的使用讲解

若有不足请多多指教!希望给您带来帮助!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
Jan 08 Javascript
js 操作select与option(示例讲解)
Dec 20 Javascript
Javascript动态创建div的方法
Feb 09 Javascript
每天一篇javascript学习小结(Boolean对象)
Nov 12 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
Jun 20 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
Feb 08 Javascript
javascript function(函数类型)使用与注意事项小结
Jun 10 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
vue css 相对路径导入问题级踩坑记录
Jun 05 Vue.js
VUE v-model表单数据双向绑定完整示例
Jan 21 #Javascript
js中实例与对象的区别讲解
Jan 21 #Javascript
详解vue挂载到dom上会发生什么
Jan 20 #Javascript
vue-cli3 从搭建到优化的详细步骤
Jan 20 #Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 #Javascript
实例介绍JavaScript中多种组合继承
Jan 20 #Javascript
VUE简单的定时器实时刷新的实现方法
Jan 20 #Javascript
You might like
Yii2框架实现注册和登录教程
2016/09/30 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作详解
2019/06/14 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
ajax 缓存 问题 requestheader
2010/08/01 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
JS动态增删表格行的方法
2016/03/03 Javascript
JS使用onerror捕获异常示例
2016/08/03 Javascript
window.open打开窗口被拦截的快速解决方法
2016/08/04 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
2016/12/08 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
2018/08/06 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
2019/03/28 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
基于layui框架响应式布局的一些使用详解
2019/09/16 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
javascript 使用sleep函数的常见方法详解
2020/04/26 Javascript
python编程实现归并排序
2017/04/14 Python
Python爬虫工程师面试问题总结
2018/03/22 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
Django将默认的SQLite更换为MySQL的实现
2019/11/18 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
python如何建立全零数组
2020/07/19 Python
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
文明家庭先进事迹材
2014/01/27 职场文书
优秀团员个人事迹材料
2014/01/29 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
党课知识竞赛主持词
2014/04/01 职场文书
分析JVM源码之Thread.interrupt系统级别线程打断
2021/06/29 Java/Android