这篇文章主要介绍了关于如何解决vue中methods中的方法闭包缓存的问题，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
在路由的导航栏中需要, 判断是否为第一次点击
需要一个标志位来记录是否点击过
现状:
这个标志位只在一个函数中用过.不希望存放全局
希望在这个methods中形成闭包, 用来缓存这个函数
做出如下尝试后, 发现可以实现.
当前问题:
不能在闭包调用时找到正确的this.
测试使用时: 返回的this找到了window
// 测试使用:
<p>
<button>测试按钮</button>
</p>
<script>
var app = new Vue({
el: '#app',
methods: {
test: (() => {
`use strict`
console.log(this) // Window
var flag = true
return () => {
console.log(this) // Window
flag = false
}
})()
}
})
</script>实际项目中的this变成了undefined
![3764058805-5b45e8cbbb8a6_articlex[1].jpg](https://img.php.cn//upload/image/561/996/865/1531474152564501.jpg "1531474152564501.jpg")
更加诡异的是debugger之后, 我们一步步来看
当前代码:
pointJump: (() => {
let isFirstChanged = false;
console.log(this);
debugger;
return entry => {
console.log(this);
console.log(isFirstChanged);
debugger;
isFirstChanged = true;
};
})(),操作:
刷新页面, 第一次函数立即执行![2400994159-5b45e8cbcbcca_articlex[1].jpg](https://img.php.cn//upload/image/535/858/636/1531474166996095.jpg "1531474166996095.jpg")
页面生成完成后: 我们再次通过按钮触发事件: 此时debugger显示内存中为Vue的顶级对象, 而在控制台打印出来的依旧是undefined
![1916631644-5b45e8cbc5236_articlex[1].jpg](https://img.php.cn//upload/image/386/889/261/1531474174895127.jpg "1531474174895127.jpg")
![2300597947-5b45e8cbb758c_articlex[1].jpg](https://img.php.cn//upload/image/124/878/591/1531474196973373.jpg "1531474196973373.jpg")
第一次执行的时候为undefined是正常的, 因为第一次闭包执行, 没有找到this
当我们再次执行的时候, 虽然调用起来的上下文, 也就是this已经改了, 但是因为在作用域中那个this所代表的空间还是undefined, 所以没有能改变过来.
就造成了我们所看到的诡异的现象.
因为在测试环境下, 没有能开启严格模式.
经过两次不同位置的的开启尝试, 都不对
依旧可以找到window对象
现在推测是在vue内部进行的实现, 因为引入的vue版本不同.需要再进行测试, 看来源码还是要好好过一遍
<script>
var app = new Vue({
el: '#app',
methods: {
test: (() => {
`use strict`
console.log(this) // Window
var flag = true
return () => {
console.log(this) // Window
flag = false
}
})()
}
})
</script>因为箭头函数的this是不会改变, 拥有根据父级能够返回的this
然后因为上面的闭包环境中的this, 指向的一直都是undefined
const test = (() => {
let aaa = true;
return function () {
console.log(this);
aaa = false;
};
})();
mainJump(entry) {
test.call(this);
},形成闭包返回的函数中, 不要使用箭头函数, 使用function定义即可
pointJump: (() => {
let isFirstChanged = false;
return function () {
console.log(this); // Vue的顶级对象
isFirstChanged = true;
};
})(),箭头函数不会被call, bind等方法改变this指向
在闭包中返回函数, 缓存变量时, 使用function进行返回函数的定义.
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
以上就是如何解决vue中methods中的方法闭包缓存的问题的详细内容，更多请关注php中文网其它相关文章！
收藏
收藏
收藏
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
0
19
![ThinkPHP5实战之[教学管理系统]](https://img.php.cn/upload/course/000/000/068/6253d87459486427.png)
