1. 程式人生 > 其它 >vue學習---Object.defineproperty方法(理解資料代理 簡單實現資料雙向資料繫結)

vue學習---Object.defineproperty方法(理解資料代理 簡單實現資料雙向資料繫結)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>回顧Object.defineproperty方法</title>
    </head>
    <body>
        <script type="text/javascript" >
            let number = 18
            let person = {
                name:
'張三', sex:'', } Object.defineProperty(person,'age',{ // value:18, // enumerable:true, //控制屬性是否可以列舉,預設值是false // writable:true, //控制屬性是否可以被修改,預設值是false // configurable:true //控制屬性是否可以被刪除,預設值是false //
當有人讀取person的age屬性時,get函式(getter)就會被呼叫,且返回值就是age的值 get(){ console.log('有人讀取age屬性了') return number }, //當有人修改person的age屬性時,set函式(setter)就會被呼叫,且會收到修改的具體值 set(value){ console.log('有人修改了age屬性,且值是
',value) number = value } }) // console.log(Object.keys(person)) console.log(person) </script> </body> </html>