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的同一属性改变，结合原型链知识很容易就能想清楚
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue父子组件方法this.$emit()有时候不触发问题及解决
这篇文章主要介绍了Vue父子组件方法this.$emit()有时候不触发问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
这篇文章主要介绍了vue使用HMAC-SHA256签名算法的相关知识,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-07-07
这篇文章主要介绍了vue中echarts视图不更新问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
vscode开发vue非常好用,因为有很多的插件,可以补全语法,或者高亮便于检查错误,但我最近发现我的vscode却没有了代码提示,这篇文章主要给大家介绍了关于VSCode中书写Vue无代码提示该如何解决的相关资料,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了 详解vue微信网页授权最终解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-06-06
Vue使用antd组件a-form-model实现数据连续添加功能
这篇文章主要介绍了Vue使用antd组件a-form-model实现数据连续添加功能,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
在Vue应用程序中,路由组件是构建单页应用的关键部分,传递参数给路由组件可以让我们动态地展示内容,处理用户输入,以及实现各种交互功能,本文就给大家介绍了六种Vue路由组件传递参数场景,需要的朋友可以参考下2023-09-09
这篇文章主要为大家介绍了vue组件prop验证作用示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
在JS编程中如果能监测变量的内容,当变量值发生变化时,实时发出通知,这定是一项很有用的功能,下面这篇文章主要给大家介绍了关于如何使用JS监听一个变量改变的相关资料,需要的朋友可以参考下2023-05-05
从 vue2 升级到 vue3，vue3 是可以兼容 vue2 的，所以 vue3 可以采用 vue2 的选项式API。这篇文章主要介绍了vue3 setup() 高级用法,需要的朋友可以参考下2021-11-11
最新评论