0
点赞
收藏
分享

微信扫一扫

Vue项目上this.$set的用法

本篇文章主要讲解Vue项目中,this.$set这个api的用法.


我们都知道当Vue的data里边声明的对象,如果向对象中添加新的属性,更新此属性的值,视图是不会更新的。官方是这么说的

因为 Vue 无法探测普通的新增 property 比如:

this.myObject.newProperty =  'hi'


这个时候,我们就需要使用set api,这个api就是像响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。下面我们看看官方对这个api的说明:

Vue.set( target, propertyName/index, value )

  • 参数:
  • {Object | Array} target 要更改的数据源(可以是一个对象或者数组)
  • {string | number} propertyName/index 要更改的具体数据 (索引)
  • {any} value 重新赋的值
  • 返回值:设置的值。

我们怎么使用呢?下面是一段代码,点击按钮,把list第一个值改变,


<template>
&nbsp;&nbsp; <div&nbsp;id="app">
&nbsp;&nbsp;&nbsp;&nbsp; <div>{{&nbsp;list&nbsp;}} </div>
&nbsp;&nbsp;&nbsp;&nbsp; <button&nbsp;@click="changeVal">改变值 </button>
&nbsp;&nbsp; </div>
</template>

<script>
export&nbsp;default&nbsp;{
&nbsp;&nbsp;name:&nbsp;"App",
&nbsp;&nbsp;data()&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;list:&nbsp;[
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id:&nbsp;1,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;"用户中心"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id:&nbsp;2,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;"首页"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]
&nbsp;&nbsp;&nbsp;&nbsp;};
&nbsp;&nbsp;},
&nbsp;&nbsp;methods:&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;changeVal()&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.list[0]&nbsp;=&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id:&nbsp;2,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;"改变后"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(this.list);
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;}
};
</script>

<style> </style>


我们控制台看,实际上data里面的值已经改变,但是视图的值依然是没有变,这只是个简单的例子,我相信实际项目上肯定会有这种需求。

Vue项目上this.$set的用法_响应式

这种情况怎么办,这时,set这个api就用到了。我们改造下changeVal方法。



changeVal()&nbsp;{

&nbsp;&nbsp;

this.$ set( this. list,&nbsp; 0,&nbsp;{

&nbsp;&nbsp;&nbsp;&nbsp;id:&nbsp;2,

&nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;"改变后"

&nbsp;&nbsp;});

&nbsp;&nbsp;console.

log( this. list);


},


再次看控制台和界面

Vue项目上this.$set的用法_vue_02

视图已经改变,上面这个例子是改变属性,没有新增,新增属性也是一个道理,因为新增的属性,Vue是无法探测的,如果新增属性,用法和上面一样。


Vue项目上this.$set的用法_响应式_03


就到这里了,这个api也没什么可说的,官网都是一笔带过。



听说一键三联的朋友都暴富了



举报

相关推荐

0 条评论