vue.js updated hook keeps on rerendering page without update in the state

Question

我正在尝试从 api 获取数据，同时在 state 发生变化时使用 updated() 重新呈现，其中包含提取 url，但更新的挂钩保持呈现，而 state 没有任何变化。

我使用点击事件来监视 state 更改，但更新发生时没有 state 更改

模板

  <template>
    <div class="overlay" ref="overlay">
    </div>
    <div class="home">
      Hello People
     
      <form @submit.prevent="handleSearch">
        <input type="text" name="search" v-model="search" />
        <button type="submit">Search</button>
      </form>
      <select name="" id="select" v-model="select" v-on:change="selectclass">
        <option value="">Default</option>
        <option value="Breaking+Bad">Breaking Bad</option>
        <option value="Better+Call+Saul">Better call saul</option>
      </select>
      <div class="charlist">
        <div class="gridlist" v-for="char in chars" :key="char.id">
          <div>
            <div class="subgrid">
              <img class="img" :src="char.img" alt="alt">
              <p> {{ char.name }} </p>
              <router-link :to="{ name: `Details`, params: {id: char.char_id} }">
              <button> more</button>
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>

剧本

  <script>
    export default {
      name: 'Home',
      components: {
    
      },
      data() {
        return {
          url: 'https://www.breakingbadapi.com/api/characters?limit=10&offset=10',
          search: "",
          select: "",
          chars: []
        }
      },
      methods: {
        handleSearch() {
          this.url = `https://www.breakingbadapi.com/api/characters?name=${this.search}`
        },
        selectclass() {
          this.url = `https://www.breakingbadapi.com/api/characters?category=${this.select}`
        },
        getData() {
          fetch(this.url)
            .then(res => res.json())
            .then(data => {
              this.chars = data
              console.log(this.chars)
            })
        }
      },
      mounted() {
        this.getData()
      },
      updated() {
        console.log(this.url)
        this.getData()
      }
    }
  </script>

Answer 1

我认为正在发生的是一个循环 - Component Inits -> Gets Data -> Updated 被调用，它再次触发 getData，然后循环重复。

据我所知，只要设置了变量值，Vue 就会重新渲染，它不关心旧值和新值是否相同。

要解决这个问题，您应该只在selectclass和handleSearch中调用getData 。 这应该会阻止循环开始。

查看文档中的警告： https://vuejs.org/api/options-lifecycle.html#updated