Vue的数据代理与响应式

已于 2023-05-06 20:29:07 修改
阅读量130 收藏
点赞数 1
分类专栏： 前端 文章标签： vue.js javascript 前端
于 2023-05-06 16:36:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zsyyugong/article/details/130521747
版权 
<!-- 在线的Vue2开发环境版本，包含了有帮助的命令行警告 --> 

 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> 

Vue的数据代理

        做数据代理的原因，往往就是为了更方便的使用而已，如：vm._data.name变成更简便的this.name 。 这里的this就是vm，还有就是因为做了数据代理，不用写 _data，所以vm._data.name等价于 this.name 。

<body>
    <div id="root">
        <span>{{name}}</span>
        <hr>
        <button @click="modifyname">修改用户名</button>
    </div>

    <script>
        var vm = new Vue({
            el: "#root",
            data: {
                name: "孙悟空",
            },

            methods: {
                modifyname() {
                    //数据代理使使用变得更方便
                    // vm._data.name = "猪八戒";
                    this.name = "猪八戒";

                    console.log(this);      //Vue {_uid: 0, _isVue: true, __v_skip: true, _scope: EffectScope, $options: {…}, …}
                    console.log(vm);        //Vue {_uid: 0, _isVue: true, __v_skip: true, _scope: EffectScope, $options: {…}, …}
                    console.log(vm == this);                    // true
                    console.log(vm._data == this._data);        // true
                    console.log(vm._data.name == vm.name);      // true
                    console.log(vm._data.name == this.name);    // true
                },
            }
        })
    </script>
</body>

Vue的响应式

经典错误写法 1：

        直接用赋值的方法，给Vue追加新的属性，如下面代码中的：this.age = 500。但这不是响应性的，这样写控制台有反应，但页面没反应。

<body>
    <div id="root">
        <button @click="modifyname">修改用户名</button>
        <span>姓名是：{{name}}</span>
        <hr>
        <button @click="addage">临时添加年龄</button>
        <span>年龄是：{{age}}</span>
    </div>

    <script>
        var vm = new Vue({
            el: "#root",
            data: {
                name: "孙悟空",
            },

            methods: {
                addage: function () {
                    //经典错误写法1，不是响应性的，这样写控制台有反应，但页面没反应。
                    this.age = 500;
                },

                modifyname() {
                    //数据代理使使用变得更方便
                    // vm._data.name = "猪八戒";
                    this.name = "猪八戒";
                },
            }
        })
    </script>
</body>

 原因：

  • 对象中后追加的属性，Vue默认不做响应式处理。

  • 如需给后添加的属性做响应式，请使用如下API：

    1. Vue.set(target，propertyName/index，value) 或

    2. vm.$set(target，propertyName/index，value)

经典错误写法 2：

        为了避免直接给Vue追加新的属性，采用上述的Vue.set()写法，但出现了以下报错：

vue.js:5108 [Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option.

<body>
    <div id="root">
        <button @click="modifyname">修改用户名</button>
        <span>姓名是：{{name}}</span>
        <hr>
        <button @click="addage">临时添加年龄</button>
        <span>年龄是：{{age}}</span>
    </div>

    <script>
        var vm = new Vue({
            el: "#root",
            data: {
                name: "孙悟空",
            },

            methods: {
                addage: function () {
                    //经典错误写法1，不是响应性的，这样写控制台有反应，但页面没反应。
                    // this.age = 500;

                    //经典错误写法2
                    Vue.set(vm._data, 'age', 500);
                },

                modifyname() {
                    //数据代理使使用变得更方便
                    // vm._data.name = "猪八戒";
                    this.name = "猪八戒";
                },
            }
        })
    </script>
</body>

原因：

        Vue.set() 和 vm.$set() 不能直接给vm 或 vm的根数据对象（vm._data） 添加属性！！！

解决方法如下，给数据--age添加一个层级。

<body>
    <div id="root">
        <button @click="addage">临时添加年龄</button>
        <span>年龄是：{{person.age}}</span>
    </div>

    <script>
        var vm = new Vue({
            el: "#root",
            data: {
                person: {
                    name: "孙悟空",
                    hobby: ['抽烟', '喝酒', '烫头'],
                }
            },

            methods: {
                addage: function () {
                    //经典错误写法，不是响应性的，这样写控制台有反应，但页面没反应。
                    // this.person.age = 500;

                    //正确写法1
                    Vue.set(vm._data.person, 'age', 500);

                    //正确写法2
                    vm.$set(vm._data.person, 'age', 500);
                    this.$set(this._data.person, 'age', 500);
                },
            }
        })
    </script>
</body>

经典错误写法 3：

        直接找到数组里的某个元素进行赋值修改，例如：vm.items[index] = newValue。你确实改了，但是Vue 不认：

<body>
    <div id="root">
        <h3>爱好：</h3>
        <button @click="modifyHobby">新增爱好</button>
        <ul>
            <li v-for="(h,index) in person.hobby" :key="index">
                {{h}}
            </li>
        </ul>
    </div>

    <script>
        var vm = new Vue({
            el: "#root",
            data: {
                person: {
                    name: "孙悟空",
                    hobby: ['抽烟', '喝酒', '烫头'],
                }
            },

            methods: {
                modifyHobby: function () {
                    //经典错误写法3，用索引直接设置一个数组项，页面检测不到变化。
                    this.person.hobby[0] = "赌博";
                   
                    // 正确写法1----Vue.set
                    Vue.set(vm.person.hobby, 0, "赌博");
                    // 正确写法2----Array.prototype.splice
                    vm.person.hobby.splice(0, 1, "赌博");

                },
            }
        })
    </script>
</body>

在Vue修改数组中的某个元素一定要用如下方法：

  1. 使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
  2. Vue.set() 或 vm.$set()

延申--关于Vue数组里的元素为对象

  • （this.persons[0]为对象，name 为对象里的属性）。对象里的属性，是有为它服务的setter跟getter的，因此可以使用 this.persons[0].name = '马老师'； 的方式修改页面。
  • 但是却没有为数组里的某个元素/对象  persons[0]  服务的setter跟getter的，因此不可以使用 this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'} ； 来修改页面。

  • 在Vue修改数组中的某个元素一定要用如下方法：

    1. 使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()

    2. Vue.set() 或 vm.$set()

<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: {
				updateMei() {
					// this.persons[0].name = '马老师' //奏效
					// this.persons[0].age = 50 //奏效
					// this.persons[0].sex = '男' //奏效
					// this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'} //不奏效
					// this.persons.splice(0, 1, { id: '001', name: '马老师', age: 50, sex: '男' }); //奏效
					Vue.set(this.persons,0,{ id: '001', name: '马老师', age: 50, sex: '男' })  //奏效
				}
			}
		})

	</script>
</body>

从别人的文章里看到的彩蛋：

        如果你想要属性是响应式的，就一定要写在data对象里。因为VUE只对data里的属性做reactive化处理。或者使用Vue.set(vm.someObject, 'b', 2)动态添加。

var vm = new Vue({
  data:{
    a:1
  }
})

// `vm.a` 是响应的

vm.b = 2
// `vm.b` 是非响应的

参考链接：

Vue为什么要使用数据代理呢？ - 天地会珠海分舵的回答 - 知乎

最简化 VUE的响应式原理 - daisy的文章 - 知乎

vue中的响应式是什么? 怎么理解响应式原理?

Vue (响应式)改变数组和对象的方法总结 - 危笑演绎的文章 - 知乎

zsyyugong
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vxe-grid proxy pager 数据代理分页、自定义分页、自定义返回数据结构
我的博客
06-01 9715
vxe-table vxe-grid 数据代理分页、自定义返回数据结构 vxe-grid 是一套集成完整功能的数据表格，接下来使用其他一个数据代理功能来完成列表查询。 上线配置 proxy-config，props 属性用于自定义返回的数据字段，ajax 用于配置请求接口 首页 grid 在读取完配置信息后，默认会触发 ajax.query 动作去请求数据，必须返回一个 Promise，数据结构可以自行定义 <vxe-grid border resizable pager-config
Vue数据响应式
baidulixueqin的博客
04-01 1771
数据响应式 主要原理:深入响应式原理 内容:深入理解options.data Vue对data做了什么？ const myData = { n: 0 }; console.log(myData); new Vue({ data: myData, template: ` <div>{{n}}</div> ` }).$mount("#app"); setTimeout(() => { myData.n += 10; console.log(
Vue2-数据响应式
yulingpan123的博客
03-27 430
Object.definedProperty，options.data 代理与监听，Vue.set(vm.$set)
深入Vue原理_数据响应式
热门推荐
官方推荐
05-16 3万+
深入Vue数据响应式，了解Vue响应式原理，在开发中知其然知其所以然，让我们开发更加得心应手
Vue3 响应式数据
weixin_62897746的博客
12-27 4500
什么是响应式数据？ “响应式”，是指当数据改变后，Vue 会通知到使用该数据的代码。例如，视图渲染中使用了数据，数据改变后，视图也会自动更新。 采用“数据劫持”结合“发布者-订阅者”模式的方式，通过“Object.defineProperty()”方法来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
Vue 数据响应式原理
ox4f5da2的博客
11-02 723
从 0 到 1 手写 Vue2 的源码
vue3 中定义响应式数据
shanyaodou的博客
03-23 636
vue3 中定义响应式数据
Vue2与Vue3响应式原理对比
qq_40792800的博客
08-11 1126
因为Vue3重新改写了底层响应式原理，那我们大胆猜测一下，Vue3 应该修复了 Vue2.x 版本的问题，也就是说 Vue3 能够直接监听到对于对象的新增属性或删除属性，同时还能直接通过数组下标来操作数组，或通过 length 属性直接改变数组长度，而不用依赖于 $set 方法、$delete 方法或 splice 方法。上面说到了 在 ref函数中如果接收了一个对象，且需要深层响应的话，就会调用 reactive 函数来进行响应式转化，那我们现在来看看 reactive 函数转化响应式数据的原理。
深入解析 vue 3 获取响应式数据
weixin_52648900的博客
08-14 1077
vue3获取响应式数据的方法，ref、reactive、readonly、computed
vue响应式原理
2401_84341405的博客
07-27 1102
理解 MVVM 结构：Vue 是一个典型的 MVVM 框架，它将数据层、视图层和数据-视图层进行了良好的分离，使得前端开发更加清晰和高效掌握响应式原理：响应式原理是 Vue 实现数据驱动视图的关键，通过数据劫持和依赖追踪，实现了数据与视图之间的自动更新，为构建动态、交互式的用户界面提供了强大的支持熟悉实现方式：在 Vue 2 中，响应式原理是基于实现的，它具有一定的局限性和缺点，比如无法监听数组变化和兼容性问题。而在 Vue 3 中，采用了基于Proxy的方式，提供了更灵活、高效的响应式系统。
Vue3.0数据响应式原理详解
10-16
当响应式数据发生变化时，与之关联的`ReactiveEffect`会被调度执行，从而触发视图的更新。 4. **Dep和KeyToDepMap**: `Dep`是一个Set对象，用于存储所有依赖于某个响应式对象的`ReactiveEffect`。`KeyToDepMap`则是...
Vue data的数据响应式到底是如何实现的
10-15
那么，Vue数据响应式到底是如何实现的呢？ 首先，我们要明白，Vue并不能直接监听到像`data: { n: 0 }`这样声明的数据变化。Vue通过`Object.defineProperty()`这个JavaScript API来实现数据响应性。`Object....
稍微学一下Vue的数据响应式（Vue2及Vue3区别）
10-15
在Vue框架中，数据响应式是一项核心特性，它使得开发者无需直接操作DOM，只需更改数据，视图就会自动更新。本文将深入探讨Vue2和Vue3在数据响应式上的实现方式及其差异。 **数据响应式原理** 数据响应式的核心目标...
你了解vue3.0响应式数据怎么实现吗
10-16
在Vue 3.0中，Proxy代理创建的响应式对象不仅支持简单的数据属性，还包括了对嵌套对象和数组的深度监听，这避免了Vue 2.x中对嵌套对象需要使用$set手动触发更新的不便。同时，Vue 3.0中的响应式系统也解决了之前版本...
Vue2 中对数组进行操作时需要注意什么
最新发布
m0_73882020的博客
09-06 284
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
开发适合el-dialog的拉伸拖拽自定义指令和适配自定义的图片查看组件
鹤渺的星球
09-05 1065
我之前有开发过一个图片查看的组件，这个组件可在单页面打开，也可以在弹窗里打开，但是弹窗因为是比较固定，所以有一些局限性，只能拖拽，不能改变弹窗大小，于是有了开发【可以拖拽改变大小的弹窗】组件。通过自定义指令，实现弹窗的移动拖拽拉伸等功能动态计算弹窗的位置与尺寸，因为弹窗的位置和尺寸是动态计算的，涉及到鼠标的实时位置和弹窗初始位置之间的关系。代码也贴上去了，仅供参考。
Chapter 11 脚手架Vue CLI使用步骤
2302_80253507的博客
09-06 236
Vue CLI 是 Vue.js 官方提供的一个全局命令工具，旨在帮助开发者快速创建和管理 Vue 项目。它为开发者提供了一个标准化的项目结构，并集成了 webpack 配置，使得开发过程更加高效和便利。
vue仓库的使用
weixin_58462329的博客
09-02 761
Vue仓库通常指的是使用Vue CLI创建的项目仓库，它包含了项目的所有源代码、配置文件以及依赖项。
手写 Vue Router 中的 Hash 模式和 History 模式
书呆子ITme
09-06 631
通过手写简化版的Vue Router，我们深入理解了Hash 模式和History 模式的实现原理。Hash 模式依赖于hashchange事件，而 History 模式依赖于pushState和API。两种模式各有优缺点，可以根据项目需求选择合适的路由模式。Hash 模式：简单、无需服务器配置，但URL不美观，对SEO不友好。URL美观且符合SEO要求，但需要服务器支持。
Vue3.0响应式数据实现原理探析
"Vue3.0的响应式数据实现基于ES6的Proxy和Reflect对象，提供了更加高效且灵活的数据响应机制。" Vue3.0在响应式数据的实现上进行了重大改进，它弃用了Vue2.x中的`Object.defineProperty()`方法，转而采用ES6引入的`...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值