8. Vue methods和computed中不能使用箭头函数

最新推荐文章于 2024-04-12 04:32:43 发布

白怀宇

最新推荐文章于 2024-04-12 04:32:43 发布

阅读量1.2k

点赞数 2

分类专栏： Vue2 经验总结文章标签： vue

本文链接：https://blog.csdn.net/b342216980/article/details/106956089

版权

Vue2 经验总结专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Vue methods和computed中不能使用箭头函数

概述

在 Vue 的 methods 和 computed 中不能使用箭头函数，箭头函数中的 this 会指向 windows 而非 Vue 的实例。

示例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue methods和computed中不能使用箭头函数</title>
</head>
<body>
	<div id="app">
		<h2>使用箭头函数</h2>
		<button @click="method_1">使用箭头函数回调</button>
		<p>name: {{ computed_1 }}</p>
		<h2>不使用箭头函数</h2>
		<button @click="method_2">使用箭头函数回调</button>
		<p>name: {{ computed_2 }}</p>
	</div>
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		app = new Vue({
			el: '#app',
			data: {
				name: 'data中的name变量'
			},
			methods: {
				method_1: () => {
					this.name = 'method_1函数设置的属性'
					console.log('method_1:'+this)  // this 指向的是windows
				},
				method_2() {
					this.name = 'method_2函数设置的属性'
					console.log('method_2:'+this)  // this 指向的是Vue实例
				}
			},
			computed: {
				computed_1: () => {
					console.log('computed_1:'+this)  // this 指向的是windows
					return this.name
				},
				computed_2() {
					console.log('computed_2:'+this)  // this 指向的是Vue实例
					return this.name
				}
			}
		})
	</script>
</body>
</html>