vue中定义data：{} 和 data（）{ return }的区别

最新推荐文章于 2024-05-22 19:02:02 发布

记或往

最新推荐文章于 2024-05-22 19:02:02 发布

阅读量2.4k

点赞数 4

分类专栏： vue坎坷之路总结文章标签： vue js

本文链接：https://blog.csdn.net/xiaozhuzhuyang/article/details/115703464

版权

9 篇文章 0 订阅

订阅专栏

这篇博客探讨了在Vue中定义组件data时使用对象字面量和函数两种方式的区别。主要差异在于，当组件被多次复用时，函数形式能确保每个组件实例拥有独立的数据作用域，避免数据交错问题。在简单的应用中，两者效果接近，但在复杂的组件环境中，推荐使用函数返回数据以保证数据隔离。

摘要由CSDN通过智能技术生成

1.第一种写法：对象

var app = new Vue({
　　el: '#app',
　　data: {
　　　　name: 'yang'
　　}
})

2.第二种写法：函数ES6规范中的写法

var app = new Vue({
　　el: '#app',
　　data() {
　　　　return {
　　　　　　name: 'yang'
　　　　}
　　}
})

在简单的vue实例应用中，三种写法几乎是没有什么区别的，因为你定义的#app对象不会被复用。

但是如果是在Vue组件应用的环境中，就可能会存在多个地方调用同一个组件的情况，为了不让多个地方的组件共享同一个data对象，只能返回函数。这个与JavaScript的作用域特性有关，函数自己拥有私有的作用域，函数之间的作用域相互独立，也就不会出现组件对数据的绑定出现交错的情况。

var app = new Vue({
　　el: '#app',
　　data:function{
　　		return{
		　name: 'yang'
		}
　　}
})

关注