vue中vm.$set函数的使用

关于vm.$set函数的使用

(1) 使用场景(原因)

(2) 不是响应式的例子

(3) vm.$set函数使用

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

(5) 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的变化也更新到视图。

五、vm.$set改变对象的属性

vue深入理解响应式

转载来自
相关内容