聊一聊 Vue 中 watch 对象中的回调函数为什么不能是箭头函数？
聊一聊 Vue 中 watch 对象中的回调函数为什么不能是箭头函数
本文重点知识点速览：
- Vue 中的 watch 对象中的回调函数不能是箭头函数。
- 箭头函数中的 this 指向的是函数定义时所在的对象，普通函数中的 this 指向的是函数运行时所在的对象。
- 函数的 this 指向问题。
一起学习吧...
说起箭头函数大家一定不陌生，箭头函数是 ES6 中对函数的扩展，使用起来方便快捷，可能有些小伙伴对箭头函数不是特别了解，所以在这里先举个例子吧。
// 普通函数定义
function add(a, b) {
return a + b;
}
// 箭头函数等价定义
const add = (a, b) => {
return a + b;
}
// 普通匿名函数
fucntion() {
console.log('hello');
}
// 箭头函数等价定义
() => {
console.log('hello');
}
箭头函数在定义回调函数中使用的非常多，但是在 Vue 中的 watch 对象的回调函数中就不能使用回调函数，先看下面的例子：
代码有一点长，简单说明一下就不用看所有的代码了，下面代码实现的是实现监视数据 a 和 b 的变化，当其中一个改变时执行相应的回调函数求a与b的和，重点在 23-30 行。
下面的代码中 watch 中回调函数是普通的函数，我们知道 对于普通函数，函数中的this指向函数运行时所在的对象。
所以，当我们在浏览器中改变a的值时(例如在浏览器的控制台输入 vm.a = 10)，代码 23 行打印出来的是一个 Vue 对象(即代码 14行新创建出来的vm实例)，因为此时 代码 22 行的 function 函数运行在 vm 对象中，此时页面会发生变化，由原来的 3 变为 12.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的watch</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{sum}}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
a: 1,
b: 2,
sum: 3
},
watch: {
a: function() {
console.log(this);
this.sum = this.a + this.b;
},
b: function() {
this.sum = this.a + this.b;
}
}
})
</script>
</body>
</html>
我们再来看一下用箭头函数当做 watch 的回调函数的情况，把代码21-29行换成如下的代码即可：
watch: {
a: () => {
console.log(this);
this.sum = this.a + this.b;
},
b: () => {
this.sum = this.a + this.b;
}
}
当我们这时候再在浏览器的控制台改变 a 的值时(比如 在控制台输入 vm.a = 10),会发现打印出来的是 window 对象，所以页面的内容也不会发生变化。
JS 代码分为 预解析阶段和执行阶段，在预解析阶段遇到函数声明会提前进行预解析，此时下面代码中的箭头函数会在全局定义，因为 var vm = new Vue({...}) 这句代码在预解析阶段还没有被执行。当到了执行阶段并且在控制台改变 a 的值后，watch 中的下面代码中的箭头函数开始执行，此时的运行环境确实是新创建的 vm 对象。但是对于箭头函数来说，箭头函数中的 this 指向的是定义时的对象而不是函数运行时所在的对象，这一点与普通函数有很大的区别。
a: () => {
console.log(this);
this.sum = this.a + this.b;
}
如果对于 this 的指向问题如果还不是很清楚可以参考下面的两篇博客：
完
欢迎指正
聊一聊 Vue 中 watch 对象中的回调函数为什么不能是箭头函数？的更多相关文章
- JS高级面试题思路（装箱和拆箱、栈和堆、js中sort()方法、.js中Date对象中的getMounth() 需要注意的、开发中编码和解码使用场景有哪些）
1.装箱和拆箱: 装箱:把基本数据类型转化为对应的引用数据类型的操作: var num = 123 // num var objNum = new Num(123) // object console ...
- vue根据数组对象中某个唯一标识去重
由于在vue中,会自动在数组和对象中加入_obser__观察者模式的一些属性,所以直接用数组的filter去重(下面这种),indexOf不能准确识别 var arr = [1, 2, 2, 3, 4 ...
- 浅谈ListBox控件，将对象封装在listBox中，在ListBox中显示对象中某个属性，在ListBox中移除和移动信息
大家好,俗称万事开头难,不经历风雨,怎能见彩虹.在此小编给大家带来一个自己练习的小实例,希望与大家一起分享与交流.下面进入应用场景,从SQL2008数据库取出数据,给ListBox赋值在界面并显示出来 ...
- 【java基础】java中Object对象中的Hashcode方法的作用
以下是关于HashCode的官方文档定义: hashcode方法返回该对象的哈希码值.支持该方法是为哈希表提供一些优点,例如,java.util.Hashtable 提供的哈希表. hashCode ...
- Vue2实践computed监听Vuex中state对象中的对象属性时发生的一些有趣经历
今天想实现一个功能,在全局中随时改变用户的部分信息.这时候就想到了用Vuex状态控制器来存储用户信息,在页面中使用computed来监听用户这个对象.看似一个很简单的逻辑,就体现了我基本功的不扎实呀. ...
- VUE错误记录 - 品牌后台练习 search(); 数组 splice forEach push 箭头函数
methods:{ add(){ var car = { id: this.id, name: this.name, ctime: new Date()}; this.list.push(car); ...
- IOS9中联系人对象的使用及增删改查操作的函数封装
之前克服重重困难把IOS9中新的类联系人搞明白了,现在把增删改查封装成了函数,如下: // // ViewController.m // IOS9中联系人CNContact的使用 // // Crea ...
- 对List集合中的对象中的某个属性进行排序
今天在项目中遇到的问题,不能在sql中进行order by.所以将数据库中查询出来的集合,在java代码中进行排序 Collections.sort(list, new Comparator<H ...
- java 8 list的stream操作 list中的对象中的某一个成员取出转为该成员的list，以及对象过滤，筛选某个属性后的成员
取成员属性list List<String> configList = codeEntityList.stream().map(t -> t.getName()).distinct( ...
随机推荐
- 串烧 JavaCAS相关知识
JMM与问题引入 为啥先说JMM,因为CAS的实现类中维护的变量都被volatile修饰, 这个volatile 是遵循JMM规范(不是百分百遵循,下文会说)实现的保证多线程并发访问某个变量实现线程安 ...
- 2019-10-9：渗透测试，基础学习the-backdoor-factory-master（后门工厂）初接触
该文章仅供学习,利用方法来自网络文章,仅供参考 the-backdoor-factory-master(后门工制造厂)原理:可执行二进制文件中有大量的00,这些00是不包含数据的,将这些数据替换成pa ...
- ASP.NET Core MVC+EF Core项目实战
项目背景 本项目参考于<Pro Entity Framework Core 2 for ASP.NET Core MVC>一书,项目内容为party邀请答复. 新建项目 本项目开发工具为V ...
- nginx-（三）基本模块1
nginx常用模块介绍 ngx_http_access_module模块的配置(基于IP的访问控制) allow address | CIDR | unix: | all; deny address ...
- React躬行记（14）——测试框架
测试不仅可以发现和预防问题,还能降低风险.减少企业损失.在React中,涌现了多种测试框架,本节会对其中的Jest和Enzyme做详细的讲解. 一.Jest Jest是由Facebook开源的一个测试 ...
- Java 大小端转换（基于ByteBuffer）
大小端的基础知识: 小端( little-endian):低位字节在前,高位字节在后.大端( Big-Endian),则反之.具体而言,就是为了说清楚,CPU架构1 字(word)中byte的存储顺序 ...
- node.js多进程架构
node.js是单进程应用,要充分利用多核cpu的性能,就需要用到多进程架构. 作为web服务器,不能多个进程创建不同的socket文件描述符去accept网络请求, 有经验的同学知道,如果端口被占用 ...
- MySQL 库、表、记录、相关操作（3）
MySQL 库.表.记录.相关操作(3) 单表查询 """ 增: insert [into] [数据库名.]表名[(字段1[, ..., 字段n])] values (数 ...
- Oracle temp table
Tow kinds of temp table data keep method. One is delete when commit Anothe one is preseve when commi ...
- 重写系统自带tabbar出现的 代理错误