Vue中data为何以函数形式返回
data为何以函数形式返回
在使用Vue构建组件化应用时，每个组件的data属性都是以函数形式返回的，这主要是在组件化实现的时候，每个实例可以维护一份被返回对象的独立的拷贝，而不是共享同一个对象的引用。
Vue简单实例
在一个Vue简单实例中，也就是不使用组件化实现的时候，data可以是一个对象，因为本身也只有一个实例，就不存在多个实例共享的问题。
Vuetitle>head><body> <div id="app"> <div>{{msg}}div> div>body><script src="type="text/javascript"> var vm = new Vue({ el: '#app', data: { msg: 'Vue Instance' } })script>html></p><p>组件化实例</p><p><html><head> <title>Vuetitle>head><body> <div id="app"> <button-counter>button-counter> <button-counter>button-counter> <button-counter>button-counter> div>body><script src="type="text/javascript"> var counter = { count: 0 } Vue.component('button-counter', { data: function(){ return counter; }, template: 'You clicked me {{ count }} times.' }) var vm = new Vue({ el: '#app' })script>html></p><p>所以为了规避这种现象，在组件化实现的时候，data属性必须以函数的形式返回，以便每个实例可以维护一份被返回对象的独立的拷贝，而不是共享同一个对象的引用。</p><p><html><head> <title>Vuetitle>head><body> <div id="app"> <button-counter>button-counter> <button-counter>button-counter> <button-counter>button-counter> div>body><script src="type="text/javascript"> Vue.component('button-counter', { data: function(){ return { count: 0 } }, template: 'You clicked me {{ count }} times.' }) var vm = new Vue({ el: '#app' })script>html></p><p>每日一题</p><p>https://github.com/WindrunnerMax/EveryDay</p><p>参考</p><p>https://segmentfault.com/a/1190000019318483https://cn.vuejs.org/v2/guide/components.html</p><p>
<strong>版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。</strong>
</p>
</div>
<div class="article_footer clear">
<div class="fr tag">标签：<a href="https://www.apispace.com/news/tags-419.html">函数</a>
</div>
<div class="bdsharebuttonbox fl share">
<div class="share-widget fl">
<div class="social-share" data-sites="wechat,weibo, qq, qzone"></div>
</div>
</div>
</div>
<!-- 广告位ad4 -->
<div class="post-navigation clear">
<div class="post-previous fl">
<span>上一篇:</span><a href="https://www.apispace.com/news/post/15386.html">栈排序</a>
</div>
<div class="post-next fr">
<span>下一篇:</span><a href="https://www.apispace.com/news/post/15388.html">IntelliJ IDEA版Postman强大功能介绍</a>
</div>
</div>
</div>
<div class="related_article">
<div class="box_title clear">
<span><i class="icon fa fa-paper-plane"></i>相关文章</span>
</div>
<div class="related_list clear">
<article class="fl">
<div class="related_img"><a href="https://www.apispace.com/news/post/71785.html"><img src="https://www.apispace.com/news/zb_users/theme/zblog5_news/image/random_img/5.jpg"></a></div>
<div class="related_detail">
<h3><a href="https://www.apispace.com/news/post/71785.html" title="c语言sscanf函数的用法是什么">c语言sscanf函数的用法是什么</a></h3>
<div class="meta">
<span><i class="fa fa-eye"></i>215</span>
<span><i class="fa fa-clock-o"></i>2022-09-27</span>
</div>
</div>
</article>
<article class="fl">
<div class="related_img"><a href="https://www.apispace.com/news/post/71784.html"><img src="https://www.apispace.com/news/zb_users/theme/zblog5_news/image/random_img/10.jpg"></a></div>
<div class="related_detail">
<h3><a href="https://www.apispace.com/news/post/71784.html" title="r语言清空数组的方法是什么">r语言清空数组的方法是什么</a></h3>
<div class="meta">
<span><i class="fa fa-eye"></i>215</span>
<span><i class="fa fa-clock-o"></i>2022-09-27</span>
</div>
</div>
</article>
<article class="fl">
<div class="related_img"><a href="https://www.apispace.com/news/post/71779.html"><img src="https://www.apispace.com/news/zb_users/theme/zblog5_news/image/random_img/2.jpg"></a></div>
<div class="related_detail">
<h3><a href="https://www.apispace.com/news/post/71779.html" title="python怎么过滤字符串中的英文字母">python怎么过滤字符串中的英文字母</a></h3>
<div class="meta">
<span><i class="fa fa-eye"></i>215</span>
<span><i class="fa fa-clock-o"></i>2022-09-27</span>
</div>
</div>
</article>
</div>
</div>
<div id="comment" class="post-comment clearfix sb br mt">
<p id="comments-title" class="c-title mb bn"><span><i class="fa fa-pencil"></i> 发表评论</span></p>
<div class="compost">
<form id="frmSumbit" target="_self" method="post" action="https://www.apispace.com/news/zb_system/cmd.php?act=cmt&postid=15387&key=7041315ba834852283a95c4e856e2f3e">
<input type="hidden" name="inpId" id="inpId" value="15387"/>
<input type="hidden" name="inpRevID" id="inpRevID" value="0"/>
<div class="com-name">
<a rel="nofollow" id="cancel-reply" href="#comments" style="display:none;">取消回复</a>
</div>
<div class="com-info">
<ul>
<li>
<span class="hide" for="author"></span>
<input class="ipt" type="text" name="inpName" id="inpName" value="" tabindex="2" placeholder="昵称(必填)">
</li>
<li>
<span class="hide" for="author"></span>
<input class="ipt" type="text" name="inpEmail" id="inpEmail" value="" tabindex="3" placeholder="邮箱">
</li>
<li>
<span class="hide" for="author"></span>
<input class="ipt" type="text" name="inpHomePage" id="inpHomePage" value="" tabindex="4" placeholder="网址">
</li>
</ul>
</div>
<div class="com-box">
<textarea placeholder="来都来了，说点什么吧..." class="textarea" name="txaArticle" id="txaArticle" cols="5" rows="5" tabindex="1"></textarea>
</div>
<div class="com-info"><button class="com-submit br brightness" name="sumbit" type="submit" tabindex="5" onclick="return zbp.comment.post()">发布评论</button></div>
</form>
</div> <div class="comment-list mt">
<p class="no-comment"><i class="iconfont icon-sofa"></i> 暂时没有评论，来抢沙发吧~</p> <span id="AjaxCommentBegin"></span>
<div class="pagination pagination-multi">
<ul>
</ul>
</div>
<span id="AjaxCommentEnd"></span>
</div>
</div>
</div>
</div>
<div class="sidebar">
<div id="tuijianwenzhang" class="part clear 推荐文章">
<div class="top">
<h3 class="title">推荐文章</h3>
</div>
<div class="side tuijianwenzhang"><ul><ul class="hot_posts"> <li><h4><a href="https://www.apispace.com/news/post/24039.html" title="api接口大全（api接口）">api接口有哪几种分类及功能</a></h4></li><li><h4><a href="https://www.apispace.com/news/post/47319.html.html" title="开放api接口定义（api接口开发规范）">什么是API接口?API接口简单介绍</a></h4></li><li><h4><a href="https://www.apispace.com/news/post/52320.html" title="短信api接口免费">短信API接口概述，短信API接口的优势</a></h4></li><li><h4><a href="https://www.apispace.com/news/post/61141.html" title="7款快递物流的物流查询API工具，物流快递查询API接口怎么对接？">7款快递物流的物流查询API工具，物流快递查询API接口怎么对接？</a></h4></li><li><h4><a href="https://www.apispace.com/news/post/56888.html" title="企业四要素: 了解企业经营成功的关键">企业四要素: 了解企业经营成功的关键</a></h4></li><li><h4><a href="https://www.apispace.com/news/post/11123.html" title="什么是语音验证码?(语音验证码的优势),语音验证码平台有哪些">什么是语音验证码?,语音验证码平台有哪些</a></h4></li><li><h4><a href="https://www.apispace.com/news/post/50104.html" title="全国工商数据系统（中国工商网数据库）">全国工商查询系统怎么查企业名录</a></h4></li><li><h4><a href="https://www.apispace.com/news/post/23571.html" title="身份证实名认证接口（身份证实名认证接口免费）">哪些平台提供实名认证的接口？</a></h4></li><li><h4><a href="https://www.apispace.com/news/post/49114.html" title="php调用api接口（php调用api接口教程）">PHP如何调用API接口?</a></h4></li><li><h4><a href="https://www.apispace.com/news/post/49112.html" title="百度天气接口api（百度天气预报api）">如何使用百度天气预报API接口?</a></h4></li></ul></ul></div>
</div>
<div id="divPrevious" class="part clear previous">
<div class="top">
<h3 class="title">最近发表</h3>
</div>
<div class="side divPrevious"><ul><li><a title="c语言sscanf函数的用法是什么" href="https://www.apispace.com/news/post/71785.html">c语言sscanf函数的用法是什么</a></li>
<li><a title="r语言清空数组的方法是什么" href="https://www.apispace.com/news/post/71784.html">r语言清空数组的方法是什么</a></li>
<li><a title="c语言一维数组怎么快速排列" href="https://www.apispace.com/news/post/71783.html">c语言一维数组怎么快速排列</a></li>
<li><a title="linux怎么查看本机内存大小" href="https://www.apispace.com/news/post/71782.html">linux怎么查看本机内存大小</a></li>
<li><a title="linux cpu占用率如何看" href="https://www.apispace.com/news/post/71781.html">linux cpu占用率如何看</a></li>
<li><a title="r语言for循环语句怎么使用" href="https://www.apispace.com/news/post/71780.html">r语言for循环语句怎么使用</a></li>
<li><a title="python怎么过滤字符串中的英文字母" href="https://www.apispace.com/news/post/71779.html">python怎么过滤字符串中的英文字母</a></li>
<li><a title="php怎么获取input输入的值" href="https://www.apispace.com/news/post/71778.html">php怎么获取input输入的值</a></li>
<li><a title="r语言怎么删除数据表某一个数据" href="https://www.apispace.com/news/post/71777.html">r语言怎么删除数据表某一个数据</a></li>
<li><a title="c语言怎么删除数组中的数" href="https://www.apispace.com/news/post/71776.html">c语言怎么删除数组中的数</a></li>
</ul></div>
</div>
<div id="hot_posts" class="part clear hot_posts">
<div class="top">
<h3 class="title">热评文章</h3>
</div>
<ul class="hot_posts"><li><h4><a href="https://www.apispace.com/news/post/55442.html" title="数据接口api（数据接口API开发平台）">数据接口api（数据接口API开发平台）</a></h4></li><li><h4><a href="https://www.apispace.com/news/post/55602.html" title="数据开放接口api（数据服务api开发）">数据开放接口api（数据服务api开发）</a></h4></li><li><h4><a href="https://www.apispace.com/news/post/5107.html" title="Python爬虫教程：爬取酷狗音乐（python爬取音乐网站）">Python爬虫教程：爬取酷狗音乐（python爬取</a></h4></li><li><h4><a href="https://www.apispace.com/news/post/69827.html" title="hbuilder怎么更改字体大小和颜色">hbuilder怎么更改字体大小和颜色</a></h4></li><li><h4><a href="https://www.apispace.com/news/post/66707.html" title="直播平台api接口 - 构建卓越的直播平台">直播平台api接口 - 构建卓越的直播平台</a></h4></li><li><h4><a href="https://www.apispace.com/news/post/55574.html" title="实时股票数据api接口（股票实时行情api接口）">实时股票数据api接口（股票实时行情api接口）</a></h4></li></ul> </div> </div>
</div>
</section>
</div>
<footer class="p-footer">
<div class="contant_box">
<div class="discover_tmt">
</div>
<div class="collaboration_box">
<h5 class="" style="font-size: 1px; color: white;">apispace</h5>
<div class="text_box">
<a href="https://www.jiasou.cn/article/" title="toB数字化营销SEO" style="font-size: 1px; color: white;">加搜toBSEO</a>
<a href="https://www.finclip.com/news/category-1.html" title="小程序工具" style="font-size: 1px; color: white;">前端框架</a>
<a href="https://www.jia-ai.com/info/" title="小红书营销攻略" style="font-size: 1px; color: white;">小红书营销攻略</a>
<a href="https://www.yanyin.tech/cms/" title="分子生物学知识" style="font-size: 1px; color: white;">分子生物学知识</a>
<a href="https://www.finclip.com/news/" title="FinClip 技术文档" style="font-size: 1px; color: white;">小程序容器帮助中心</a>
<a href="https://www.finclip.com/news/article/" title="小程序开发行业洞察" style="font-size: 1px; color: white;">小程序开发行业洞察</a>
<a href="https://www.foneplatform.com/jscms/" title="全面预算管理资讯" style="font-size: 1px; color: white;">全面预算管理资讯</a>
<a href="https://www.weiling.cn/article/" title="企微SCRM客户管理干货" style="font-size: 1px; color: white;">企微SCRM客户管理干货</a>
<a href="https://www.transfertech.cn/news/" title="3D视觉相机资讯" style="font-size: 1px; color: white;">3D视觉相机资讯</a>
<a href="https://www.i2cool.com.cn/tideflow/" title="创冷科技无电制冷" style="font-size: 1px; color: #22292D;">创冷科技无电制冷</a>
<a href="https://www.aigcmkt.com/" title="TideFlow-AISEO自动化营销系统" style="font-size: 1px; color: #22292D;">TideFlow-AISEO自动化营销系统</a>
</div> </div>
<div class="we_img_box clear">
<div class="img_box">
<img src="https://www.apispace.com/news/zb_users/theme/zblog5_news/image/ewm.png" alt="" class="hover_tmt">
</div>
</div>
</div>
<p class="info">© 2023 XWNews <a href="#" target="_blank" rel="nofollow">京ICP备1111040123号-1</a>
<span>
<a href="https://www.zblogcn.com/">版权归zblog所有</a></span>
</p>
</footer>
<div id="backtop" class="backtop">
<div class="bt-box top">
<i class="fa fa-angle-up fa-2x"></i>
</div>
</div>
<script type='text/javascript' src="https://www.apispace.com/news/zb_users/theme/zblog5_news/script/custom.js"></script>
<script type='text/javascript' src="https://www.apispace.com/news/zb_users/theme/zblog5_news/script/nav.js"></script>
<link rel="stylesheet" href="https://www.apispace.com/news/zb_users/theme/zblog5_news/share/css/share.min.css">
<script src="https://www.apispace.com/news/zb_users/theme/zblog5_news/share/js/jquery.share.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
loop: true,
autoplay:2000,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30,
effect: 'fade',
});
</script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?3bff5280c95fa57a674d8373a0557e19";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script language="javascript" src="https://www.apispace.com/news/zb_users/plugin/ZF_ad/js/index.js?id=944"></script>
<script language="javascript" src="https://www.apispace.com/news/zb_users/plugin/ZF_ad/js/ZF_ad__cookie.js"></script>
</body>
</html><!--1,431.75 ms , 19 queries , 5676kb memory , 0 error-->