变量动态绑定
【摘要】 一、前言$data是Vue实例中的实例属性，表示Vue实例观察的数据对象。官网给出的解释：Vue 实例的数据对象。Vue 会递归地把 data 的 property 转换为 getter/setter，从而让 data 的 property 能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)：浏览器 API创建的原生对象，原型上的 property 会被忽...
一、前言
$data是Vue实例中的实例属性，表示Vue实例观察的数据对象。官网给出的解释：
Vue实例的数据对象。Vue 会递归地把 data 的property转换为getter/setter，从而让 data 的property能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的key/value对)：浏览器 API创建的原生对象，原型上的property会被忽略。大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。
一旦观察过，你就无法在根数据对象上添加响应式property。因此推荐在创建实例之前，就声明所有的根级响应式property。
实例创建之后，可以通过vm.$data访问原始数据对象。Vue 实例也代理了 data 对象上所有的property，因此访问vm.a等价于访问vm.$data.a。
以_或$开头的property不会被 Vue 实例代理，因为它们可能和 Vue 内置的property、API方法冲突。你可以使用例如vm.$data._property的方式访问这些property。
当一个组件被定义，data必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果data仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供data函数，每次创建一个新实例后，我们能够调用data函数，从而返回初始数据的一个全新副本数据对象。
如果需要，可以通过将vm.$data传入JSON.parse(JSON.stringify(...))得到深拷贝的原始数据对象。
先看一个栗子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://blog.csdn.net/sunhuaqiang1/article/details/109312942"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "hello vue."
}
});
console.log(vm.$data) //{__ob__: Observer}
console.log(vm._data); //{__ob__: Observer}
console.log(vm.$data == vm._data); //true
//三种方式都可以访问到message
console.log(vm.$data.message); //hello vue
console.log(vm._data.message); //hello vue
console.log(vm.message); //hello vue
console.log(Vue.prototype)
</script>
</html>
二、应用示例
data() {
return {
valueArr: [],
pickerCount: Number,
};
},
// 动态创建变量
this.pickerCount = this.paramsObj.variable;
for (let i = 0; i < this.pickerCount.length; i++) {
this.$data["valueArr"][i] = this.obj[this.paramsObj.variable[i]];
}
三、拓展阅读
- 《Vue门户》
【版权声明】本文为华为云社区用户原创内容，未经允许不得转载，如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）