vue中data和data()的区别说明
目录
- data和data()的区别
- Vue实例中data属性
- 组件化的项目中使用
- 详解vue.js中的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对象中有五个属性,分别是:
newTodoText
visitCount
hideCompletedTodos
todos
error
文章图片
文档之三
文章图片
分析三:
这个好理解,就是你可以在data中可以定义属性时在属性名开头加上下划线“_”或者美元符号“$”,就不可以直接访问,
文章图片
文章图片
此时图一会报错,显示 _first is not defined ,图二才是正确姿势
文档之四
文章图片
分析四:
这就是分析一要解决的问题了,为什么组件(component)里的定义的data必须是方法类型,原因就是在此,在工程中,每个组件都有可能用来被创建多个实例,而这个组件的实例他们的属性是不能共用的!意思是组件A的属性改变不能引起组件B的同一属性改变,结合原型链知识很容易就能想清楚
【vue中data和data()的区别说明】以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
推荐阅读
- Ant|Ant design vue中的联动选择取消操作
- MySQL中|MySQL中 and or 查询的优先级分析
- vue通过v-show实现回到顶部top效果
- mysql|mysql where中如何判断不为空的实现
- 2022-2027年中国北斗卫星导航系统行业市场调研及未来发展趋势预测报告
- 行业报告|2022-2027年中国电话综合信息服务未来发展预测及投资方向研究报告
- big|中国电动汽车换电行业需求现状及未来发展规划报告2022-2028年版
- 2021年全球及中国独角兽企业发展分析(中国有3家企业进入全球前十[图])
- 中国废塑料回收业前景方向预测与投资战略规划分析报告2022-2028年版
- 2022-2028中国隐私管理软件市场现状研究分析与发展前景预测报告