vue中data和data()的区别说明
更新时间：2022年03月03日 10:12:15 作者：lzh~
这篇文章主要介绍了vue中data和data()的区别说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
data和data()的区别
Vue实例中data属性
new Vue({
el: '#app',
data: {
message: 'message'
}
})组件化的项目中使用
export default{
data(){
return {
message: 'message'
}
}
}注意：
在大型项目中data会造成数据污染（data是全局的）
将data封装成一个函数，我们在实例化组件的时候只是调用了这个函数生成的数据副本，这就避免了数据污染。
详解vue.js中的data
本文从Vue.js的官方中文文档来逐行分析看看Vue.js的数据对象——data
文档之一
分析一：
首先，data的类型可以是Object
其次，组件（component）里的定义的data必须是方法类型的，至于为什么接下来会介绍到；
文档之二
分析二：
在上图的实例中，app的data对象中有五个属性，分别是：
newTodoTextvisitCounthideCompletedTodostodoserror
Vue会把这五个属性转化为getter和setter来控制访问对象app的属性，以第一个属性newTodoText为例设置了getter和setter：
文档之三
分析三：
这个好理解，就是你可以在data中可以定义属性时在属性名开头加上下划线“_”或者美元符号“$”，就不可以直接访问，
此时图一会报错，显示 _first is not defined ，图二才是正确姿势
文档之四
分析四：
这就是分析一要解决的问题了，为什么组件（component）里的定义的data必须是方法类型，原因就是在此，在工程中，每个组件都有可能用来被创建多个实例，而这个组件的实例他们的属性是不能共用的！意思是组件A的属性改变不能引起组件B的同一属性改变，结合原型链知识很容易就能想清楚
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了Vue2.0实现将页面中表格数据导出excel的实例，非常具有实用价值，感兴趣的同学可以了解一下2017-08-08
这篇文章主要介绍了Vue前端对axios的封装和使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了Vue中实现页面刷新的5种方法,包括使用$router.go(0)、location.reload()、通过router-view的key属性、使用v-if指令手动触发组件重新渲染,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-02-02
这篇文章主要介绍了ant design vue pro 支持多页签模式问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要介绍了Vue.js 2.0从基础到组件的相关资料，文中介绍的非常详细，对大家学习或者使用vue.js具有一定的参考价值，需要的朋友可以参考学习，下面来一起看看吧。2017-04-04
这篇文章主要为大家详细介绍了vue2.0实现列表数据增加和删除，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
Vue安装sass-loader和node-sass版本匹配的报错问题
这篇文章主要介绍了Vue安装sass-loader和node-sass版本匹配的报错问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
CodeMirror支持在线编辑代码，风格包括js, java, php, c++等等100多种语言，下面这篇文章主要来和大家讲讲CodeMirror的应用，感兴趣的可以了解一下2023-06-06
本文给大家介绍了vue项目中跨域问题的完美解决方案，通过更改header，使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建），具体内容详情大家跟随脚本之家小编一起学习吧2018-06-06
这篇文章主要为大家详细介绍了基于element日历组件实现签卡记录，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
最新评论