<div id="app">
    <!--表单元素 input checkbox textarea radio select-->
    <!--vue的指令 指令"directive" 只是dom上的行间属性，所有指令都以v-开头,
    value属性默认情况下会被vue忽略掉，checked selected 都没有意义-->
    <input type="text" v-model="msg">
    <!--v-对应的值都是一个变量-->
    <!--v-model会将msg的值赋予给输入框，输入框的值改变会影响数据-->
    <!--原理 object.defineProperty ES5-->

</div>

object.defineProperty()方法会直接在一个对象上定义一个新属性，挥着修改一个对象的现有属性，应返回这个对象

语法

object.defineProperty(obj,prop,descriptor)

参数

obj:要在其上定义属性对象
 prop:要定义或修改的属性的名称
 descriptor:将要被定义或修改的属性描述符
 返回值：传递给函数对象

描述

允许添加或修改对象的属性，通过赋值来添加普通属性会创建在属性枚举期间显示的属性（for…in或者object.keys方法）这些值可以被改变，也可以被删除，这种方法允许额外的细节从默认值改变，默认情况下，使用object.defineProperty()添加的属性值是不可以改变的

数据描述符和存取描述符

configurable:
 当改属性的值为true的时候，该属性的描述符才能被改变，同时该属性也能从对应的对象上被删除，默认为false

enumerable：
 当且仅当该属性的enumerable为true时，该属性才能够出现在对象的枚举属性中。默认为 false。

value
 该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined。

writable
 当且仅当该属性的writable为true时，value才能被赋值运算符改变。默认为 false。

get
 一个给属性提供 get 的方法，如果没有 get 则为 undefined。该方法返回值被用作属性值。默认为 undefined。

set
 一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。该方法将接受唯一参数，并将该参数的新值分配给该属性。默认为 undefined。

<div id="app">
    <input type="text" id="input">
</div>

<script>
let obj={};
let temp={};
Object.defineProperty(obj,"name",{
    get(){  //取obj的name属性会触发get方法
        return temp["name"];
    },
    set(val){//给obj赋值会触发set方法
        temp["name"]=val; //改变temp的结果
        input.value=obj.name; //将值赋予输入框
    }
});
input.value=obj.name; //页面一加载时，会调用get方法
input.addEventListener("input",function () {  //等待输入框的变化
    obj.name=this.value;  //当值发生变化时会调用set方法
})

//Object.defineProperty(obj,"name",{
//    configurable:true,  //是否可配置
//    writable:true,//是否可写
//    enumerable:true,  //是否可枚举
//    value:1
//})
</script>

转载请注明： Vue教程中文网 - 打造国内领先的vue学习网站-vue视频,vue教程,vue学习,vue培训 » vue中object.defineProperty方法的详解