vue中vm.$set函数的使用

苏Sue酥

已于 2022-04-07 15:33:51 修改

阅读量1.3k

点赞数 1

分类专栏： vue 文章标签： vue

于 2021-01-13 15:52:50 首次发布

原文链接：https://blog.csdn.net/weixin_43242112/article/details/108561587?ops_request_misc=%25257B%252522request%25255Fid%252522%25253A%252522161051903416780258095833%252522%25252C%252522scm%252522%25253A%25252220140713.130102334.pc%25255Fall.%252522%25257D&request

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

关于vm.$set函数的使用

1.使用场景(原因)

在这里插入图片描述
VUE-响应式

2.不是响应式的例子

<template>
  <div>
    <div v-for="(item, index) in list" :key="index">{{ "num" }}-{{ item }}</div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      list: [1, 10, 11],
    };
  },
  mounted() {
    this.list[0] = 9;
    console.log('this.list',this.list)
  },
};
</script>

在这里插入图片描述

页面渲染没有改变，表明通过下标操作数组并不是响应式的
data中的数据已经发生了改变

3.vm.$set函数使用

在这里插入图片描述
vue官方教程

<template>
  <div>
    <div v-for="(item, index) in list" :key="index">{{ "num" }}-{{ item }}</div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      list: [1, 10, 11],
    };
  },
  mounted() {
    // this.list[0] = 9;
    this.$set(this.list, 0, 9);
    console.log("this.list", this.list);
  },
};
</script>

在这里插入图片描述

数据改变，页面渲染效果也一致，可见vm.$set利用下标来操作数组值得变化是响应式的

4.数组下标操作的相关误区

一：数组通过下标操作数组中的对象是响应式的

vue的内部针对于数组中对象会通过Object.defineProperty来对素有的属性进行劫持，来完成相应式的数组中对象元素是响应式的

二：此时的数组list通过下标操作去个改变值，页面渲染效果也一致，为什么？

在this.list[0]=9之后，data中的数据已经发生变化，但是视图没有更新
执行到this.info[0].name=''花花"时，vm发现这是响应式操作，就会执行内部的observe中的setter，然后将通知Dep（订阅器）发生了变化，最终更新视图。
在对象的更新过程中，检测到数组list也进行了变化，但是视图没有进行更新，此时vm会将list的变化也更新到视图。

vue底层实现