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>
·
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: `<h4>{{ id }} - {{ title }}</h4>`
// })
app.mount('#app');
</script>
</body>
</html>
ps：script里面使用import会报错
加上：
依然没用
是什么原因？import怎么用？
最后只能用下面的方法：
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)