Object.defineProperty Vue双向数据绑定的原理

https://www.cnblogs.com/libin-1/p/6893712.html

 

 

<script type="text/javascript">
	//使用数据的时候，要先对数据进行劫持
	//使用Object.defineProperty 劫持数据，把属性转换成访问器的方式
	//Object.defineProperty 定义属性，也可在原有属性上描述
    //Object.defineProperty(o: Object, p: string, attrs: any) //对象 字符串 其他 
	/*
	getter 获取属性触发的
	setter 设置属性触发
	*/
	var data = {
		title:'新闻'
	};
	data.title = '1';
	Object.defineProperty(data,'old',{
		value:'new' //描述
	})//重新添加
	console.log(data) // Object {title: "1", old: "new"}

	Object.defineProperty(data,'title',{
		value:'重新定义',
		configurable:true,// 是否允许删除对象属性
		writable:false, //是否能改写 下面重新定义的title不生效(false)
		enumerable:false //对对象是否可以进行遍历 都可改true
	})//原有基础上定义
	data.title = '我又变了'
	console.log(data.title) //重新定义
	//删除对象属性
	delete data.title
/
	var val = 'new1';
	Object.defineProperty(data,'title',{
		get(){
			console.log('访问数据');
			return val
		},
		set(newValue){
			console.log(newValue);
			val = newValue;
		}
	})
	data.title = 'newValue1';//作为参数传到set
	console.log(data.title);//newValue1
	</script>