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

相关推荐
花楸树15 分钟前
前端搭建 MCP Client(Web版)+ Server + Agent 实践
前端·人工智能
wuaro15 分钟前
RBAC权限控制具体实现
前端·javascript·vue
专业抄代码选手20 分钟前
【JS】instanceof 和 typeof 的使用
前端·javascript·面试
用户00798136209720 分钟前
6000 字+6 个案例:写给普通人的 MCP 入门指南
前端
用户876128290737424 分钟前
前端ai对话框架semi-design-vue
前端·人工智能
干就完了127 分钟前
项目中遇到浏览器跨域前端和后端解决方案以及大概过程
前端
我是福福大王29 分钟前
前后端SM2加密交互问题解析与解决方案
前端·后端
实习生小黄33 分钟前
echarts 实现环形渐变
前端·echarts
_未知_开摆40 分钟前
uniapp APP端在线升级(简版)
开发语言·前端·javascript·vue.js·uni-app
sen_shan1 小时前
Vue3+Vite+TypeScript+Element Plus开发-02.Element Plus安装与配置
前端·javascript·typescript·vue3·element·element plus