vue项目坑之记录数据更新页面不更新问题

vue项目之记录数据更新页面不更新问题（1）

遇到这个问题很奇怪，可以对JS的学习不够扎实，亦或者对vue内部原理不够清晰，说说我遇到的问题吧，先来几个截图说明情况；

改后效果：

问题点

使用map方法时，之前是return item，其实数据打印的都一样的，并看不出来任何变化，现在改为如下写法

还有一处地方是对这个数据里面的树形进行了修改，改了如下写法：

问了大佬，说可能是深浅拷贝的原因，让我多尝试打印看看数据和页面

注意点，如果子组件使用父组件传入的对象格式数据，watch监听一定要深度监听才行如下：

<template>
  <div style="margin-top: 20px">
    <div @click="addItem(item.id)">点击新增</div>
    <div @click="deleteItem(item.id)">点击删除</div>
    <div>
      {{ contentSetForm.id }}-{{ contentSetForm.value }}-{{
        contentSetForm.label
      }}
    </div>
    <div>{{ contentSetForm.delFlag }}</div>
    {{ item }}
    {{ contentSetForm }}
  </div>
</template>
<script>
export default {
  name: "formItem",
  props: {
    item: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      contentSetForm: {
        id: this.item.id,
        value: this.item.value,
        label: this.item.label,
        isAdd: this.item.isAdd,
        ...this.item,
      },
    };
  },
  watch: {
    // 这种写法不会触发深度监听
    // item(newVal) {
    //   this.contentSetForm = {
    //     id: newVal.id,
    //     value: newVal.value,
    //     label: newVal.label,
    //     isAdd: newVal.isAdd,
    //     ...newVal,
    //   };
    //   console.log(newVal);
    // },
    // 这种写法会触发深度监听
    item: {
      //普通变量
      handler(newVal) {
        this.contentSetForm = {
          id: newVal.id,
          value: newVal.value,
          label: newVal.label,
          isAdd: newVal.isAdd,
          ...newVal,
        };
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  computed: {},
  methods: {
    addItem(value) {
      this.$emit("addItem", value);
    },
    deleteItem(value) {
      this.$emit("deleteItem", value);
    },
  },
};
</script>
<style lang="scss" scoped>
</style>

目前是解决了数据更新，页面展示的也更新；有些地方还是需要进一步摸索才行；

有看到或者知道的大神的，都可以讨论一下，感谢！！！

vue项目之记录数据更新页面不更新问题（2）

第二种情况是数组下标的形式

data中的数据如下：

数组对象的下标对应的值修改，数据更新，页面可以触发更新，但是数组字符串的下标对应的值修改，数据更新，但是页面没有触发更新；

问题点

如果同时改两处呢？

页面和数据都同时更新。。。

翻阅其他解释：视图更新是全局的，一个地方更新会使其他修改的地方更新；

通过splice方法去修改数组的值；

changeList() {
      // this.list[0].check = !this.list[0].check
      // console.log(this.list)
      // this.listTwo[0] = 3333;
      this.listTwo.forEach((item, idx) => {
        if(item == 2){
          this.listTwo.splice(idx, 1, 3333);
        }
      })
      // 或者如下写法 Vue.set()
      // Vue.set(this.listTwo, 0,'3333'); // 第一个参数是需要改变的数组，第二个参数要改变的数组下标，第三个参数改变后的值
      // 如果是 json 数组
      //Vue.set(this.list, 0, { check: true })
      console.log(this.listTwo);
    }

注解

//splice是拼接的意思，splice("数组下标，起始位置","删除位数","拼接字符、整数。。。")三个参数，可灵活选择
let list = [1, 2, 3, 4];
//indexOf("数组中的值"),返回该值在数组中的索引，既下标

//1.修改数组元素
list.splice(list.indexOf(2), 1, 0);
//结果：[1, 0, 3, 4],完成数组值修改

//2.在自定义位置插入其他元素到数组中
list.splice(list.indexOf(0), 0, 2);
//结果：[1, 2, 0, 3, 4],删除0个，在该下标处插入2

//3.删除数组元素
list.splice(list.indexOf(0), 1);
//结果：[1, 2, 3, 4],删除该下标对应的值