vue 中的資料代理
阿新 • • 發佈：2022-04-03
目的：通過 vm 物件來代理 data 物件中的屬性操作（讀/寫）
好處：更加方便的操作 data 中資料，讓編碼更方便
<!-- 有資料代理 -->
<h2>姓名：{{name}}</h2>
<h2>性別：{{sex}}</h2>
<!-- 如果 Vue 沒有資料代理 -->
<h2>姓名：{{_data.name}}</h2>
<h2>性別：{{_data.sex}}</h2>
原理：
通過 Object.dedineProperty() 把 data 物件的所有屬性新增到 vm 上
為每一個新增到 vm 的屬性，都指定一個 getter/setter
在 getter/setter 中操作 data 中對應的屬性
例項
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue中的資料代理</title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="root"> <h2>姓名：{{name}}</h2> <h2>性別：{{sex}}</h2> </div> <script type="text/javascript"> new Vue({ el: '#root', data() { return { name: '張三', sex: '男' } } }) </script> </body> </html>