Vue之data定义的三种方式及区别说明
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
在 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定义均生效。
Vue.component('todo-item', { data:function(){ return {mess: "aerchi--function"}; }, // data(){ // return {mess: "aerchi--data()"}; // }, template: '<li>{{mess}}</li>' })
三、data三种写法的区别
1. 在简单的vue实例应用中,三种写法几乎是没有什么区别的,因为上述定义的 #app对象 不会被复用。
var app = new Vue({...})
2. 在组件应用的环境中,会存在多个地方调用同一个组件的情况,为了不让多个地方的组件共享同一个data对象,通过提供 data
函数,每次创建一个新实例后,我们能够调用 data
函数,从而返回初始数据的一个全新副本数据对象。
请注意: 在一个组件的定义里,data
必须声明为返回一个初始数据对象的函数。
这个与JavaScript的作用域特性有关,函数自己拥有私有的作用域,函数之间的作用域相互独立,也就不会出现组件对数据的绑定出现交错的情况。
export default{ data(){ return { ... } }
四、Vue官方中关于data的说明
(https://cn.vuejs.org/v2/api/?#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 // => 1 vm.$data === data // => true // Vue.extend() 中 data 必须是函数 var Component = Vue.extend({ data: function () { return { a: 1 } } })
注意,如果你为 data
属性使用了箭头函数,则 this
不会指向这个组件的实例,不过你仍然可以将其实例作为函数的第一个参数来访问。
data: vm => ({ a: vm.myProp })
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持程序员之家。
相关文章
关于vue3+echart5?遇到的坑?Cannot?read?properties?of?undefine
这篇文章主要介绍了vue3+echart5?遇到的坑?Cannot?read?properties?of?undefined?(reading?'type'),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-04-04
最新评论