Vue中data为何以函数形式返回

data为何以函数形式返回

在使用Vue构建组件化应用时,每个组件的data属性都是以函数形式返回的,这主要是在组件化实现的时候,每个实例可以维护一份被返回对象的独立的拷贝,而不是共享同一个对象的引用。

Vue简单实例#

在一个Vue简单实例中,也就是不使用组件化实现的时候,data可以是一个对象,因为本身也只有一个实例,就不存在多个实例共享的问题。

Copy
<!DOCTYPE html> <html> <head> <title>Vue</title> </head> <body> <div id="app"> <div>{{msg}}</div> </div> </body> <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { msg: 'Vue Instance' } }) </script> </html>

组件化实例#

如果是使用Vue的组件化实例,那么data属性就必须以函数的形式返回,如果不使用函数的形式返回,可能会出现一些意料之外的情况,比如下面的例子中,按钮组件是复用的,在点击第一个按钮时本身应该只有第一个按钮+1,但是所有的按钮都跟随+1。请注意,在此处仍然是使用函数的形式返回,这是因为如果在组件化实现中如果不使用函数的形式返回Vue会直接报错,但是实现的效果是相同的,虽然是以函数的形式返回,但是返回的对象中count属性都是指向了对于counter对象的引用,本质上依旧是多个组件实例共享一个对象,实际效果与以对象的形式直接返回相同。

Copy
<!DOCTYPE html> <html> <head> <title>Vue</title> </head> <body> <div id="app"> <button-counter></button-counter> <button-counter></button-counter> <button-counter></button-counter> </div> </body> <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script> <script type="text/javascript"> var counter = { count: 0 } Vue.component('button-counter', { data: function(){ return counter; }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' }) var vm = new Vue({ el: '#app' }) </script> </html>

所以为了规避这种现象,在组件化实现的时候,data属性必须以函数的形式返回,以便每个实例可以维护一份被返回对象的独立的拷贝,而不是共享同一个对象的引用。

Copy
<!DOCTYPE html> <html> <head> <title>Vue</title> </head> <body> <div id="app"> <button-counter></button-counter> <button-counter></button-counter> <button-counter></button-counter> </div> </body> <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script> <script type="text/javascript"> Vue.component('button-counter', { data: function(){ return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' }) var vm = new Vue({ el: '#app' }) </script> </html>

每日一题#

Copy
https://github.com/WindrunnerMax/EveryDay

参考#

Copy
https://segmentfault.com/a/1190000019318483 https://cn.vuejs.org/v2/guide/components.html https://blog.csdn.net/fengjingyu168/article/details/72900624
posted @   WindRunnerMax  阅读(460)  评论(0编辑  收藏  举报
编辑推荐:
· MySQL 优化利器 SHOW PROFILE 的实现原理
· 在.NET Core中使用异步多线程高效率的处理大量数据
· 聊一聊 C#前台线程 如何阻塞程序退出
· 几种数据库优化技巧
· 聊一聊坑人的 C# MySql.Data SDK
阅读排行:
· 字节豆包,来园广告
· 为什么推荐在 .NET 中使用 YAML 配置文件
· 在 .NET Core 中使用 Channel 实现生产者消费者模式
· 干掉EasyExcel!FastExcel初体验
· .NET 阻止系统睡眠/息屏
点击右上角即可分享
微信分享提示
CONTENTS