vue组件中data能不能是函数

这篇“vue组件中data能不能是函数”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue组件中data能不能是函数”文章吧。

盘龙ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:13518219792(备注:SSL证书合作)期待与您的合作!

不是,vue组件中data必须是一个函数。vue中组件是用来复用的,为了防止data复用,将其定义为函数。vue组件中的data数据都应该是相互隔离,互不影响的,组件每复用一次,data数据就应该被复制一次,之后,当某一处复用的地方组件内data数据被改变时,其他复用地方组件的data数据不受影响,就需要通过data函数返回一个对象作为组件的状态。

vue实例的时候定义data属性既可以是一个对象,也可以是一个函数

const app = new Vue({
    el:"#app",
    // 对象格式
    data:{
        foo:"foo"
    },
    // 函数格式
    data(){
        return {
             foo:"foo"
        }
    }
})

但,组件中定义data属性,只能是一个函数

如果为组件data直接定义为一个对象

Vue.component('component1',{
    template:`
组件
`,     data:{         foo:"foo"     } })

则会得到警告信息

vue组件中data能不能是函数

警告说明:返回的data应该是一个函数在每一个组件实例中

为什么data属性是一个函数而不是一个对象?

Vue组件中data属性不能为对象原因是对象是引用类型,组件会被多个实例同时引用导致的结果就是多个实例共享一个对象,其中一个组件改变了data对象中的值,其他实例也会受到影响。

如图所示,组件复用后,随机点击其中一个组件中的按钮其他两个组件的数值也会受到影响

vue组件中data能不能是函数

vue组件data为函数的原因:data为函数,通过return返回对象,可以实现每个实例都有自己独立的对象,实例之间互不影响;如下图所示

vue组件中data能不能是函数

结论

根实例对象data可以是对象也可以是函数(根实例是单例),不会产生数据污染情况

组件实例对象data必须为函数,目的是为了防止多个组件实例对象之间共用一个data,产生数据污染。采用函数的形式,initData时会将其作为工厂函数都会返回全新data对象

说明:

  • vue中组件是用来复用的,为了防止data复用,将其定义为函数。

  • vue组件中的data数据都应该是相互隔离,互不影响的,组件每复用一次,data数据就应该被复制一次,之后,当某一处复用的地方组件内data数据被改变时,其他复用地方组件的data数据不受影响,就需要通过data函数返回一个对象作为组件的状态。

  • 当我们将组件中的data写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的data,拥有自己的作用域,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。

  • 当我们组件的date单纯的写成对象形式,这些实例用的是同一个构造函数,由于JavaScript的特性所导致,所有的组件实例共用了一个data,就会造成一个变了全都会变的结果。

以上就是关于“vue组件中data能不能是函数”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。


当前题目:vue组件中data能不能是函数
文章URL:http://scyanting.com/article/jshepj.html