日常bug中碰到的vue响应式问题

前言:

本人前端菜鸟,看过去的"史山"代码,发现的响应式问题,虽然明确知道如何避免这个bug,但是还是对产生这样bug的具体原因非常感兴趣,我现在也是一知半解,这次发帖解答的同时也是寻求帮助,希望有大佬能从响应式的角度讲解一下

正文:

造成bug的demo非常简单,需要vue2 + ant-design-vue即可

js 复制代码
<template>
<div id="app">
   username:<a-input v-model="formData.username"  /><br/>
   one:<a-input v-model="formData.one"  /><br/>
   two:<a-input v-model="formData.two"  /><br/>
   addOne:<a-input v-model="formData.addOne"  /><br/>
   addTwo:<a-input v-model="formData.addTwo"  /><br/>
</div>
<template>
<script>
const InitData = {
  username: "zsh",
  one: "one",
  two: "two",
  deep: {
    addOne: "addOne",
    addTwo: "addTwo"
  }
}

export default {
  name: 'App',
  components: {
  },
  data () {
    return {
      formData: {
        username: '',
        one: "",
        two: "",
        addOne: "",
        addTwo: "",
      }
    }
  },
  mounted() {
    this.Init()
  },
  methods: {
    Init() {
      this.formData = InitData
      this.formData.addOne = InitData.deep.addOne
      this.formData.addTwo = InitData.deep.addTwo
    },
    
  },
}
</script>

bug现象

当修改addOne的input内容,失焦后显示的数据就会恢复原样,之后如果修改one或two这些初次赋值对象最外层有的属性时,就会把之前修改的内容显示出来

我的主观分析

这里先允许我做个说明,以下只是我的主观分析,并不一定正确,也希望有大佬能够指正和讲解。

首先,Init函数的赋值,只是让username、one、two、deep建立了响应式,addOne和addTwo是没有被重写set与get的方法的。

我们知道v-model是value属性和input事件的语法糖,addOne输入框的数值发生改变,触发input事件,也修改了formData中的addOne属性,但是因为此属性没有响应式(在input事件赋值触发其set函数中,没有改变副作用函数来改变模版用到的值),不能让传递到input内部的属性改变,所以失焦后会恢复原样,但为什么是失焦触发就不太明白了

在修改已经建立响应式的属性时,触发响应式时,之前已经修改的属性addOne也会连带着触发模版数据修改。(这里也是我也太确定,希望有大佬能够指点)

最后

这次学习整理了日常碰到的小bug,其实在初次赋值就不应该整体赋值,而是结偶出对应属性在依次赋值就可以避免。但是这对背后的响应式原因也是让我学习不少,最后也希望大佬对我的解答做出指正和更细致的分析,谢谢大家了

相关推荐
浮桥1 小时前
vue3实现pdf文件预览 - vue-pdf-embed
前端·vue.js·pdf
七夜zippoe1 小时前
前端开发中的难题及解决方案
前端·问题
Hockor2 小时前
用 Kimi K2 写前端是一种什么体验?还支持 Claude Code 接入?
前端
杨进军2 小时前
React 实现 useMemo
前端·react.js·前端框架
海底火旺2 小时前
浏览器渲染全过程解析
前端·javascript·浏览器
你听得到112 小时前
揭秘Flutter图片编辑器核心技术:从状态驱动架构到高保真图像处理
android·前端·flutter
驴肉板烧凤梨牛肉堡2 小时前
浏览器是否支持webp图像的判断
前端
Xi-Xu2 小时前
隆重介绍 Xget for Chrome:您的终极下载加速器
前端·网络·chrome·经验分享·github
摆烂为不摆烂2 小时前
😁深入JS(九): 简单了解Fetch使用
前端
杨进军3 小时前
React 实现多个节点 diff
前端·react.js·前端框架