2.vue组件data为什么必须是一个函数，而vue的根实例则没有限制

最新推荐文章于 2023-05-12 19:25:25 发布

自由的音符

最新推荐文章于 2023-05-12 19:25:25 发布

阅读量486

点赞数

分类专栏： Vue 性能优化文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weCat_s/article/details/121748534

版权

Vue 同时被 2 个专栏收录

48 篇文章 5 订阅

订阅专栏

性能优化

11 篇文章 1 订阅

订阅专栏

源码中找答案：src/core/instance/state.js-initData()

多实例的情况下，为了保证大家的状态的不污染、不干扰需要是一个函数

函数每次执行都会返回新的data对象实例
测试代码：

<html>
	<head>
	<title>Vue事件处理</title>
	</head>
	<body>
		<div id="demo">
			<h1>vue组件data为什么必须是个函数? </h1>
			<comp></ comp>
			<comp></ comp>
		</div>
		<script src="../ ../dist/vue.js"></script>
		<script>
			Vue.component('comp'，{
			template:'<div @click=" counter++">{{counter}}</div>',
			data: {counter: 1}
			})
			//创建实例
			const app = new Vue({
			el:' #demo '，
			});
		</script>
	<body/>
<html/>