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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
Apr 27 Javascript
Javascript中的window.event.keyCode使用介绍
Apr 26 Javascript
项目中常用的JS方法整理
Jan 30 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
Nov 07 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 Javascript
Bootstrap CSS布局之表单
Dec 17 Javascript
canvas绘制的直线动画
Jan 23 Javascript
微信小程序授权登录及解密unionId出错的方法
Sep 26 Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 Javascript
React优化子组件render的使用
May 12 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
May 21 Javascript
npm qs模块使用详解
Feb 07 Javascript
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
PHP扩展编写点滴 技巧收集
2010/03/09 PHP
Yii+MYSQL锁表防止并发情况下重复数据的方法
2016/07/14 PHP
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
jquery关于图形报表的运用实现代码
2011/01/06 Javascript
jQuery 图片切换插件(代码比较少)
2012/05/07 Javascript
jQuery 1.8 Release版本发布了
2012/08/14 Javascript
js自动下载文件到本地的实现代码
2013/04/28 Javascript
对JavaScript中this指针的新理解分享
2015/01/31 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
使用JavaScript进行表单校验功能
2017/08/01 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
2018/10/20 Javascript
Javascript的this详解
2019/03/23 Javascript
微信小程序自定义支持图片的弹窗
2020/12/21 Javascript
Python脚本实现虾米网签到功能
2016/04/12 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
python使用selenium实现批量文件下载
2019/03/11 Python
python 实现查找文件并输出满足某一条件的数据项方法
2019/06/12 Python
python实现布隆过滤器及原理解析
2019/12/08 Python
Python+Redis实现布隆过滤器
2019/12/08 Python
keras的三种模型实现与区别说明
2020/07/03 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
CSS3实现swap交换动画
2016/01/19 HTML / CSS
AssertionError 跟一下那个类是 “is – a”的关系
2012/02/21 面试题
思想品德课教学反思
2014/02/10 职场文书
检察机关个人对照检查材料
2014/09/15 职场文书
党的群众路线教育实践活动对照检查材料思想汇报(党员篇)
2014/09/25 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
公司门卫岗位职责
2015/04/13 职场文书
小学生表扬稿范文
2015/05/05 职场文书
《最后一头战象》读后感:动物也有感情
2020/01/02 职场文书
html form表单基础入门案例讲解
2021/07/21 HTML / CSS
三种方式清除vue路由跳转router-link的历史记录
2022/04/10 Vue.js
如何基于python实现单目三维重建详解
2022/06/25 Python