数据代理
<h1><center>Object.defineProperty方法</center></h1>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
&lt;title&gt;回顾Object.defineProperty方法&lt;/title&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;../js/vue.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&quot;root&quot;&gt;
&lt;h1&gt;Hello{{name}}&lt;/h1&gt;
&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
let number=18
let person={
name:'张三',
sex:'男',
}
Object.defineProperty(person,'age',{
//value: 18,
//加上下面这个配置项,后加的属性才可以被枚举到
// enumerable:true,
//后加的age默认无法修改,加上下面这个配置项,才可以被修改
// writable:true,
//后加的age默认无法删除,加上下面这个配置项
configurable:true,
//当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值
get(){
console.log('有人读取了age属性')
return number
},
//当有人修改person的age属性时,get函数(setter)就会被调用,且会受到修改的具体值
set(value){
console.log('有人修改了age属性,且值是',value)
number=value
}
})
for(let key in person){
console.log(person[key])
}
const vm=new Vue({
data(){
return{
name:'HXY'
}
}
})
vm.$mount('#root')
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<h1>对比两种方式</h1>
<h2>1</h2>
<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=ec7445c618be86cb155893f26f313058&amp;file=file.png" alt="" />
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=86e0c0798492332fcb51368a12b4aa6b&amp;file=file.png" alt="" /></p>
<h2>2</h2>
<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=8f0af833eada75ef61beafc584ae93ea&amp;file=file.png" alt="" />
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=ec7422856ec4248984e986ab8dad44cf&amp;file=file.png" alt="" /></p>
<h2>这里age的颜色淡一点,代表这时age这个属性是不可枚举的</h2>
<h2>几个基本的配置项</h2>
<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=132d0a1485ce3c7163c1f33d1636f6c2&amp;file=file.png" alt="" /></p>
<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=47c71dfa5de1e899efdb44f4209fb09a&amp;file=file.png" alt="" /></p>
<h2>如果这样写,那结果就是在执行一次后再更新number,age不会随着更新</h2>
<h2>想要改变number后age自动更新,需要用另一种方式</h2>
<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=a83328b6fb0c0c7bbbeb5f5512ef7eb3&amp;file=file.png" alt="" /></p>
<h1><center>理解数据代理</center></h1>
<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=7249b24129b6cecbc8287441e27d6901&amp;file=file.png" alt="" /></p>
<h1><center>Vue中的数据代理</center></h1>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
&lt;title&gt;Vue中的数据代理&lt;/title&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;../js/vue.js&quot;&gt;&lt;/script&gt;
&lt;style&gt;
body {
background-image: url(../image/Screenshot_20230916_223141.jpg);
background-size: 100%;
}
div {
color :rgba(90%,10%,50%,50%)
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!--
1.Vue中的数据代理:
通过vm对象来代理data对象中属性的操作(读/写)
2.Vue中数据代理的好处:
更加方便的操作data中的数据
3.基本原理:
通过OBject.defineProperty()把data对象中所有的属性添加到vm上
为每一个添加到vm上的属性,都指定一个getter/setter
在getter/setter内部去操作(读/写)data中对应的属性
--&gt;
&lt;div id=&quot;root&quot;&gt;
&lt;h2&gt;学校名称:{{name}}&lt;/h2&gt;
&lt;h2&gt;学校地址:{{address}}&lt;/h2&gt;
&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
let data={
name:'YSU',
address:'秦皇岛'
}
const vm=new Vue({
//平时写的data实际上vue自动补上了data中各个属性的getter和setter
data //vm._data=options.data=data
})
vm.$mount('#root')
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=d2b61a09ee4afd7bbd4c9cbfad34e4e0&amp;file=file.png" alt="" />
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=5ac13bd3856792a7d9f891208ace9294&amp;file=file.png" alt="" /></p>
<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=904c2dc56b5505d0df8fbe26e7b2e32c&amp;file=file.png" alt="" /></p>
<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=eb14fa047ac3c4424c9813ea8581878d&amp;file=file.png" alt="" /></p>
<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=50e222eef71eb368204ab6a26f50f46b&amp;file=file.png" alt="" /></p>
<h1>图片演示</h1>
<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=9e522d95656af4a6272b14454e7b9a09&amp;file=file.png" alt="" /></p>