svelte 3 中的 attributechangedcallback() 的等价物是什么

Question

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

我试图绑定我的属性 (URL)，但没有奏效。我试过beforeUpdate() 和afterupdate()，同样.. 没有工作。我在我的组件中尝试了这个“”，但也没有用。我试图销毁我的组件并使用 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 可以作为道具传递给 Data 组件。当输入字段中的输入发生变化并且按钮被按下时，更新 prop 将触发组件查询新数据并更新受影响的 HTML 元素。我不相信他们有 v2 到 v3 的迁移指南。通读本教程可能会对您有所帮助，以便您了解发生了哪些变化。这是我创建的显示过程的REPL。我使用 jsonplaceholder 获取特定用户（ID 范围 1-10）并显示返回的姓名、电子邮件和 json 数据。