vue2入门---＞数据代理，事件，计算属性，监视属性

已于 2022-09-02 21:27:52 修改
阅读量377 收藏
点赞数 1
分类专栏： vue2&vue3 文章标签： vue.js javascript 前端
于 2022-09-02 20:05:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52385631/article/details/126668902
版权
本文详细讲解了JavaScript中的Object.defineProperty用于数据代理，包括设置get和set方法实现属性读写。接着介绍了数据代理的概念，并通过Vue中的实例演示如何在组件间传递和操作数据。同时涵盖了事件的基本使用、修饰符及键盘事件，最后对比了计算属性和监视属性的用法。
摘要由CSDN通过智能技术生成

1. 数据代理

1.1 Object.defineproperty

1.1.2 介绍

当中有两个方法get，set

当有人读取person的age属性时，get函数(getter)就会被调用，且有返回值

当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值

1.1.3 代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>回顾Object.defineproperty方法</title>
	</head>
	<body>
		<script type="text/javascript" >
			let number = 18
			let person = {
				name:'张三',
				sex:'男',
			}

			Object.defineProperty(person,'age',{
				// value:18,
				// enumerable:true, //控制属性是否可以枚举，默认值是false
				// writable:true, //控制属性是否可以被修改，默认值是false
				// configurable:true //控制属性是否可以被删除，默认值是false

				//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
				get(){
					console.log('有人读取age属性了')
					return number
				},

				//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
				set(value){
					console.log('有人修改了age属性，且值是',value)
					number = value
				}

			})

			// console.log(Object.keys(person))

			console.log(person)
		</script>
	</body>
</html>

1.2 何为数据代理

1.2.1 介绍

<!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）-->

1.2.2 代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>何为数据代理</title>
	</head>
	<body>
		<!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）-->
		<script type="text/javascript" >
			let obj = {x:100}
			let obj2 = {y:200}

			Object.defineProperty(obj2,'x',{
				get(){
					return obj.x
				},
				set(value){
					obj.x = value
				}
			})
		</script>
	</body>
</html>

1.3 Vue中的数据代理

1.3.1 介绍

<!-- 
                1.Vue中的数据代理：
                            通过vm对象来代理data对象中属性的操作（读/写）
                2.Vue中数据代理的好处：
                            更加方便的操作data中的数据
                3.基本原理：
                            通过Object.defineProperty()把data对象中所有属性添加到vm上。
                            为每一个添加到vm上的属性，都指定一个getter/setter。
                            在getter/setter内部去操作（读/写）data中对应的属性。
         -->

1.3.2 代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue中的数据代理</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>学校名称：{{name}}</h2>
			<h2>学校地址：{{address}}</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				address:'宏福科技园'
			}
		})
	</script>
</html>

2. 事件

2.1 事件的基本使用

2.1.1 介绍

<!-- 
事件的基本使用：
1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
2.事件的回调需要配置在methods对象中，最终会在vm上；
3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；
        -->

2.1.2 代码示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>事件的基本使用</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
    <h2>欢迎来到{{name}}学习</h2>
    <!-- <button v-on:click="showInfo">点我提示信息</button> -->
    <button @click="showInfo1">点我提示信息1（不传参）</button>
    <button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
</div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    const vm = new Vue({
        el: '#root',
        data: {
            name: '尚硅谷',
        },
        methods: {
            showInfo1(event) {
                // console.log(event.target.innerText)
                // console.log(this) //此处的this是vm
                alert('同学你好！')
            },
            showInfo2(event, number) {
                console.log(event, number)
                // console.log(event.target.innerText)
                // console.log(this) //此处的this是vm
                alert('同学你好！！')
            }
        }
    })
</script>
</html>

2.2 事件修饰符

2.2.1 介绍

<!-- 
                Vue中的事件修饰符：
                        1.prevent：阻止默认事件（常用）；
                        2.stop：阻止事件冒泡（常用）；
                        3.once：事件只触发一次（常用）；
                        4.capture：使用事件的捕获模式；
                        5.self：只有event.target是当前操作的元素时才触发事件；
                        6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
        -->

2.2.2 代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>事件修饰符</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
		<style>
			*{
				margin-top: 20px;
			}
			.demo1{
				height: 50px;
				background-color: skyblue;
			}
			.box1{
				padding: 5px;
				background-color: skyblue;
			}
			.box2{
				padding: 5px;
				background-color: orange;
			}
			.list{
				width: 200px;
				height: 200px;
				background-color: peru;
				overflow: auto;
			}
			li{
				height: 100px;
			}
		</style>
	</head>
	<body>
		
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<!-- 阻止默认事件（常用） -->
			<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

			<!-- 阻止事件冒泡（常用） -->
			<div class="demo1" @click="showInfo">
				<button @click.stop="showInfo">点我提示信息</button>
				<!-- 修饰符可以连续写 -->
				<!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
			</div>

			<!-- 事件只触发一次（常用） -->
			<button @click.once="showInfo">点我提示信息</button>

			<!-- 使用事件的捕获模式 -->
			<div class="box1" @click.capture="showMsg(1)">
				div1
				<div class="box2" @click="showMsg(2)">
					div2
				</div>
			</div>

			<!-- 只有event.target是当前操作的元素时才触发事件； -->
			<div class="demo1" @click.self="showInfo">
				<button @click="showInfo">点我提示信息</button>
			</div>

			<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
			<ul @wheel.passive="demo" class="list">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>

		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods:{
				showInfo(e){
					alert('同学你好！')
					// console.log(e.target)
				},
				showMsg(msg){
					console.log(msg)
				},
				demo(){
					for (let i = 0; i < 100000; i++) {
						console.log('#')
					}
					console.log('累坏了')
				}
			}
		})
	</script>
</html>

2.3 键盘事件

2.3.1 介绍

<!-- 
                1.Vue中常用的按键别名：
                            回车 => enter
                            删除 => delete (捕获“删除”和“退格”键)
                            退出 => esc
                            空格 => space
                            换行 => tab (特殊，必须配合keydown去使用)
                            上 => up
                            下 => down
                            左 => left
                            右 => right

                2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

                3.系统修饰键（用法特殊）：ctrl、alt、shift、meta
                            (1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
                            (2).配合keydown使用：正常触发事件。

                4.也可以使用keyCode去指定具体的按键（不推荐）

                5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
        -->

2.3.2 代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>键盘事件</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		Vue.config.keyCodes.huiche = 13 //定义了一个别名按键

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods: {
				showInfo(e){
					// console.log(e.key,e.keyCode)
					console.log(e.target.value)
				}
			},
		})
	</script>
</html>

3. 计算属性

3.1 计算属性基础

3.1.1 介绍

<!-- 
计算属性：
1.定义：要用的属性不存在，要通过已有属性计算得来。
2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
3.get函数什么时候执行？
    (1).初次读取时会执行一次。
    (2).当依赖的数据发生改变时会被再次调用。
4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
5.备注：
    1.计算属性最终会出现在vm上，直接读取使用即可。
    2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
         -->

3.1.2 代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>姓名案例_计算属性实现</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		
		<!-- 准备好一个容器-->
		<div id="root">
			姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
			测试：<input type="text" v-model="x"> <br/><br/>
			全名：<span>{{fullName}}</span> <br/><br/>
			<!-- 全名：<span>{{fullName}}</span> <br/><br/>
			全名：<span>{{fullName}}</span> <br/><br/>
			全名：<span>{{fullName}}</span> -->
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
				x:'你好'
			},
			methods: {
				demo(){
					
				}
			},
			computed:{
				fullName:{
					//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
					//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
					get(){
						console.log('get被调用了')
						// console.log(this) //此处的this是vm
						return this.firstName + '-' + this.lastName
					},
					//set什么时候调用? 当fullName被修改时。
					set(value){
						console.log('set',value)
						const arr = value.split('-')
						this.firstName = arr[0]
						this.lastName = arr[1]
					}
				}
			}
		})
	</script>
</html>

3.2 计算属性简写

3.2.1 代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>姓名案例_计算属性实现</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
			全名：<span>{{fullName}}</span> <br/><br/>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
			},
			computed:{
				//完整写法
				/* fullName:{
					get(){
						console.log('get被调用了')
						return this.firstName + '-' + this.lastName
					},
					set(value){
						console.log('set',value)
						const arr = value.split('-')
						this.firstName = arr[0]
						this.lastName = arr[1]
					}
				} */
				//简写
				fullName(){
					console.log('get被调用了')
					return this.firstName + '-' + this.lastName
				}
			}
		})
	</script>
</html>

4. 监视属性

4.1 基础使用

4.1.1 介绍

<!-- 
                监视属性watch：
                    1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
                    2.监视的属性必须存在，才能进行监视！！
                    3.监视的两种写法：
                            (1).new Vue时传入watch配置
                            (2).通过vm.$watch监视
         -->

4.1.2 代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>天气案例_监视属性</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>今天天气很{{info}}</h2>
			<button @click="changeWeather">切换天气</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			/* watch:{
				isHot:{
					immediate:true, //初始化时让handler调用一下
					//handler什么时候调用？当isHot发生改变时。
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				}
			} */
		})

		vm.$watch('isHot',{
			immediate:true, //初始化时让handler调用一下
			//handler什么时候调用？当isHot发生改变时。
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		})
	</script>
</html>

4.2 深度监视

4.2.1 介绍

<!-- 
                深度监视：
                        (1).Vue中的watch默认不监测对象内部值的改变（一层）。
                        (2).配置deep:true可以监测对象内部值改变（多层）。
                备注：
                        (1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
                        (2).使用watch时根据数据的具体结构，决定是否采用深度监视。
         -->

4.2.2 代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>天气案例_深度监视</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>今天天气很{{info}}</h2>
			<button @click="changeWeather">切换天气</button>
			<hr/>
			<h3>a的值是:{{numbers.a}}</h3>
			<button @click="numbers.a++">点我让a+1</button>
			<h3>b的值是:{{numbers.b}}</h3>
			<button @click="numbers.b++">点我让b+1</button>
			<button @click="numbers = {a:666,b:888}">彻底替换掉numbers</button>
			{{numbers.c.d.e}}
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
				numbers:{
					a:1,
					b:1,
					c:{
						d:{
							e:100
						}
					}
				}
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			watch:{
				isHot:{
					// immediate:true, //初始化时让handler调用一下
					//handler什么时候调用？当isHot发生改变时。
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				},
				//监视多级结构中某个属性的变化
				/* 'numbers.a':{
					handler(){
						console.log('a被改变了')
					}
				} */
				//监视多级结构中所有属性的变化
				numbers:{
					deep:true,
					handler(){
						console.log('numbers改变了')
					}
				}
			}
		})

	</script>
</html>

4.3 监视属性_简写

4.3.1 代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>天气案例_监视属性_简写</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>今天天气很{{info}}</h2>
			<button @click="changeWeather">切换天气</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			watch:{
				//正常写法
				/* isHot:{
					// immediate:true, //初始化时让handler调用一下
					// deep:true,//深度监视
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				}, */
				//简写
				/* isHot(newValue,oldValue){
					console.log('isHot被修改了',newValue,oldValue,this)
				} */
			}
		})

		//正常写法
		/* vm.$watch('isHot',{
			immediate:true, //初始化时让handler调用一下
			deep:true,//深度监视
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		}) */

		//简写
		/* vm.$watch('isHot',(newValue,oldValue)=>{
			console.log('isHot被修改了',newValue,oldValue,this)
		}) */

	</script>
</html>

骑台风走
关注
专栏目录
【前端开发---Vue2】史上最详细的Vue入门教程(四)
共同学习，共同成长
05-05 1453
​本篇将分享vue的最核心知识----【computed计算属性】【计算属性的完整写法】【watch侦听器】【computed与methods的区别】等等
Java前端Vue-2(快速入门)
weixin_45764461的博客
09-11 1142
前端开发模式的发展 静态页面 最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务的到客户端单向流通。开发人员也只关心页面的样式和内容即可。 异步刷新，操作DOM 1995年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言，随着JavaScript的诞生，我们可以操作页面的DOM元素及样式，页面有了一些动态的效果，但是依然是以静态为主。 ajax盛行：2005年开始，ajax逐渐被前端开发人员所重视，因为不用刷新页面就可以更新页面的数据和渲染效果。此时的
Vue 中数据的代理
weixin_46760658的博客
04-23 287
vue2 let obj = { userNmae: '小红', pass: '1234' } let hijack = {} for (let i in obj) { Object.defineProperty(hijack, i, { get() { return obj[i] } set(newValue){ obj[i] = newValue } }) } hijack.userName = '小蓝' console.log(hijack.userName
Vue2数据代理
最新发布
weixin_47822796的博客
03-26 354
在 Vue 中，数据代理是指 Vue 实例对其 data 属性中的数据进行了代理，使得我们可以直接通过 Vue 实例访问 data 中的数据，而不需要直接操作 data 对象本身。
vue学习笔记（二）
weixin_59695963的博客
07-30 201
每个目录下都会有一段总结 一、el和data的两种写法 data与el的2种写法 1.el有2种写法 (1).new Vue时候配置el属性。 (2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。 2.data有2种写法 (1).对象式 (2).函数式 如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。 3.一个重要的原则： 由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再.
vue2知识点：数据代理
刘大猫
05-20 1528
文章目录一、何为数据代理二、vue中的数据代理三、回顾Object.defineProperty() 一、何为数据代理 数据代理：通过一个对象代理对另一个对象中属性的操作(读/写) let obj = {x:100} let obj2 = {y:200} Object.defineProperty(obj2, "x", { get() { return obj.x }, set(value) { .
vue2的数据代理及Object.defineProperty方法
weixin_49986131的博客
04-06 560
数据代理必须知道Object.defineProperty方法，在vue的底层很多都用到了它，比如数据代理、数据劫持、计算属性 let person = { name:'张三', sex:'男' } 需求：现在往张三添加添加一个age：18 //传三个参数，第一个参数对象（person），第二个参数属性名age，第三个参数配置项{}（最常用的是value） Object.defineProperty(person,'age',{ value:18 }) console.log(person)
1. Vue从入门到精通（第一章 vue核心）
cjhxydream的博客
05-24 2927
Vue基础1. Vue简介1.1 Vue是什么？1.2 Vue的作者以及迭代版本1.3 Vue的特点2. 搭建Vue开发环境2.1 安装Vue的方式2.1.1 第一种安装方式：直接使用1. Vue简介 1.1 Vue是什么？ Vue是一套用于构建用户界面的渐进式JavaScript框架 构建用户界面：将数据变成用户可以看到的界面 渐进式：是指Vue可以自底向上逐层的应用 对于简单应用，只需要轻量小巧的核心库 对于复杂应用，可以引入各种Vue插件 1.2 Vue的作者以及迭代版本 1.3 Vue
Vue2+Vue3基础入门到实战项目（一）—— 课程学习笔记
upgrade_bro的博客
08-21 2555
2023新版Vue2+Vue3基础入门到实战项目。Vue快速上手！
Vue简单入门案例——个人学习笔记-使用IDEA（非教程）
zcylxzyh的博客
07-26 2131
前言： 这是我的第二篇个人学习的心得体会，这篇主要记录了对vue的简单入门，让大家可以更加了解vue的强大之处，希望大家多多包涵，共同进步（这个不是教程哦，主要是个人的学习笔记~）。 1.Vue简介： Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于...
vue的数据代理
weixin_30662109的博客
07-20 497
1. vue数据代理: data对象的所有属性的操作(读/写)由vm对象来代理操作2. 好处: 通过vm对象就可以方便的操作data中的数据3. 实现: 1). 通过Object.defineProperty(vm, key, {})给vm添加与data对象的属性对应的属性 2). 所有添加的属性都包含get/set方法 3). 在get/set方法中去操作data中对应的属性属性描述符： ...
初学vue（全家桶）-第2天（vue2）：数据代理、事件处理
lalala_dxf的博客
05-20 648
初学vue 1、数据代理 1.1 Object.defineProperty方法 语法：Object.defineProperty(obj, prop, descriptor; 参数说明： 1、obj：目标对象（必需） 2、prop：需定义或者修改的属性的名字（必需） 3、descriptor：目标属性所拥有的特性（必需） 返回值：所传入的函数的对象，及方法中的第一个参数obj 作用：修改属性的特性。 并且该方法设置的属性是不可枚举的，但可以通过enumerable特性修改成可枚举的。 <!DOCTY
vue-数据代理2
m0_61222138的博客
02-04 584
数据代理：就是通过一个对象代理另一个对象中属性的操作。简单点说就是我们通常操作对象的属性都是本对象.属性名操作。而数据代理的话就是用另一对象去访问另一个对象的属性进行访问或者修改。 <script> let obj ={x:100} let obj2={y:200} Object.defineProperty(obj2,'x',{ //借助defineProperty对obj2进行操作，给它加一个属性
Vue2实现数据代理机制
weixin_73368873的博客
10-30 355
数据代理是通过一个对象对另外一个对象的属性进行的读写的行为。
vue2 数据监听 数据代理
qwe19991123的博客
08-12 260
vue2 数据代理 我们控制台打印出vue实例来看一下,name和age是我在data中设置的两个属性 展开后是这样的 data中设置的两个属性name和age在vue实例中其实是对应的_data中的两个属性,但是为什么在vue实例上也有name和age两个属性呢,因为vue在设计的时候为了方便我们在html标签中使用模板语法,如果不在vue实例上的话可能我们的模板语法要成为这种了{{_data.name}}{{_data.age}}现在我们只需要{{name}}{{age}}就可以了,将_data中的
vue2中的数据代理和数据劫持
m0_60394632的博客
07-20 1834
学习vue2的时候在了解原理时，会遇到数据代理和数据劫持，搞明白来了这一点就可以知道为什么`vue2中更改数据，页面可以跟着变`
Vue2响应式原理（二）数据代理
平平无奇小码农的博客
03-18 1419
目录1、什么是数据代理2、vue中的数据代理总结 1、什么是数据代理 数据代理就是 通过一个对象代理对另一个对象中属性的操作（读 / 写） 举例说明： 有一个对象 obj ，obj上有一个属性x，以后我想访问这个x，直接obj.x访问即可，想修改obj.x也是非常容易。但是此时我还有一个对象 obj2，我希望这个obj2 也可以访问和修改 obj 身上的 x。那么这就是通过一个对象 obj2 代理对另一个对象 obj 中属性的操作。 接下来我们来实现上述的需求： let obj = { x: 100 };
vue框架原理-2实现数据代理
LRQQHM的博客
03-08 147
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l
Vue学习计划-Vue2--Vue核心（二）Vue代理方式
我愿化作繁星
11-30 1012
Vue2-代理方式
Vue动态属性绑定详解：v-bind指令
"本文主要介绍Vue.js中的动态属性数据绑定，特别是v-bind指令的使用方法和常见应用场景。" Vue.js是一个流行的前端JavaScript框架，用于构建用户界面。在Vue中，数据绑定是其核心特性之一，它允许开发者将数据模型...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

骑台风走

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值