聊一聊 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 对象中的回调函数为什么不能是箭头函数？的更多相关文章

  1. JS高级面试题思路（装箱和拆箱、栈和堆、js中sort()方法、.js中Date对象中的getMounth() 需要注意的、开发中编码和解码使用场景有哪些）

    1.装箱和拆箱: 装箱:把基本数据类型转化为对应的引用数据类型的操作: var num = 123 // num var objNum = new Num(123) // object console ...

  2. vue根据数组对象中某个唯一标识去重

    由于在vue中,会自动在数组和对象中加入_obser__观察者模式的一些属性,所以直接用数组的filter去重(下面这种),indexOf不能准确识别 var arr = [1, 2, 2, 3, 4 ...

  3. 浅谈ListBox控件，将对象封装在listBox中，在ListBox中显示对象中某个属性，在ListBox中移除和移动信息

    大家好,俗称万事开头难,不经历风雨,怎能见彩虹.在此小编给大家带来一个自己练习的小实例,希望与大家一起分享与交流.下面进入应用场景,从SQL2008数据库取出数据,给ListBox赋值在界面并显示出来 ...

  4. 【java基础】java中Object对象中的Hashcode方法的作用

    以下是关于HashCode的官方文档定义: hashcode方法返回该对象的哈希码值.支持该方法是为哈希表提供一些优点,例如,java.util.Hashtable 提供的哈希表. hashCode  ...

  5. Vue2实践computed监听Vuex中state对象中的对象属性时发生的一些有趣经历

    今天想实现一个功能,在全局中随时改变用户的部分信息.这时候就想到了用Vuex状态控制器来存储用户信息,在页面中使用computed来监听用户这个对象.看似一个很简单的逻辑,就体现了我基本功的不扎实呀. ...

  6. VUE错误记录 - 品牌后台练习 search(); 数组 splice forEach push 箭头函数

    methods:{ add(){ var car = { id: this.id, name: this.name, ctime: new Date()}; this.list.push(car); ...

  7. IOS9中联系人对象的使用及增删改查操作的函数封装

    之前克服重重困难把IOS9中新的类联系人搞明白了,现在把增删改查封装成了函数,如下: // // ViewController.m // IOS9中联系人CNContact的使用 // // Crea ...

  8. 对List集合中的对象中的某个属性进行排序

    今天在项目中遇到的问题,不能在sql中进行order by.所以将数据库中查询出来的集合,在java代码中进行排序 Collections.sort(list, new Comparator<H ...

  9. java 8 list的stream操作 list中的对象中的某一个成员取出转为该成员的list，以及对象过滤，筛选某个属性后的成员

    取成员属性list List<String> configList = codeEntityList.stream().map(t -> t.getName()).distinct( ...

随机推荐

  1. 都是为了生活组——‘’都是为了吃饭”微信小程序评价

    基于NABCD评论作品,及改进建议 1.根据NABCD评论,作品的选题 N(Need,需求) 纠结症是目前在年轻人身上普遍存在着的问题,食堂食物众多,每次在吃饭前都要纠结好久,大大浪费了时间,还容易产 ...

  2. 扛把子组Scrum立会报告+燃尽图 07

    此作业要求参见https://edu.cnblogs.com/campus/nenu/2019fall/homework/8684 一.小组情况组长:迟俊文组员:宋晓丽 梁梦瑶 韩昊 刘信鹏队名:扛把 ...

  3. 【NHOI2018】找素数

    [题目描述] 素数又称质数,是指一个大于 1 的正整数,如果除了 1 和它本身以外,不能再被其它的数整除,例如:2.3.5.97 等都是素数.2 是最小的素数. 现在,给你 n 个数字,请你从中选取一 ...

  4. Java多线程——线程间通信

    Java多线系列文章是Java多线程的详解介绍,对多线程还不熟悉的同学可以先去看一下我的这篇博客Java基础系列3:多线程超详细总结,这篇博客从宏观层面介绍了多线程的整体概况,接下来的几篇文章是对多线 ...

  5. vue e.path 移动端兼容

    作用 e.path 用来获取点击元素及以上所有父元素的一个数组 问题 当在移动端会有获取不到e.path的问题 不兼容 解决 let path = event.path || (event.compo ...

  6. day20191009jdbc学习笔记

    周三Wednesday JDBC(Java DataBase Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它由一组用Ja ...

  7. scrapy框架安装配置

    scrapy框架 scrapy安装(win) 1.pip insatll wheel 2.下载合适的版本的twisted:http://www.lfd.uci.edu/~gohlke/pythonli ...

  8. 题解 CF1206B 【Make Product Equal One】

    感谢 @一个低调的人 (UID=48417) 题目: CodeForces链接 Luogu链接 思路: 这是一个一眼题 我们不妨把所有的数都看做是\(1\)(取相应的花费,如:\(6\) 的花费就是\ ...

  9. 2019-2020-12 20199317 《Linux内核原理与分析》 第十二周作业

    SET-UID程序漏洞实验 1  实验简介 Set-UID 是 Unix 系统中的一个重要的安全机制.当一个 Set-UID 程序运行的时候,它被假设为具有拥有者的权限.例如,如果程序的拥有者是roo ...

  10. PHP计算两组经纬度坐标之间的距离

    定义π define('PI',3.1415926535898); define('EARTH_RADIUS',6378.137); 计算两组经纬度坐标 之间的距离 /** * 计算两组经纬度坐标 之 ...