Vue中data为何以函数形式返回
data为何以函数形式返回
在使用Vue构建组件化应用时，每个组件的data属性都是以函数形式返回的，这主要是在组件化实现的时候，每个实例可以维护一份被返回对象的独立的拷贝，而不是共享同一个对象的引用。
Vue简单实例#
在一个Vue简单实例中，也就是不使用组件化实现的时候，data可以是一个对象，因为本身也只有一个实例，就不存在多个实例共享的问题。
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg: 'Vue Instance'
}
})
</script>
</html>
组件化实例#
如果是使用Vue的组件化实例，那么data属性就必须以函数的形式返回，如果不使用函数的形式返回，可能会出现一些意料之外的情况，比如下面的例子中，按钮组件是复用的，在点击第一个按钮时本身应该只有第一个按钮+1，但是所有的按钮都跟随+1。请注意，在此处仍然是使用函数的形式返回，这是因为如果在组件化实现中如果不使用函数的形式返回Vue会直接报错，但是实现的效果是相同的，虽然是以函数的形式返回，但是返回的对象中count属性都是指向了对于counter对象的引用，本质上依旧是多个组件实例共享一个对象，实际效果与以对象的形式直接返回相同。
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
</head>
<body>
<div id="app">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script type="text/javascript">
var counter = {
count: 0
}
Vue.component('button-counter', {
data: function(){
return counter;
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
var vm = new Vue({
el: '#app'
})
</script>
</html>
所以为了规避这种现象，在组件化实现的时候，data属性必须以函数的形式返回，以便每个实例可以维护一份被返回对象的独立的拷贝，而不是共享同一个对象的引用。
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
</head>
<body>
<div id="app">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script type="text/javascript">
Vue.component('button-counter', {
data: function(){
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
var vm = new Vue({
el: '#app'
})
</script>
</html>
每日一题#
https://github.com/WindrunnerMax/EveryDay
参考#
https://segmentfault.com/a/1190000019318483
https://cn.vuejs.org/v2/guide/components.html
https://blog.csdn.net/fengjingyu168/article/details/72900624
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· 终于写完轮子一部分：tcp代理 了，记录一下
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理