浅析vm.$set方法

2022-02-03 10:33:25 阅读：179 来源： 互联网

标签：set arrayVal 新增 vm objVal array 浅析 change

先上官方文档：

vm.$set( target, propertyName/index, value )

参数：

{Object | Array} target

{string | number} propertyName/index

{any} value

返回值：设置的值。

用法：

这是全局 Vue.set 的别名。

参考：Vue.set

set方法简单的来说是给一个目标（Object|Array）新增一个属性
下面来一段代码示意

let array=[];
vm.$set(array,0,'newVal')
//结果 ['newVal'];

这和

let array=[];
array[0]='newVal';
//结果 ['newVal'];

形式上完全一致,究竟区别如何？
接下来用一个小项目的形式告诉你set有什么用。
template模板部分

 <div id="app">
    <button @click="change">change</button>
     {{arrayVal}}  -- {{objVal}}
  </div>

javascript部分

export default {
  name: "App",
  data: function() {
    return {
      arrayVal: [],
      objVal:{}
    };
  },
  methods: {
    change() {
      this.arrayVal[0]="新增内容"
      this.objVal['newItem']='新增内容'
      // this.$set(this.arrayVal,0,'新增内容')
      // this.$set(this.objVal,'item','新增内容')
    },
  },
  components: {
  },
};

网页界面部分
改变前.png

当你点击change时，界面完全没有任何变化，但当你看控制台却发现数据确确实实填充了进去。
改变后.png

这是vue的锅吗？其实不是
之所以会出现这个现象是因为直接ES5已经舍弃了Object.observe方法，Vue无法监听对象属性删除和新增，故即使使用deep方法监听对象prop也没有用。
打开注释

 methods: {
    change() {
      // this.arrayVal[0]="新增内容"
      // this.objVal['newItem']='新增内容'
      this.$set(this.arrayVal,0,'新增内容')
      this.$set(this.objVal,'item','新增内容')
    },
  },

再次点击

数据就正确的渲染到了界面上。

总结：vm.$set方法可以使原来对象和数组的无法监听变的可监听，使数据正常渲染。

标签：set,arrayVal,新增,vm,objVal,array,浅析,change
来源： https://www.cnblogs.com/moushicheng/p/15861232.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

浅析vm.$set方法