一、watch侦听器

watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。

语法格式如下：

const vm = new Vue({el:'#app',data:{username: ''}，watch:{// 监听 username 值的变化//newVal 是变化后的新值,  oldVal 是变化之前的旧值uesrname(newVal, oldVal) {console.log(newVal, oldVal);        }}
})

监听数据变化，一般只监听一个变量或数组

使用场景：watch(异步场景)，computed(数据联动) watch可以在所监听的数据后面直接加字符串形式的方法名

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="../vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app"><h3>{{firstName}}</h3></div><script>const vm = new Vue({el: '#app',data() {return {firstName: "zhang",lastName: "san",watchFullName: "zhangsan",age: 18,}},watch:{firstName(newVal, oldVal){console.log(newVal);console.log(oldVal);}},})</script></body>
</html>

使用如下方法也可实现上图效果：

使用侦听器监听 firstName 数据里字符串形式的change 方法名

watch:{

firstName:'change'

},

methods:{

change(newVal, oldVal){

console.log(newVal);

console.log(oldVal);

}

}

二、侦听器的处理函数

handler方法就相当于普通侦听器触发的事件，从结果可以看到，组件初始化的时候，侦听器并没有handler方法，所以fullName是没有值的

当修改以上代码，加上immediate: true，immediate:true代表watch里面声明了之后会立马执行handler里面的函数。执行相应的逻辑。组件初始化的时候，侦听器会立马（immediate）触发handler方法

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Vue计算属性/侦听器/方法比较</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script></head><body><div id="app"><div><p>FullName: {{person.fullname}}</p><p>FirstName: <input type="text" v-model="person.firstname"></p></div></div><script>var other = 'This is other';var app = new Vue({el: '#app',data(){return {person: {firstname: 'Menghui',lastname: 'Jin',fullname: ''}}},watch: {person: {handler(n,o){this.person.fullname = n.firstname + '' + this.person.lastname;},immediate: true,  //刷新加载 立马触发一次handlerdeep: true  // 可以深度检测到 person 对象的属性值的变化}}})</script></body></html>

immediate 的作用是：控制侦听器是否自动触发一次，默认值是 false

当在输入框中输入数据时，可以发现fullName的值并没有随之改变。这是因为vue无法检测到对象内部属性值的变化，比如person.firstname的变化；所以此时需要用到vue的深度监听（deep）此时加上代码 deep: true可以发现每次输入框数据变化 fullname随之改变，上面的可以发现handler监听的新值和老值是一样的这是有vue2.0的坑犹豫同源导致的可以用computed来修改

解决深度监听新老值同源问题

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="app"><p>FullName: {{person.fullname}}</p><p>FirstName: <input type="text" v-model="person.firstname"></p></div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><script>const app = new Vue({el: "#app",data() {return {person: {firstname: 'Menghui',lastname: 'Jin',fullname: ''}}},methods: {},computed: {person2(){return JSON.parse(JSON.stringify(this.person));}//解决深度监听新老值同源问题},watch:{person2:{handler(n,o){console.log(this.person);console.log(n.firstname);console.log(o.firstname);/* this.person.fullname = this.person.firstname + this.person.lastname */},/* immediate: true, */deep: true  // 可以深度检测到 person 对象的属性值的变化}}})</script></body>
</html>

三、侦听器的格式

1. 方法格式的侦听器

无法在刚进入页面的时候，自动触发
如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器

2.对象格式的侦听器

可以通过immediate 选项，让侦听器自动触发
可以通过deep 选项，让侦听器深度监听对象中每个属性的变化

四、侦听器watch、计算属性、methods方法的总结

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app"><h1>计算属性：computed</h1>{{fullName}}<h1>方法：methods</h1>{{fullName2()}}<h1>侦听器：watch</h1>{{watchFullName}}<h1>年龄：age</h1>{{age}}</div><script>var other = 'This is other';const vm = new Vue({el: "#app",data() {return {firstName: "zhang",lastName: "san",watchFullName: "zhangsan",age: 18,}},methods: {fullName2() {console.log("调用了fullName2,使用了一次方法")return this.firstName + this.lastName + ','+other}},computed: {fullName() {console.log("调用了fullName,计算了一次属性")return this.firstName + this.lastName + ','+other}},watch: {firstName(newfirstname,oldfirstname){console.log('firstName触发了watch');this.watchFullName = this.firstName+this.lastName+ ','+other},lastName(newlastname,oldlastname){console.log('lastName触发了watch');this.watchFullName = this.firstName+this.lastName+ ','+other},}})</script></body>
</html>

初始化：

修改firstName/lastName/两者都修改

修改computed中没计算的age

修改Vue实例外的对象

修改Vue实例外对象后在修改Vue实例内的对象

测试结论：

使用computed计算了fullName属性，值为firstName+lastName。计算属性具有缓存功能，当firstName和lastName都不改变的时候，fullName不会重新计算，比如我们改变age的值，fullName的值是不需要重新计算的。

methods并没有缓存特性，比如我们改变age的值，fullName2()方法会被执行一遍。

当一个功能可以用上面三个方法来实现的时候，明显使用computed更合适，代码简单也有缓存特性。

计算属性范围在vue实例内，修改vue实例外部对象，不会重新计算渲染，但是如果先修改了vue实例外对象，在修改vue计算属性的对象，那么外部对象的值也会重新渲染。

侦听器watch及其和计算属性、methods方法的总结相关推荐

光脚丫思考Vue3与实战：第05章计算属性和侦听器第01节计算属性
下面是本文的屏幕录像的在线视频: 温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本: 链接:https://pan.baidu.com/s/1MiGKmrzp40i1ZD_4borteQ ...
光脚丫思考Vue3与实战：第05章计算属性和侦听器第03节计算属性的其他玩法
下面是本文的屏幕录像的在线视频: 温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本: 链接:https://pan.baidu.com/s/1h600_BRR9O2Lr87zVQNgEw ...
vue属性_computed(计算属性)methods(方法)
目录 1.计算属性 2.计算方法 3.深入理解计算属性当需要使用大量逻辑时,若直接放在模板中会使得模板过重且难以维护,如下例 <div id="app">{{ mes ...
光脚丫思考Vue3与实战：第05章计算属性和侦听器第02节侦听器
下面是本文的屏幕录像的在线视频: 温馨提示: 1.视频下载:线上视频被压缩处理,可以下载高清版本: 链接:https://pan.baidu.com/s/1qUekWio3fpWToT9PiECpEg ...
Vue计算属性（computed）和侦听器（watch）
Vue计算属性(computed)和侦听器(watch) 计算属性(computed) 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.所以不 ...
面试点:五句话教你计算属性和和侦听器区别
在面试官问你计算属性和侦听器有什么区别时,他想听到的核心就是下面这五句话 (0)功能不同,计算属性用于解决模板语法冗余问题,侦听器侦听data中每一个数据变化 (1)计算属性有缓存机制,侦听器没有缓存 ...
此计算机支持多个rdp侦听程序,远程桌面侦听器证书配置
远程桌面侦听器证书配置 09/08/2020 本文内容本文介绍在基于 Windows Server 2012 或基于 Windows Server 2012 的服务器上配置侦听器证书的方法,该服务器 ...
Vue——计算属性（计算属性简介、计算属性和方法的区别:(面试)、关于计算属性函数什么情况下调用、案例）
目录计算属性(面试) 1.计算属性简介 2.计算属性和方法的区别:(面试) 3.关于计算属性函数什么情况下调用 4.案例:购物车页面计算总价计算属性(面试) 1.计算属性简介把c ...
计算属性|| 计算属性与方法的区别：计算属性是基于它们的依赖进行缓存的；方法不存在缓存||侦听器
计算属性 1. 为何需要计算属性? 表达式的计算逻辑可能会比较复杂,使用计算属性可以使模板内容更加简洁 2. 计算属性的用法 <!DOCTYPE html> <html lang=& ...

侦听器watch及其和计算属性、methods方法的总结