Vue3数据更新数组、对象的方法,使用setup(),Vue.reactive

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()">    button>
  {{myHobbies}}
  <button @click="jjj">    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: `

{{ id }} - {{ title }}

`
// }) app.mount('#app');
script> body> html>

深入理解Vue的数据响应式

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

ps:script里面使用import会报错
Vue3数据更新数组、对象的方法,使用setup(),Vue.reactive_第1张图片
在这里插入图片描述
加上:
在这里插入图片描述
依然没用
在这里插入图片描述

是什么原因?import怎么用?

最后只能用下面的方法:

在这里插入图片描述

你可能感兴趣的:(vue)