05.vue3组件化开发（一）

原创

于 2022-08-16 15:11:54 发布 · 592 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

本文介绍了Vue3中关于对象的引用、浅拷贝、深拷贝的概念，并深入讲解了v-model的用法，包括其在不同表单元素上的应用、值绑定、以及各种修饰符的使用。此外，还阐述了Vue的组件化开发思想，强调组件化在构建项目中的重要性，并详细说明了组件的命名规则和局部注册方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对象的引用、浅拷贝、深拷贝

对象的引用

// 对象的引用
			// info指向对象存储空间的地址
			const info ={name :"phoebe",age:18};
			const obj = info;  //obj引用info指向的空间地址;info和obj指向的是同一个对象
			info.name="lili"; //修改info指向的对象的内容,obj指向的内容同样会发生变化
			console.log(obj.name)  // 结果为:lili

浅拷贝

const info ={name :"phoebe",age:18};
			// 浅拷贝方法有很多,只是其中一种
			const obj =Object.assign({},info);   //将info中的内容复制一份,同时开辟了一个新的存储空间
			info.name="lili";  //修改的是info中的name,不影响obj中的内容
			console.log(obj.name);  //结果为:phoebe
// 如果对象中存储的还是对象
			const info ={name :"phoebe",age:18,friend:{name:"cindy",age:19}};
			const obj =Object.assign({},info);  //同时将friend对象所指地址复制给obj
			info.friend.name="lili";
			console.log(obj.friend.name);  //结果为:lili

深拷贝

<!-- 深拷贝 -->
		<script>
			const info ={name :"phoebe",age:18,friend:{name:"cindy",age:19}};
			const obj = JSON.parse(JSON.stringify(info));
			info.friend.name="lili";
			console.log(o