Vue.set()

当我们使用vue开发时经常会遇到当vue实例已经创建好了，有时候需要再次给数据赋值时，并不能在视图中改变在vue文档中注意事项写着如果在实例创建之后添加新的属性到实例上，它不会触发视图更新因此比如我们修改一个数组其中的一个值，或者添加一条数据时，不管用。<div id="app"><p v-for="item in items" v-once>{{item}}</p&

一晌贪欢i

2839人浏览 · 2020-10-14 20:44:31

一晌贪欢i · 2020-10-14 20:44:31 发布

当我们使用vue开发时经常会遇到当vue实例已经创建好了，有时候需要再次给数据赋值时，并不能在视图中改变。
set主要用于操作数据没有定义在data里的,因为没有双向绑定,所以视图不更新。
在vue文档中注意事项写着如果在实例创建之后添加新的属性到实例上，它不会触发视图更新
一般定义在data里的数据,由于双向绑定,操作后会发生改变,但是对于数组Vue不能检测,请看官方文档这里详细解释。
因此比如我们修改一个数组其中的一个值，或者添加一条数据时，不管用。

<div id="app">
	<p v-for="item in items">{{item}}</p>
	<button @click="btn()">添加</button>
</div>

new Vue({
	el:'#app',
	data:{
		items:['a', 'b', 'c']
	},
	methods:{
		btn(){
			this.items[1] = 'd'
			console.log(this.items);
		}
	}
})

原本页面如下图
在这里插入图片描述
点完添加按钮后,页面如下图

发现数据修改了,但是并没有反映到视图上.。

所以接下来就到了Vue.set()方法的使用场景了
Vue.set() 方法
Vue.set( target, key, value )
target：要更改的数据源(可以是对象或者数组)
key：要更改的具体数据
value ：重新赋的值

参数1：要修改的对象
参数2：属性
参数3：属性的值是啥
返回值：已经修改好的值

有三种方法可以实现，分别是Vue.set, vm.$set, replace

var vm =new Vue({
	el:'#app',
	data:{
		items:['a', 'b', 'c']
	},
	methods:{
		btn2(){
			Vue.set(this.items, 1, 'e')
			console.log(this.items)
		}
	}
})

在这里插入图片描述

点击添加2按钮,发现数据和视图都改变了。

 var vm =new Vue({
	el:'#app',
	data:{
		items:['a', 'b', 'c']
	},
	methods:{
		btn3(){
			this.$set(this.items, 1, 'e')
			console.log(this.items)
		}
	}
})

vm.$set
点击添加3按钮同样数据和视图都被修改了。
详细代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
  {{count}}
  <p v-for="item in items" >{{item}}</p>
  <button @click="btn()">添加</button>
  <button @click="btn2()">添加</button>
  <button @click="btn3()">添加</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
  el:'#app',
  data:{
    items:['a', 'b', 'c'],
    count:0  ,
  },
  methods:{
    btn(){
      this.items[1] = 'd'
      console.log(this.items);
      console.log(this.count++)
    },
    btn2(){
      Vue.set(this.items, 1, 'e')
      console.log(this.items)
    },
    btn3(){
      this.$set(this.items, 1, 'f')
      console.log(this.items)
    }
  }
})

  </script>
</body>
</html>

2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

必看！未来AI智能体的发展方向，架构师如何应对技术瓶颈？

AI智能体正从任务导向的工具向自主协作的伙伴进化，其核心驱动力是人类对“通用智能”的追求。泛化能力弱（依赖特定数据）、因果推理缺失（停留在关联分析）、系统复杂度失控（模块协同困难）。本文从第一性原理出发，拆解智能体的本质需求（适应环境+实现目标），构建“感知-推理-行动-学习”的闭环架构，并结合神经符号混合范式具身学习伦理安全设计等前沿技术，为架构师提供突破瓶颈的系统方案。