Vue3数据更新数组、对象的方法，使用setup（），Vue.reactive

最新推荐文章于 2024-07-23 19:35:12 发布

世界还赞颂沉默吗

最新推荐文章于 2024-07-23 19:35:12 发布

阅读量1.2w

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_43574741/article/details/118569668

版权

我的大学专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了Vue3中通过proxy实现数据响应式的变化，强调了如何在Vue3中直接更新数组和对象而无需额外操作，如使用`push`。示例代码展示了在Vue3中如何创建并修改响应式数据，以及在`setup`函数中使用`reactive`创建响应式对象。同时，文章提到了在`mounted`钩子中对数据的修改能正确触发视图更新的问题。

摘要由CSDN通过智能技术生成

Vue3通过proxy，真正彻底实现了数据的响应式，所以对于data()里面的数据，只要更改就能自动更新视图。哪怕是数组增加或者对象增加属性，也能监测，无需像vue2一样去用push等。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例-数组更新 </title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
  {{sites}}
  <button @click="hhh()">&nbsp;&nbsp;&nbsp;&nbsp;</button>
  {{myHobbies}}
  <button @click="jjj">&nbsp;&nbsp;&nbsp;&nbsp;</button><!-- 无效，显示未渲染 -->
</div>
 
<script>
	const Site = {
		
		data() {			
			return {
			  sites: {'af':1,'bf':'hhh'}
			}
		},
	    setup() {
			const myHobbies =  Vue.reactive({
				'af':1,
				'bf':'hhh'
			});
			function jjj(){
			   myHobbies['af'] = 2;
			  }
			return {
				myHobbies // 导出响应式数组
			}
		},
		mounted() {
			console.log(this.myHobbies); // 是一个proxy
			console.log(this.sites); // 是一个proxy
			this.myHobbies['bf'] = 'sing'; // 视图更新
			this.sites['bf'] = 'sing'; // 视图更新
		},
	
		methods:{
			hhh:function(){
				console.log(this.sites);
				this.sites['af']=2;
		    }
		}
	}
	 
	const app = Vue.createApp(Site);
	 
	// app.component('site-info', {
	//   props: ['id','title'],
	//   template: `<h4>{{ id }} - {{ title }}</h4>`
	// })
	 
	app.mount('#app');
</script>
</body>
</html>

深入理解Vue的数据响应式

vue3-setup-基本使用-理解它的作用

ps：script里面使用import会报错
在这里插入图片描述

加上：

依然没用

是什么原因？import怎么用？

最后只能用下面的方法：

在这里插入图片描述

世界还赞颂沉默吗

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Vue3数据更新数组、对象的方法，使用setup（），Vue.reactive

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 测试实例-数组更新 </title><script src="https://unpkg.com/vue@next"></script></head><body><div id="app"> {{sites}} <button @
复制链接

扫一扫

专栏目录