vue data不可以使用箭头函数的问题解析
这篇文章主要介绍了vue data不可以使用箭头函数问题,本文通过源码解析给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
首先需要明确,a() {}和 b: () => {}
是不同的
1 2 3 4 5 6 |
|
1 VUE.js 源码解析
注意此处只设计核心代码
这段代码也是UMD实现原理,本文这里不是重点,有兴趣的可以自行探究。
1 2 3 4 5 6 7 8 |
|
解析一:
对于javascript来说,非严格模式下函数都会有一个this指向,不清楚的这里有传送门this指向相关
说一下本文中涉及的this指向问题,如果不是严格模式,this应该指向window,但是由于vue作者使用的是严格模式,所以他指向了undefined
以下是vue中data的实现原理
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
也就是说每次新创建实例的时候都会去判断是否有data函数,如果有的话就会将其赋值给vm._data,心细的同学会发现对于Vmm实例来说是没有data,而是有vm._data
es5函数和es6箭头函数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
对于普通函数(非严格模式下),this指向调用者,es6中的this指向声明时的上下文环境。
结合以上两点解析今天的问题
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
以上代码说明你使用箭头函数给data: () => {} this指向undefined的时候,是会赋值给vm._data,但是他会相当于一个全局的,只要你不刷新页面他就会缓存你的data。
如果我们使用data() {}this
指向Vm实例,所以他会随着实例更新。
转载https://www.php.cn/js-tutorial-405826.html
最新文章
- zend studio(Eclipse)和PyDev搭建Python开发环境
- Linux 下 YUM 安装 Percona Server 5.6
- Redis缓存数据库详解
- C++重写与重载、重定义
- Store update, insert, or delete statement affected an unexpected number of rows ({0}).
- windows在文件夹快速打开命令行
- Android 修改toast的默认位置和获取当前屏幕的高度和宽度
- IIS7构造Gzip压缩
- Redis状态和信息查看
- KoaHub平台基于Node.js开发的Koa的连接MongoDB插件代码详情
- C语言程序注释风格
- apktool 简单使用记录
- windows 双网卡同时上专网(内网)和外网
- 获取邮箱的DNS和MX 工具类
- .Net Core 在 Linux-Centos上的部署实战教程(一)
- strstr函数字符串匹配问题
- linux常用命令:top 命令
- Linux 文件的读写执行权限的说明
- Jmeter不同线程组之间的变量引用
- “全栈2019”Java第一百零四章:匿名内部类与外部成员互访详解
热门文章
- Java知识回顾 (16)常用操作的Java示例
- Django:缓存及相关配置
- MES实施会有哪些情况?为你介绍两种常见的类型
- Telnet入侵WindowsXP
- 1.live555源码分析----RSTPServer创建过程分析
- js switch case 判断的是绝对相对===,值和类型都要相等
- 关于git报 warning: LF will be replaced by CRLF in README.md.的警告的解决办法
- 18.centos7基础学习与积累-004-分区理论
- memcached——学习
- Incorrect integer value: '' for column 'id' at row 1 错误解决办法