• Vue中的数据代理

    Vue中的数据代理是什么？

    首先什么是数据代理？
    let obj = {x:100}
let obj2 = {y:200}

Object.defineProperty(obj2,'x',{
	get(){
		return obj.x
	},
	set(value){
	obj.x = value
	}
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    Obj2中没有属性x,而Obj对象中有属性x,但是可以通过操作obj2来获取到x的值以及改变x的值，这是不是很神奇呢？这一切的功劳都是因为使用了Object.defineProperty这个API下的getter和setter这俩个方法。这便是数据代理

    Vue 中是如何实现数据代理的呢？
    <body>
	<!-- 准备好一个容器-->
	<div id="root">
		<h2>名称：{{name}}</h2>
		<h2>地址：{{address}}</h2>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
	const vm = new Vue({
		el: '#root',
		data: {
			name: '白的夜',
			address: '前端乐园'
		}
	})
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    这段代码相信大家并不陌生，这就是最简单的vue的一个入门模板，但是这里存在数据代理，且听博主慢慢道来。。。当你完成以上代码时，vue都经历了哪些呢？

    经历的过程：

    1. 用户将数据写到Vue配置项options下data中。

    2. Vue将data中的数据进行数据劫持，将其拷贝至Vue对象实例下的_data下

    3. 此时vm没有name.adddress这些属性，要想在模板中使用他们，只能通过 __data.name或__data.address来获取

    4. Vue为_data中的数据做数据代理，在vm实例下添加name,address属性。当有人获取name/address值时，调用getter

      方法，获取_data中的name数据，当有人修改name/address中的数据时，调用setter方法，获取修改的值并重新复制给_data中的数据

    5. 此时，vm实例有name/address属性，可以直接使用vm.name，而不需要使用_data.name.

    这便是Vue中的数据代理…

  • 相关阅读:
    cx3588 Rockchip_基于 DRM 框架的 HDMI 开发指南
    对前端项目打包产物分析入库的好处
    typescript
    vim搜索功能
    web3之女巫（sybil）
    vRealize Operations Manager 安全补丁修复
    Cypress（1）——如何安装及测试类型简要介绍
    ZXMPS385 中兴全新原装产品 规格及开局指导
    ClickHouse副本节点数据损坏恢复
    TensorFlow模型训练常见案例
  • 原文地址：https://blog.csdn.net/weixin_63228975/article/details/127683754