日常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 小时前
从0到1学习Vue框架Day03
前端·javascript·vue.js·学习·ecmascript
前端与小赵1 小时前
vue3中 ref() 和 reactive() 的区别
前端·javascript·vue.js
魔云连洲1 小时前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
专注VB编程开发20年1 小时前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css
IT_陈寒1 小时前
Redis性能提升50%的7个关键优化策略,90%开发者都不知道第5点!
前端·人工智能·后端
Hilaku1 小时前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范
pubuzhixing1 小时前
Canvas 的性能卓越,用它解决一个棘手问题
前端
weixin_456904271 小时前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js
伍哥的传说1 小时前
Vue 3.6 Alien Signals:让响应式性能飞跃式提升
前端·javascript·vue.js·vue性能优化·alien-signals·细粒度更新·vue 3.6新特性
永日456702 小时前
学习日记-HTML-day51-9.9
前端·学习·html