svelte 3 中 attributechangedcallback() 的等价物是什么，或者当我更改它时如何重新加载我的组件 属性

Question

我制作了一个带有嵌套组件的应用程序，应用程序在我提供输入时调用该组件，输入是 URL，这就是组件 属性，现在我可以制作 http请求并且我有我的列表，但是当我更改输入 (URL) 并重新点击时，什么也没有发生。

我尝试绑定我的 属性 (URL)，但没有成功。 我试过 beforeUpdate() 和 update() 之后，同样.. 没有用。 我在我的组件中试过这个“”，也没有用。 我试图销毁我的组件并创建另一个具有新值 URL 的组件，它有效但不是解决方案..

data.svelte（组件）

export let url;

function getData(){
  const Http = new XMLHttpRequest();
  Http.open("GET", url);
  Http.send();
...
}

App.svelte

function newdata() {
    Data = new data({
      target: document.querySelector(".list"),
      props: {
        url: "",
      }
    });
  }

onMount(async () => {
    newdata();
  });

  function update() {
    //data.$destroy();
    url_input = document.querySelector("input").value;
    Data.url = url_input;
    //newdata();
  }

应用Html

<input type="url"/>
<button on:click={update}>Find</button>

<div class="list" />

我希望组件在我更改其 属性 时重新加载，但是当我验证时，url 已更改但我的组件没有重新加载。

Answer 1

您不需要为 Svelte 3 执行此操作。输入字段中的 url 可以作为 prop 传递给数据组件。当输入字段中的输入发生变化并按下按钮时，更新 prop 将触发组件查询新数据并更新受影响的 HTML 个元素。

我认为他们还没有 v2 到 v3 的迁移指南。浏览一下 Tutorial 可能对您有所帮助，这样您就能了解发生了什么变化。

这是我创建的 REPL 展示过程。我使用 json 占位符来获取特定用户（ID 范围 1-10）并显示姓名、电子邮件和返回的 json 数据。