The Object.defineProperty() method defines a new property directly on an object, or modifies an existing property of an object, and returns this object.
Object.defineProperty() can add features to the properties of the object, and each added property will have its own getter and setter. It is with getters and setters that data-driven views and real-time data binding can be achieved .
Object.defineproperty can receive three parameters
Object.defineProperty(obj, prop, descriptor)
obj The object whose attribute is to be defined (target object)
prop The name of the attribute to be defined or modified
descriptor Some characteristics of the attribute of the target object (an object)
There are 6 parameters under the descriptor
Parameter 1:
value: attribute value
Parameter 2:
writable: object Whether the attribute value can be modified true allows false not allowed
Parameter 3:
configurable: whether the object attribute can be deleted true allows false not allowed
Parameter 4:
enumerable: whether the object attribute can be enumerated
Parameter 5:
get(): Provide for an attribute The getter method, which is triggered when the value of the property of the object is accessed
Parameter 6:
set(): Provides a setter method for a property, which is triggered when the value of the property is set
Example renderings:
sample source code
<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>