数据代理的说明》

最新推荐文章于 2025-12-05 08:37:05 发布

原创最新推荐文章于 2025-12-05 08:37:05 发布 · 96 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

Vue初专栏收录该内容

24 篇文章

订阅专栏

本文介绍了JavaScript中使用`Object.defineProperty()`方法创建数据属性，并通过示例展示了属性的枚举、可写及可配置性。接着，通过Vue框架的实例，解析了Vue如何利用数据劫持（setter和getter）实现响应式更新，以及在数据修改时的注意事项。

数据代理

<script>
	let y={
       name:'wzm',
       age:22
   }
   Object.defineProperty(y,'sex'{
		value:'男'，
		enumerable:true, //控制属性是否可以枚举
		writable:true,   //控制属性是否可以修改，默认为false
		configurable:true. //控制属性是否可以删除，默认为false
})
</script>

例

<script>
       let num=25
       let y={
           name:'wzm',
           sex:'男'

       }
       Object.defineProperty(y,'age',{
        // value:22,
        // enumerable:true,  //控制属性age可以枚举
        // writable:true,    //控制属性age可以修改
        // configurable:false //控制age属性是否可以删除
        get(){

            //获取时调用get()
            return num
        },

           //修改时调用set()

        set(value){
			num=value
        }

       })

       for (let key in y) {
         console.log(y[key]);
       }

    </script>

<script>
	let obj={
		name:'lzy',
		age:18
  }
  	const vm = new Vue({
		el:'#app',
		data:obj
})
vm.name='wzm';
console.log(data.name); // lzy
vm._data.name='wzm';    
console.log(data.name);// wzm

//通过vm._data.name可以修改，原因在于_data中有getter和setter(数据劫持)
</script>