浅谈vue中的data与_data的关系是什么
在 Vue 实例中，data 属性是用户定义的用于存储数据的对象，而 _data 是 Vue 内部用于存储数据的对象。它们之间的关系是 Vue 实例的 data 属性实际上是对 _data 的代理。
当你在创建 Vue 实例时，Vue 会将用户定义的 data 属性与内部的 _data 对象建立关联，并在代理过程中添加一些访问和观察的逻辑。这样，你在访问 Vue 实例中的数据时实际上是在访问 _data 中的数据。
下面是一个简单的示例：
<div id="app">
<p>{{ message }}</p>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
console.log(app._data.message); // 这里访问的是内部的 _data 对象的数据
</script>
在这个示例中，app.data 是用户定义的数据，而 app._data 是 Vue 内部存储数据的对象。message 属性实际上是通过代理从 app._data 中取得的。
需要注意的是，直接访问 _data 不是 Vue 推荐的做法，因为 Vue 提供了更高级的 API 来访问和操作数据，如计算属性、观察属性等。直接操作 _data 可能绕过 Vue 的响应式系统，导致数据不被正确地追踪和更新。
下面是一个实例，直接修改数组中第一个元素对象的值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>更新时的一个问题</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2>人员列表</h2>
<button @click="updateMei">更新马冬梅的信息</button>
<ul>
<li v-for="(p,index) of persons" :key="p.id">
{{p.name}}-{{p.age}}-{{p.sex}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'马冬梅',age:30,sex:'女'},
{id:'002',name:'周冬雨',age:31,sex:'女'},
{id:'003',name:'周杰伦',age:18,sex:'男'},
{id:'004',name:'温兆伦',age:19,sex:'男'}
]
},
methods: {
//注意vm是vue实例vm._data.student =vm.student ，原理vue的数据代理，把vm中的属性代理到了_data
updateMei(){
// this.persons[0].name = '马老师' //奏效
// this.persons[0].age = 50 //奏效
// this.persons[0].sex = '男' //奏效
// this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'} //失效
Vue.set(this.persons, 0, {id:'001',name:'马老师',age:50,sex:'男'})//奏效
this.persons.splice(0,1,{id:'001',name:'马老师',age:50,sex:'男'})//奏效
}
}
})
</script>
</html>
上面案例直接修改数组的第一个元素会失效，原因是Vue把data封装为_data时做了响应式处理(代理)，给所有的属性都加了get和set,类似于Object.defineProperty， 但是这里的直接通过索引整个赋值并不会做响应式处理（不会把data数据代理到_data），也就导致并不会实际修改_data，也就是vue的实际数据，除非使用Vue.set做响应式设值。
Vue在实现响应式数据时，会使用一些特殊的技巧来监听对象的属性变化，但这些技巧对数组的处理比较复杂。Vue能够检测到通过索引直接修改数组元素的情况，因为Vue会拦截数组的变异方法（例如 push、pop、shift、unshift、splice 和 sort），从而能够在这些方法执行时触发视图更新。
然而，直接通过索引赋值的方式修改数组元素this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'}，绕过了 Vue 的代理，Vue 无法检测到这样的变化，因此不会触发视图更新。
this.persons[0].name = '马老师' 这种方式可以生效的原因是因为name是vue实例的一个属性，可以触发响应式代理的更新.也就是会触发vue实例身上为name属性添加的get与set。
到此这篇关于浅谈vue中的data与_data的关系是什么的文章就介绍到这了,更多相关vue data与_data内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本篇文章主要介绍了详解vue 模拟后台数据（加载本地json文件）调试，具有一定的参考价值，有兴趣的可以了解一下2017-08-08
这篇文章主要给大家介绍了关于如何在Vue中配置代理服务器的相关资料,文中通过图文以及示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-12-12
这篇文章主要为大家详细介绍了vue实现竖屏滚动公告效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了vue.js实现图片压缩封装方法,包括全局main.js引入方法，通过引入imgupload方法结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-05-05
vue动态绑定多个类名方法详解(:class动态绑定多个类名)
vue中可以通过:class=""这样来根据一定的条件来动态添加class,但是有时候需要判断的条件比较多,需要动态添加的class也比较多,下面这篇文章主要给大家介绍了关于vue动态绑定多个类名(:class动态绑定多个类名)的相关资料,需要的朋友可以参考下2022-11-11
本篇文章主要介绍了vue-loader，vue-loader是webpack下loader插件 可以把.vue文件输出成组件，有兴趣的可以了解一下2017-06-06
vue或react项目生产环境去掉console.log的操作
这篇文章主要介绍了vue或react项目生产环境去掉console.log的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了vue.js学习笔记之v-bind和v-on解析，v-bind 指令用于响应地更新 HTML 特征，v-on 指令用于监听DOM事件，文中还给大家提到了v-bind,v-on的缩写，感兴趣的朋友参考下吧2018-05-05
这篇文章主要介绍了Vue实现路由跳转至外界页面方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
在正式使用Vue进行移动端页面开发前,需要做一些前置工作,下面这篇文章主要给大家介绍了关于vue开发移动端h5环境搭建的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
最新评论