【前端】关于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函数的原因吗

回答

官网有明确的解释，买QQ靓号地图链接

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的中各种值）应该具有他的局部作用域即单独组件内部使用，所有函数返回形式，使得每个组件中返回的属性和方法，互不干扰，不知道我的理解是不是对

更多相关文章

随机推荐