关于vue的data,和return data的区别?

昨天在调试的时候发现的问题,关于data和return data,里面的数据都可以调用啊

data: {
    name:libai
},
methods: {
    function1(){
    }
}
---------------------
return data(){
    name: libai
},
methods:{
    function1(){
    }
}

假如我在函数里面调用,this.name都是可以调用到的。但是昨天在用一个组件的时候,根据例子用到了render模板,其中如果用的是data这种方式,调用this.funtion1(),显示未定义,但是如果是return data 就可以调用到this.function1,想知道这俩区别是什么?
实际代码

data(){
    return {
{
                        align: 'center',
                        title: '删除任务',
                        render: (h, params) => {
                            return h('div', [
                                h('i-button', {
                                    props: {
                                        type: 'error',
                                        size: 'small',
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                            axios({
                                                method: 'post',
                                                url: '/delete_graph/',
                                                data:                     Qs.stringify({'delete_name':params.row.name})
                                            })
                                        }
                                    }
                                }, 'Delete')
                            ])
                        }
                    }
 }
}

这部分,如果不用return data click事件中this.remove函数是undefined。这里并不是组件把,是render函数的原因吗

阅读 6.6k
2 个回答

官网有明确的解释,链接

When defining a component, data must be declared as a function that returns the initial data object, because there will be many instances created using the same definition. If we use a plain object for data, that same object will be shared by reference across all instances created! By providing a data function, every time a new instance is created we can call it to return a fresh copy of the initial data.

也就是在定义component时,必须使用function的方式。

官方文档 链接

个人理解:vue是组件化的,在使用每个组件定义的方法和属性(就是data的中各种值)应该具有他的局部作用域即单独组件内部使用,所有函数返回形式,使得每个组件中返回的属性和方法,互不干扰,不知道我的理解是不是对

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题