做课件可赚钱的网站,网站备案接入方式,大连牛人网络推广有限公司,建设企业网站官网u盾接着上一节#xff0c;学一学vue中的数据代理。学vue这几天#xff0c;最大的感受就是#xff0c;名词众多#xff0c;听得发懵。。不过#xff0c;深入理解之后#xff0c;其实说得都是一回事。
在Vue中#xff0c;数据代理是指在实例化Vue对象时#xff0c;将data对…接着上一节学一学vue中的数据代理。学vue这几天最大的感受就是名词众多听得发懵。。不过深入理解之后其实说得都是一回事。
在Vue中数据代理是指在实例化Vue对象时将data对象中的属性代理到Vue实例上以便在模板中直接访问和修改data对象中的属性。
看起来很晕其实在vue2学习笔记6 - 初步了解vue的实例和原型中已经用到并且我当时有一个疑问 红框中便是应用我们可以直接访问对象中的属性而不必通过$data来访问。
那么我的疑问的答案也来了简化模板中访问和修改data中的属性的操作。通过数据代理我们可以直接在模板中使用this来访问和修改data中的属性而无需使用this.data来访问和修改。
下面说说稍微底层一点的东西。 在vue实例中定义了两个属性name和address。
在console中打印出vue实例vm我们可以从中看到_data中有两个属性name和address。这是我们定义的。 然而在vm中外层我们同样可以看到两个属性不带$或_即不是vue的内置属性或方法而是用户自定义的。 其实我们并没有在vm下定义这两个属性只是在data中定义的外面这两个便是vue通过object.defineProperty自动给我们添加的并且也调用了setter、getter方法这便是vue的数据代理。 需要注意的是数据代理只能代理data对象中的属性无法代理data对象中的嵌套属性对象。如果需要代理嵌套属性可以使用computed属性来实现。另外数据代理也无法代理Vue实例上已有的属性和方法所以自定义属性时不要占用vue关键字。
