vue学习笔记-13-侦听器

一，侦听器的引入

之前就已经学到了，一旦vue实例对象中的数据发生了变化，页面上对应的数据也会随之发生变化，为了业务需要，常常需要对数据进行二次处理，为了保证数据实时变化，所以引入了侦听器的概念，对应的数据一旦发生变化。就会执行这里定义好的对应函数。

二，一个小案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="css/base.css"/><style type="text/css">#app{width: 10%;margin: 200px auto;border: 1px solid #ccc;line-height: 40px;padding: 20px;}</style></head><body><div id="app"><div class="box"><span>姓：</span><input type="text" v-model="surName"/><br><span>名：</span><input type="text" v-model="name"/><br><span>全名：</span><span>{{totalName}}</span></div></div><script type="text/javascript" src="./js/vue.min.js"></script><script type="text/javascript">var vm=new Vue({el: "#app",data:{surName:"",name:"",totalName:""},computed:{},methods:{},watch:{//这里是对surName这个数据的监听，一旦发生变化，就执行这里的函数surName:function(){this.totalName=this.surName+this.name},//这里是对name这个数据的监听，一旦发生变化，就执行这里的函数name:function(){this.totalName=this.surName+this.name},}})</script></body>
</html>

三，侦听器的应用场景：处理异步的操作

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="css/base.css"/><style type="text/css">#app{width: 20%;margin: 200px auto;border: 1px solid #ccc;line-height: 40px;padding: 20px;}</style></head><body><div id="app"><div class="box"><span>姓名：</span><input type="text" v-model.lazy="name"/><span>{{msg}}</span></div></div><script type="text/javascript" src="./js/vue.min.js"></script><script type="text/javascript">var vm=new Vue({el: "#app",data:{name:"",msg:""},computed:{},methods:{checkName:function(name){//调用接口，但是可以使用定时任务的方式来模拟接口调用var that=this;//因为这里是setTimeout函数，this指向的是window,而在这之前的this还是vmsetTimeout(function(){//模拟接口调用if(name=='lingxu'){that.msg="用户名已经存在，请更换一个"}else{that.msg="用户名可以使用"}},500)}},watch:{name:function(val){//调用后台接口验证用户名的合法性//这里的参数，实参实际上就是当前的name值this.checkName(val)this.msg="正在验证中……"},}})</script></body>
</html>

四，让watch在页面初始化时也执行一次

immediate（立即处理进入页面就触发）

<body>
<div id="app"><input type="text" v-model="num">
</div>
<script src="vue.js"></script>
<script>new Vue({el: '#app',data: {num: 1},watch: {num: {// 数据发生变化就会调用这个函数  handler(newVal, oldVal) {console.log('oldVal:', oldVal)console.log('newVal:', newVal)},// 立即处理 进入页面就触发immediate: true}}})
</script>
</body>

这里需要注意的是，这个侦听器的第一次执行会在create生命周期之前，所以通过create获取的参数监听将会报错。

五，deep（深度监听）

对象和数组都是引用类型，引用类型变量存的是地址，地址没有变，所以不会触发watch。这时我们需要进行深度监听，就需要加上一个属性 deep，值为 true

<body>
<div id="app"><input type="button" value="更改名字" @click="change">
</div>
<script src="vue.js"></script>
<script>new Vue({el: '#app',data: {food: {id: 1,name: '冰激凌'}},methods: {change() {this.food.name = '棒棒糖'}},watch: {// 第一种方式：监听整个对象，每个属性值的变化都会执行handler// 注意：属性值发生变化后，handler执行后获取的 newVal 值和 oldVal 值是一样的food: {// 每个属性值发生变化就会调用这个函数handler(newVal, oldVal) {console.log('oldVal:', oldVal)console.log('newVal:', newVal)},// 立即处理 进入页面就触发immediate: true,// 深度监听 属性的变化deep: true},// 第二种方式：监听对象的某个属性，被监听的属性值发生变化就会执行函数// 函数执行后，获取的 newVal 值和 oldVal 值不一样'food.name'(newVal, oldVal) {console.log('oldVal:', oldVal)   // 冰激凌console.log('newVal:', newVal)   // 棒棒糖}}})
</script>
</body>

vue学习笔记-13-侦听器相关推荐

Vue 学习——监听器（侦听器）：普通监听和深度监听
一.什么是监听器 Vue提供了一个watch选项,提供了一个更通用的方法,来响应数据的变化.当需要在数据变化时执行异步代码或者开销比较大的操作时,这个方式是最有用的. 二.普通监听普通监听是简单的数 ...
5.Vue 计算属性和侦听器
Hello,我是 Alex 007,一个热爱计算机编程和硬件设计的小白,为啥是007呢?因为叫 Alex 的人太多了,再加上每天007的生活,Alex 007就诞生了. 5.Vue 计算属性和侦听器 ...
Vue学习笔记：axios 拦截器的用法
Vue学习笔记:axios 拦截器的用法什么是axios 拦截器? 拦截器就是拦截每一次的请求和响应,然后进行相应的处理.请求拦截器,它可以统一在你发送请求前在请求体里加上token:响应拦截器,是 ...
Vue 计算属性与侦听器
这一节我们一起学习 vue 中的计算属性(computed properties)和侦听器(watch). 在之前,我们学习过 vue 表达式插值: <div id="example& ...
(第二篇)Vue计算属性、侦听器、过滤器
1.计算属性和侦听器 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
Vue属性篇_侦听器watch
作用:侦听属性,响应数据(data&computed)的变化,当数据变化时,会立即执行对应函数,其属性值可以为函数.字符串.对象和数组. 1.属性值类型 (1)函数类型函数类型中,被侦听的数 ...
Vue——计算属性与侦听器
目录一.计算属性 1.基本使用 2.复杂使用 3.getter和setter 4.计算属性和methods的对比二.侦听器 1.watch的用法一.计算属性 1.基本使用现在有变量姓氏和名 ...
day4 vue 学习笔记组件生命周期数据共享数组常用方法
系列文章目录 day1学习vue2笔记 vue指令 day2 学习vue2 笔记过滤器侦听器计算属性 axios day3 vue2 学习笔记 vue组件 day4 vue 学习笔记组件生命 ...
光脚丫思考Vue3与实战：第05章计算属性和侦听器第02节侦听器
下面是本文的屏幕录像的在线视频: 温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本: 链接:https://pan.baidu.com/s/1qUekWio3fpWToT9PiECpEg ...
04 【计算属性侦听器】
9.计算属性有时我们需要依赖于其他状态(普通proxy响应式数据)的状态(computed响应式数据): 在 Vue 中,这是用组件计算属性处理的,以直接创建计算值,我们可以使用 computed ...