Vue中data为何以函数形式返回
时间:2022-07-24
本文章向大家介绍Vue中data为何以函数形式返回,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
data为何以函数形式返回
在使用Vue
构建组件化应用时,每个组件的data
属性都是以函数形式返回的,这主要是在组件化实现的时候,每个实例可以维护一份被返回对象的独立的拷贝,而不是共享同一个对象的引用。
Vue简单实例
在一个Vue
简单实例中,也就是不使用组件化实现的时候,data
可以是一个对象,因为本身也只有一个实例,就不存在多个实例共享的问题。
<!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
对象的引用,本质上依旧是多个组件实例共享一个对象,实际效果与以对象的形式直接返回相同。
<!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
属性必须以函数的形式返回,以便每个实例可以维护一份被返回对象的独立的拷贝,而不是共享同一个对象的引用。
<!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>
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://segmentfault.com/a/1190000019318483
https://cn.vuejs.org/v2/guide/components.html
https://blog.csdn.net/fengjingyu168/article/details/72900624
- jQuery打造智能提示插件
- 每周.NET前沿技术文章摘要(2017-05-17)
- 每周.NET前沿技术文章摘要(2017-05-24)
- ruby学习笔记(10)-puts,p,print的区别
- Linux下的Mongodb部署应用梳理
- Ocelot API网关的实现剖析
- ruby学习笔记(9)-别名(alias)与方法取消(undef,remove_method)
- Pupet自动化管理环境部署记录
- ruby学习笔记(8)-"静态方法的4种写法"与"单例方法的2种写法"
- Puppet常识梳理
- linux下增加磁盘改变指定文件路径分区挂载点和迁移数据
- 手动编写的几个简单的puppet管理配置
- 选择一款适合自己的ruby on rails IDE开发工具
- 微信的两种用途
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux系列之学会使用Top命令进行系统监控
- 一简单线程同步笔试题分享,欢迎纠错分享更多思路
- 卷积神经网络之-NiN 网络(Network In Network)
- 【注意力机制】空间注意力机制之Spatial Transformer Network
- 【小技巧】用Python给你的视频添加字幕
- 震惊!我三步就搞定了 Tomcat 源码环境搭建!
- 【小技巧】深度学习中的那些效率提升利器(附资源)
- 多个线程为了同个资源打起架来了,操作系统是如何让他们安分的?
- 学习链表,这些题你值得一刷!
- Gophish钓鱼测试
- 【位运算】只出现一次的数字 II,数电的知识终于用上了!
- Swaks伪造邮件发件人绕过SPF
- 某次网站的渗透测试
- phpMyAdmin 渗透利用总结
- 【C++简明教程】C++基本语法