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

相关推荐
耶啵奶膘27 分钟前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^2 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie2 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic3 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿3 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具4 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161774 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test5 小时前
js下载excel示例demo
前端·javascript·excel
Yaml45 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事5 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro