002：vue使用object.defineProperty来更新数据

àì夳堔傛蜴生んèń 2024-03-16 09:23 42阅读 0赞

vue+element UI

![在这里插入图片描述][32d2a1d099334cfba6adc4f84dd79e22.png_pic_center]

第001个

查看专栏目录: [按照VUE知识点][VUE] \------ [按照element UI知识点][element UI]

[echarts，openlayers，cesium，leaflet，mapbox，d3，canvas 免费交流社区 ][echarts_openlayers_cesium_leaflet_mapbox_d3_canvas _]  
  
  
**专栏目标**  
在vue和element UI联合技术栈的操控下，本专栏提供行之有效的源代码示例和信息点介绍，做到灵活运用。

> （1）提供vue2的一些基本操作：安装、引用，模板使用，computed，watch，生命周期(beforeCreate，created,beforeMount，mounted, beforeUpdate，updated, beforeDestroy，destroyed，activated，deactivated，errorCaptured，components，)、 $root , $parent , $children , $slots , $refs , props, $emit , eventbus ,provide / inject, Vue.observable, $listeners, $attrs, $nextTick , v-for, v-if, v-else,v-else-if，v-on，v-pre，v-cloak，v-once，v-model， v-html, v-text, keep-alive，slot-scope， filters, v-bind，.stop, .native, directives，mixin，render，国际化，Vue Router等  
> （2）提供element UI的经典操作：安装，引用，国际化，el-row，el-col，el-button，el-link，el-radio，el-checkbox ，el-input，el-select, el-cascader, el-input-number, el-switch,el-slider, el-time-picker, el-date-picker, el-upload, el-rate, el-color-picker, el-transfer, el-form, el-table, el-tree, el-pagination,el-badge,el-avatar,el-skeleton, el-empty, el-descriptions, el-result, el-statistic, el-alert, v-loading, $message, $alert, $prompt, $confirm , $notify, el-breadcrumb, el-page-header,el-tabs ,el-dropdown,el-steps,el-dialog, el-tooltip, el-popover, el-popconfirm, el-card, el-carousel, el-collapse, el-timeline, el-divider, el-calendar, el-image, el-backtop，v-infinite-scroll， el-drawer等

#### 本文章目录 ####

*   *  Object.defineproperty可以接收三个参数
     *  示例效果图：
     *  示例源代码

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

Object.defineProperty（）可以为对象的属性添加特性，每一个被添加过的属性，都会拥有属于自己的getter和setter。 **正是有了getter和setter，可以实现数据驱动视图，数据实时绑定的效果**。

### Object.defineproperty可以接收三个参数 ###

Object.defineProperty(obj, prop, descriptor)

> obj 要定义属性的对象（目标对象）  
> prop 要定义或修改的属性的名称  
> descriptor 目标对象属性的一些特征（是一个对象）  
> descriptor 下有6个参数  
> 参数1：  
> value:属性值  
> 参数2：  
> 　　writable：对象属性值是否可以被修改 true允许 false不允许  
> 参数3：  
> 　　configurable:对象属性是否可以被删除 true允许 false不允许  
> 参数4：  
> 　　enumerable:对象属性是否可被枚举  
> 参数5：  
> get():给一个属性提供getter方法，当访问这个对象的属性值得时候触发该方法  
> 参数6：  
> set():给一个属性提供setter方法，当设置属性值得时候触发该方法

### 示例效果图： ###

![在这里插入图片描述][86c4741c09494f1baa685c3f06288f8a.png_pic_center]

### 示例源代码 ###

<template> 
        <div class="container"> 
            <h3>vue+openlayers: 利用setSource显示隐藏地图</h3> 
            <p>文件来源：https://xiaozhuanlan.com/vue-openlayers</p> 
            <h4> 
                <el-button type="primary" size="mini" @click="yes">显示结果</el-button> 
            </h4> 
            <div id="vue-openlayers"></div> 
        </div> 
    </template> 
    <script> 
        import 'ol/ol.css'; 
        import Map from 'ol/Map'; 
        import View from 'ol/View'; 
        import TileLayer from 'ol/layer/Tile'; 
        import OSM from 'ol/source/OSM'; 
        import {
        transform } from 'ol/proj' 
        export default {
         
            name: 'show', 
            data() {
         
                return {
         
                    map: null, 
                    source: new OSM(),               
                } 
            }, 
            methods: {
         
                yes(){
         
                    let test={
        name:'111'} 
                    this.observe(test) 
                    test.name = 'newName' 
                    console.log(test.name,1, 'ddd') 
                    test.name = 'newName2' 
                    console.log(test.name, 2,'ddd') 
                }, 
                 
                observe(data){
         
                    if (!data || typeof data !== 'object') {
         
                      return; 
                    } 
                    // 取出所有属性遍历 
                    Object.keys(data).forEach(key =>{
         
                        this.defineProp(data, key, data[key]) 
                    }) 
                }, 
     
                defineProp (data, key, childVal) {
         
                    this.observe(childVal) //监听子属性 
                    // 精华部分 
                    Object.defineProperty(data, key, {
         
                    set: (newVal) => {
         
                        console.log(`哈哈哈监听到啦！原来的值是${
          childVal}, 变为${
          newVal}`) 
                        childVal = newVal; 
                    }, 
                    get: () =>{
         
                        return childVal 
                    }, 
                    enumerable: true, // 可枚举 
                    configurable: false, // 不能再define 
                    }) 
                }, 
                 
         
                 
                initMap() {
         
                    this.map = new Map({
         
                        layers: [ 
                           new TileLayer({
         
                               source:this.source 
                           }) 
                        ], 
                        target: 'vue-openlayers', 
                        view: new View({
         
                            center: transform([86, -37.0902],"EPSG:4326","EPSG:3857"), 
                            projection: "EPSG:3857", 
                            zoom: 2, 
                        }), 
                    }); 
                }, 
            }, 
            mounted() {
         
                this.initMap(); 
             
            }, 
        } 
    </script> 
     
    <style scoped> 
        .container {
         
            width: 840px; 
            height: 570px; 
            margin: 50px auto; 
            border: 1px solid #42B983; 
        } 
        #vue-openlayers {
         
            width: 800px; 
            height: 400px; 
            margin: 0 auto; 
            border: 1px solid #42B983; 
            position: relative; 
        } 
    </style>

[32d2a1d099334cfba6adc4f84dd79e22.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/68a3c570985748edb48d6dd43bb8fbf4.png
[VUE]: https://blog.csdn.net/cuclife/article/details/131138955
[element UI]: https://blog.csdn.net/cuclife/article/details/131140113
[echarts_openlayers_cesium_leaflet_mapbox_d3_canvas _]: https://bbs.csdn.net/forums/giser
[86c4741c09494f1baa685c3f06288f8a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/0a8d7fb363e74ee4aa79aa9027411ed5.png