vue中data定义数字类型_[乐意黎原创]Vue中data定义的三种
⽅式和区别
在 Vue中，定义data时，经常有好⼏种写法，⼀不⼩⼼会混淆，这⾥彻底详述⼀下，以便记分清 。
⼀、在vue中，定义data可以有三种写法。
1. 第⼀种写法，data是⼀个对象。
var app = new Vue({
el: '#app',
data: {
mess: 'aerchi'
}
})
2. 第⼆种写法，data是⼀个函数。
var app = new Vue({
el: '#app',
data: function() {
return {
mess: 'aerchi'
}
}
})
3. 第三种写法，data是⼀个函数，是第⼆种写法的ES6写法。
var app = new Vue({
el: '#app',
data() {
return {
mess: 'aerchi'
}
}
})
⼆、在Vue实例及组件中定义 data的形式。
1.  在Vue 实例中可以这样定义 data， 两种定义⽅法均⽣效。
//Vue中定义的data可以是 object 也可以是函数，效果相同。验证 2020-3-7
new Vue({
/
/ data () {
// return {
// message: 'message-data() function!',
// }
// },
data: {
message: 'message-data{} object !',
},
...
})
2.  在Vue 组件中data必须定义成函数形式， function定义⽅法和ES6定义均⽣效。
Vueponent('todo-item', {
data:function(){
return {mess: "aerchi--function"};
},
// data(){
// return {mess: "aerchi--data()"};
// },
template: '
{{mess}}'
})
三、data三种写法的区别：
1. 在简单的vue实例应⽤中，三种写法⼏乎是没有什么区别的，因为上述定义的 #app对象  不会被复⽤。
var app = new Vue({...})
2. 在组件应⽤的环境中，会存在多个地⽅调⽤同⼀个组件的情况，为了不让多个地⽅的组件共享同⼀个data对象，通过提供 data 函数，每次创建⼀个新实例后，我们能够调⽤ data 函数，从⽽返回初始数据的⼀个全新副本数据对象。
请注意： 在⼀个组件的定义⾥，data 必须声明为返回⼀个初始数据对象的函数。
这个与JavaScript的作⽤域特性有关，函数⾃⼰拥有私有的作⽤域，函数之间的作⽤域相互独⽴，也就不会出现组件对数据的绑定出现交错的情况。
export default{
data(){
return {
...
}
}
三、Vue官⽅中关于data的说明
(/v2/api/?#data)
data
类型：Object | Function
限制：组件的定义只接受 function。
详细：
Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从⽽让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)：浏览器 API 创建的原⽣对象，原型上的属性会被忽略。⼤概来说，data 应该只能是数据 - 不推荐观察拥有状态⾏为的对象。
⼀旦观察过，你就⽆法在根数据对象上添加响应式属性。因此推荐在创建实例之前，就声明所有的根
级响应式属性。
实例创建之后，可以通过 vm.$data 访问原始数据对象。Vue 实例也代理了 data 对象上所有的属性，因此访问 vm.a 等价于访
问 vm.$data.a。
以 _ 或 $ 开头的属性 不会 被 Vue 实例代理，因为它们可能和 Vue 内置的属性、API ⽅法冲突。你可以使⽤例如 vm.$data._property 的⽅式访问这些属性。
当⼀个组件被定义，data 必须声明为返回⼀个初始数据对象的函数，因为组件可能被⽤来创建多个实例。如果 data 仍然是⼀个纯粹的对象，则所有的实例将共享引⽤同⼀个数据对象！通过提供 data 函数，每次创建⼀个新实例后，我们能够调⽤ data 函数，从⽽返回初始数据的⼀个全新副本数据对象。
如果需要，可以通过将 vm.$data 传⼊ JSON.parse(JSON.stringify(...)) 得到深拷贝的原始数据对象。
⽰例： var data = { a: 1 }
// 直接创建⼀个实例
var vm = new Vue({
data: data
})
vm.a // => 1vuejson转对象
vm.$data === data // => true
// d() 中 data 必须是函数
var Component = d({
data: function () {
return { a: 1 }
}
})
注意，如果你为 data 属性使⽤了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第⼀个参数来访问。data: vm => ({ a: vm.myProp })

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。