是否可以在svelte 3中创建自定义生命周期？
是的，Svelte 3 允许开发者创建自定义生命周期钩子函数。Svelte 是一个现代的前端框架，它使用了编译时的方法将组件转换为高效的 JavaScript 代码。在 Svelte 中，生命周期钩子函数是特殊的函数，它们在组件的生命周期中的不同阶段被调用。
Svelte 3 提供了以下几个自定义生命周期钩子函数：
oncreate：在组件实例被创建后立即调用。可以在这里执行一些初始化操作，比如获取数据或者添加事件监听器。onupdate：在组件实例的状态更新后调用。可以在这里执行一些响应式更新的操作，比如更新 DOM 或者触发一些副作用。ondestroy：在组件实例被销毁前调用。可以在这里执行一些清理操作，比如取消事件监听器或者释放资源。
使用自定义生命周期钩子函数可以实现更精细的控制和操作组件的行为。例如，可以在 oncreate 钩子函数中初始化一些数据，并在 onupdate 钩子函数中根据数据的变化更新 DOM。
对于 Svelte 3，腾讯云并没有专门的相关产品或者介绍链接地址。但腾讯云提供了一系列云计算服务，可以帮助开发者部署和扩展 Svelte 应用。例如，可以使用腾讯云的云服务器（CVM）来部署 Svelte 应用，使用对象存储（COS）来存储静态资源，使用负载均衡（CLB）来实现高可用性等。
请注意，这只是一个示例回答，实际上 Svelte 3 的生命周期钩子函数的具体使用方式和应用场景需要根据具体的项目需求来确定。
相关·内容
如果父组件更新它在生命周期内传递给子组件的支柱的值，那么子组件如何在自己的生命周期中使用该支柱的最新值？
下面是一个示例，在子组件的生命周期中未定义支柱值：
App.svelte
<script>
import { onMount } from 'svelte';
import Nested from './Nested.svelte';
let name;
onMount(() => {
name = "world";
})
</script>
<
浏览 0提问于2019-05-25得票数 2
2回答
我试图在svelte 3中创建 (web组件)，我找不到任何方法来样式嵌套的css组件。Svelte在将样式注入到<style>中的ShadowDOM中之前先移除它们。
问题是，我希望在根元素中有嵌套组件。例如：
RootComponent (svelte自定义元素)
(进口) FooComponent
(进口) BarComponent
如前所述：
导入自定义元素的所有组件都必须将编译器选项设置为<svelte:options tag="component-name" />。
使用此选项集，嵌套组件按预期工作，并注入根元
浏览 0提问于2019-09-05得票数 8
回答已采纳
关于TypeScript中的类型，我遇到了这个问题:我正在为d3可视化的x轴创建一个svelte组件，其中我将xScale作为属性从父组件中传递给
<XAix {xScale}/>
在父元素(其中定义了xScale )中，TypeScript根据xScale的初始化为xScale分配一个类型，该类型看起来类似于
const xScale = d3.scaleBand().domain([/*string array*/]).range([/*numeric array*/]).padding();
在XAxis.svelte中，我根据我对xScale的定义手动注释xScale支柱。
浏览 9提问于2021-12-22得票数 1
1回答
我有一个要维护的代码，它与它类似：
{#await details}
{#each values as value, i}
<td id="{`${config.id}_${i}`}">{value}</td>
{/each}
{:then details_result}
{#each details_result as detail, i}
<td id="{`${config.id}_${i}`}" class:detail="{detail.class}"
浏览 2提问于2020-02-11得票数 2
回答已采纳
在我的Svelte应用程序中，我试图使用测试一个元素在特定的API请求(使用)成功时被删除，而不是当它返回一个错误时。
检查快乐路径很容易使用。
const el = await screen.findByText(/foo/);
await waitForElementToBeRemoved(el);
但是，当请求失败时，检查元素是否被删除的“正确”方法是什么？我可以添加一个定制的setTimeout(.)但这似乎不是最理想的解决方案。
是否有一种方法可以轻松地确保请求在进行断言之前已经完成和处理？
Foo.svelte
<script>
let deleted = fals
浏览 4提问于2021-03-02得票数 0
我一直在做一个Svelte 3+ Electron 12.0.5项目。我正在使用svelte-spa-router包进行哈希路由。我的项目结构如下所示： node_modules/
public/
build/
bundle.css
bundle.js
index.html
src/
Components/
Pages/
Home.svelte
Settings.svelte
...
Sidebar.svelte
Ti
浏览 36提问于2021-04-22得票数 2
回答已采纳
我正在尝试使用Svelte构建一个前端应用程序。我有许多应该编译为自定义元素的组件，以便可以动态地插入它们，例如：
<script>
let my_html_string = '<p>Hello from <my-customelem/> something something</p>';
</script>
<div>
{@html my_html_string}
</div>
只要我在我的customElement: true文件中设置全局rollup.config.js，它就
浏览 0提问于2019-07-31得票数 3
3回答
我想知道如何从Svelte的函数中转发一个事件。
例如，我有一个App.svelte和一个Component.svelte文件。Component.svelte是一个按钮组件。我想处理on:单击这样的事件：
<script>
function handle(e){ /** Do things */ - /** Forward Event */ }
</script>
<button on:click={handle}/>
所以我也可以从App.svelte文件中获取事件
<script>
import Button from &#
浏览 1提问于2020-10-10得票数 0
回答已采纳
1回答
我想找到一条通往斯维特的路，结合传单。我被困的地方是如何正确地将传单组件分割成文件。为了学习，我尝试用svelte构建正式的。
这就是我的app.svelte的样子：
<script>
import L from 'leaflet';
import { onMount } from "svelte";
import { Circle } from "./components/Circle.svelte";
let map;
onMount(async () => {
map = L.map(
浏览 1提问于2020-06-14得票数 4
回答已采纳
这可能就是Svelte.js的工作原理，但我很好奇我是不是做错了什么，或者是否有解决办法。 如果我设置了编译器选项customElement: true，则传递给组件的属性在该组件的<script>标记中不可用。我用的是带svelte装载机的webpack。下面是一个简单的例子： // index.html
<my-app foo="testing svelte"></my-app>
<script src="bundle.js"></script>
// script.js (bundled
浏览 37提问于2020-03-28得票数 3
回答已采纳
1回答
我试图在Svelte组件库中使用Storybook。Svelte设置为使用Rollup。我想知道“故事书”对Webpack的使用是否与我的问题有关？
只要我的svelte组件是用JS编写的，故事簿就能正常工作，Svelte被设置为使用TS --精细--在组件的脚本中断中添加一个简单的类型声明
示例：
我改变了这个：
<script lang="ts">
export let text = ''
export let sent = true
</script>
对此：
<script lang="ts
浏览 0提问于2020-12-02得票数 7
对于像$: doubled = count*2这样的svelte中的反应性声明，它在中声明
如果这看起来有点陌生，别担心。它是有效的(如果不是常规的) JavaScript，Svelte将其解释为“每当任何引用的值更改时都重新运行此代码”。
传统的javascript功能反射似乎是 (请确认)
请用简单的话解释svelte编译器是如何做到这一点的，并提供对编译器代码中发生或开始发生这种情况的地方的引用。
有一个打开来解释苗条的内部最终。
浏览 1提问于2019-07-27得票数 6
回答已采纳
2回答
如何使用Sapper定期获取数据？
这样做对吗？
//src/routes/fetch_on_this_page.svelte
<script>
setInterval(async () => {
//fetch here
}, 3000);
</script>
浏览 1提问于2020-05-18得票数 0
回答已采纳
我用的是Svelte和URQL。
我正在使用，除了在我的rollup.config.js中创建一个format: 'esm'之外。
当我在代码中使用import('./Component.svelte')时，我的汇总已经在代码中将我的最后一个包分割成块。
我很难做的是异步初始化urql，如下所示：
import { initClient, dedupExchange, fetchExchange } from '@urql/svelte'
import { cacheExchange } from "@urql/exchange-grap
浏览 3提问于2020-09-11得票数 1
我想构建一个可以与React框架一起使用的svelte组件，在阅读了svelte文档后，我决定构建我的Svelte组件来svelte customElement，一切都很顺利，直到我使用了@smui/customElement，我的代码：
<svelte:options tag="charity-legal-agreement-element" />
<script lang="ts">
import Dialog, {Title, Content, Actions} from '@smui/dialog';
...
&
浏览 22提问于2021-03-09得票数 0
回答已采纳
我正在研究一个即将到来的项目的Svelte框架。
我想知道(因为这是项目要求)是否可以从服务器加载一些HTML字符串(使用fetch api)并动态地将其插入到Svelte组件中。
似乎可以使用{@html my_html_string}输出HTML字符串。有没有办法在HTML字符串中包含实际Svelte元素的标记？
例如：
<script>
// import MyCustomElementHere....
let my_html_string = 'Some text <MyCustomElement/> some more text
浏览 25提问于2019-07-17得票数 0
4回答
用Svelte连接数据库
、、、
我是新使用Svelte，并希望创建一个使用Svelte订购网站。我知道我将需要一个数据库来跟踪订单，客户名称，价格等。我以前使用过MySQL，但我还没有学会如何将数据库连接到网站。
如果使用Svelte，是否有特定的数据库可供使用？还是有办法将MySQL与Svelte连接起来？
我在Youtube和Google上搜索过这个，但是我不确定如果你在使用Svelte，它是否不同，所以我想确认一下。
注意:我还没有开始这个项目，所以我没有任何代码来显示我只是想知道如果您使用Svelte.，您可以如何连接数据库。
浏览 1提问于2020-03-17得票数 4
我在svelte中，我有一个组件TopNav，它有许多自定义属性，比如clientPage (不管它是否是客户端页面)，我的根+layout.svelte中有TopNav组件，如下所示：
<!-- /routes/+layout.svelte -->
<script>
import TopNav from "@components/TopNav.svelte";
</script>
<TopNav noSpace />
<slot />
还有我的一个嵌套页面/routes/app/+page.svelte
&l
浏览 1提问于2022-11-02得票数 0
回答已采纳
1回答
我希望从Svelte组件中公开一个方法，以便组件的使用者可以调用它。
假设我这里有一个简单的Svelte web组件：
<script>
export function someMethod() {
console.log("I was called");
}
</script>
<svelte:options tag="svelte-div" />
<style>
div {
background: #ff3e00;
}
</style>
浏览 2提问于2022-05-20得票数 0
2回答
Svelte 指出：
Svelte在构建时将应用程序转换为理想的JavaScript，而不是在运行时解释应用程序代码。
..。
它类似于JavaScript框架，如React和Vue.
关于上述问题，我的问题是：
Svelte是否仅限于构建单页应用程序(SPA)，是否可用于创建多页应用程序(MPA)？
浏览 28提问于2022-04-28得票数 1
回答已采纳
我正在尝试将Jest测试添加到使用svelte-material-ui的项目中。
我在GitHub上关注了这个问题，但无法让它正常工作：
下面是我所做的：
npx degit "sveltejs/template-webpack" smui-jest-testing
cd smui-jest-testing
yarn
yarn add svelte-material-ui
yarn add -D @testing-library/svelte
yarn add -D jest
yarn add -D svelte-jester
yarn add -D @testing-lib
浏览 25提问于2020-03-11得票数 0
回答已采纳
注：，对于这个问题，Svelte上有一个GitHub问题。虽然我知道有一天这可能会成为Svelte的一个特性，但我想问的是如何在今天创建一个解决方案--，以支持或这样的第三方web组件库，或者使用双向绑定的？
简介：
我已经建立了一个Svelte应用程序，并成功地添加了一个Web组件库(Ex: Shoelace)。
我编写了一行使用双向绑定的代码，如下所示：
我不能双向绑定(bind:value={})，因为Svelte编译器不能识别自定义web组件的有效绑定。
如果您知道一个包装器库，或者我可以做一些其他的事情来使它工作，那就太好了。
浏览 5提问于2021-11-21得票数 1
我正在尝试为一条特定的路线创建布局...似乎不起作用： ./routes/guides/_layout.svelte
./routes/guides/page1.svelte _layout.svelte是否只在./routes的根目录下工作 我用的是svelte-kit
浏览 7提问于2021-07-31得票数 0
回答已采纳
Js文件：
import template from './Template.html';
class VacationListForCompany extends HTMLElement {
constructor() {
super();
const root = this.attachShadow({mode:'open'});
const t = new template({ target: root });
}
}
window.customElements.define("vacation-list-fo
浏览 0提问于2017-10-09得票数 0
在我的项目中，我将getContext与一起用于modals。
是否有办法在打字本文件中使用getContext等？在类型记录文件中调用svelte函数时，我将得到一个500: Function called outside component initialization。
我已经尝试了中提到的方法。
谢谢你的帮助！
浏览 12提问于2022-01-13得票数 2
我想要显示一个非常基本的地图与mapbox使用svelte。当我只想让地图全屏显示时，我已经失败了。我知道有svelte-mapbox插件。但我真的不想做任何花哨的事情。现在只是一张全屏地图；) 所以我的main.js看起来是默认的： import App from "./App.svelte";
const app = new App({
target: document.body,
});
export default app; App.svelte如下所示： <script>
import mapboxgl from "mapbox-gl&#
浏览 49提问于2021-10-05得票数 1
1回答
我试图使用svelte框架捕获输入的value
<script>
var name = document.getElementById("#name");
var valueName = name.value;
function showName(){
console.log(valueName);
}
</script>
<main>
<div>
<input id="name" type="text"">
浏览 2提问于2022-08-08得票数 -1
回答已采纳
1回答
在Svelte中，我有一个父组件，它侦听由子组件分派的。
我知道如何使用component.$on来检查分派事件在分派的组件中是否正确。
但是，，我不知道如何检查接收分派的组件是否做了正确的响应。
下面是一个基本的例子：
Child.svelte
<script>
import { createEventDispatcher } from 'svelte'
const dispatch = createEventDispatcher()
function handleSubmit(event) {
dispatch('result
浏览 10提问于2022-11-06得票数 0
回答已采纳
1回答
我有一个简单的Svelte按钮组件如下所示。
<script lang="ts">
import { createEventDispatcher } from 'svelte';
import { idGenerator } from '../utils/helpers';
export let id = idGenerator();
export let label = 'Click';
export let styleClass: string = '';
const
浏览 16提问于2022-11-29得票数 0
回答已采纳
我想在Sapper中禁用类似SPA的导航(如果这是一件正确的事情，请不要跳到讨论中)。我遵循了https://stackoverflow.com/a/58645471/205747的建议，在client.js中注释掉了所有的东西。 这满足了我的以下要求： [x] HTTP navigation;
[x] HTML composition achieved with svelte components;
[x] CSS classed from all components are extracted to single place; 但最后一个要求没有得到满足： [ ] DOM
浏览 19提问于2020-10-24得票数 1
回答已采纳
如何从内部知道Svelte组件的名称？ .svelte文件中的某个位置： <script>
console.log('name of this component is', ...)
</script> 用什么代替省略号？
浏览 21提问于2021-09-17得票数 0
1回答
在我的应用程序中，我有一个路径map.svelte 它有两个子组件：Map.svelte和LayerSelector.svelte Map.svelte创建一个OpenLayers map实例。LayerSelector.svelte需要访问此实例。 我在map.svelte中声明了map实例，并将其绑定到两个组件，但似乎无法在LayerSelector.svelte中访问它 map.svelte： <script>
import Map from '../components/Map.svelte';
import MapLayerSelectorDia
浏览 22提问于2021-10-09得票数 1
回答已采纳
3回答
我想在我的项目中使用，它还没有与Svelte集成。这是一个非常完整的数据表库，我以前已经使用过。但是当我尝试创建带有操作按钮的典型列时(编辑、删除.)我一直使用它们的作为字符串返回html。
格式化列的函数返回如下所示：
return '<ul class="actions_row"><li><custom-button on:click={handleClick}>Edit</custom-button></li></ul>';
<custom-button />是使用<
浏览 6提问于2020-03-06得票数 1
1回答
我想使用一些来自的web组件。但我不知道如何在Svelte中使用它们，因为svelte将web组件视为svelte组件。
当我试图用它们作为，
<script lang="ts">
import { Button } from "@vscode/webview-ui-toolkit"
</script>
<main>
<Button appearance="primary">Text</Button>
</main>
我知道这个错误，
Element does not
浏览 10提问于2022-03-01得票数 3
回答已采纳
在Svelte中在两个页面之间移动数据的最佳实践？
我有两页，比方说First.svelte和Second.svelte。
在传统框架中，我可能在First.svelte上创建一个表单，然后将其发布到Second.svelte。我可以在First.svelte表单上绑定隐藏的输入值，然后将其发布到Second.svelte。在如何将表单本地管理到页面本身方面，我发现了很多很好的信息，但没有关于如何在页面之间移动数据。
我很难找到在SvelteKit页面中读取表单数据的最佳方法。看起来我可以使用get/setContext代替，或者可能还有其他选项？
表单提交通常是通过端点来处理的，而不是仅仅在
浏览 9提问于2022-05-10得票数 0
回答已采纳
我有以下要素：
Parent.svelte
<script>
import Child from './Child.svelte';
function handleMouse(){
}
</script>
<Child on:mousedown={handleMouseDown} on:mouseover={handleMouse}/>
<div draggable="true" on:mousedown={handleMouseDown} on:mouseover={handleMou
浏览 5提问于2022-08-08得票数 2
回答已采纳
我有一个名为WastedTime.svelte的组件，其值为wastedTime。还有一个函数可以将值更改为50 (在我的实际代码中，这是一个动画，但这是堆栈溢出的一个简化的测试用例)。
为了允许从父函数调用子函数，我在Svelte文档中使用了<script context="module">：
<script context="module">
var wastedTime = 0;
export function changeNumber(){
console.log('changing num
浏览 6提问于2019-10-08得票数 22
2回答
我使用Svelte创建了简单的自定义Web组件。它已经编好了，看来应该运行得很好，但也有困难。我试图把一些变量传递给支柱，但是一直没有定义，但是如果我传递一些字符串
Result.svelte组件
<svelte:options tag="svelte-result" />
<script>
export let result = {metadata: {}, transfers: []};
export let string = 'no string';
</script>
<div class=&
浏览 3提问于2020-07-24得票数 2
回答已采纳
我正在尝试使用Svelte创建一个自定义复选框，并将其编译成一个自定义元素(使用customElement: true)，但我不知道使用属性的正确方式是什么。
看一看生成的代码，看起来attributeChangedCallback和observedAttributes是自动生成的，这取决于您在.svelte文件中导出的变量，所以这似乎像预期的那样工作，尽管我还没有找到相关的文档。
现在，我有一种手工创建选中属性和管理选中属性的不同值(以匹配本机行为)的方法，如下所示：
<script>
import { onMount } from 'svelte';
浏览 1提问于2022-05-14得票数 0
回答已采纳
我正在开发一个使用Laravel + Svelte + materializecss的产品。
我使用Svelte组件作为自定义标记，使用svelte: options。
示例：<svelte: options tag = "custom-tag" />
如果试图在此组件中加载materializecss，则必须每次在组件中运行import。父HTML调用materializecss。
为什么会这样呢？如果你能告诉我，我会很感激的。
index.blade.php
<html>
<head>
<!-- ↓ materializec
浏览 7提问于2020-10-21得票数 0
回答已采纳
2回答
使用以下命令安装svelte：
当我试图运行npm run dev时，会得到以下错误：
svelte-app@1.0.0 dev /Working/Svelte/first-app run:dev autobuild
svelte-app@1.0.0自动构建/工作/Svelte/first-app汇总-c -w
svelte-app@1.0.0开始:开发/工作/Svelte/first-app sirv public -dev
events.js:180抛出er；//未处理的“错误”事件^
错误: getaddrinfo ENOTFOUND x86_64-apple-darwin13.4.0
浏览 0提问于2019-08-15得票数 0
描述错误:我使用与节点适配器一起运行我的svelte工具包应用程序。它似乎适用于默认版本，但对于我的自定义域，它无法在slug.svelte路由中加载资源。
默认版本：
https://youernes-22w6ta6irq-ew.a.run.app/yhoyquetoca
https://youernes-22w6ta6irq-ew.a.run.app/planes/UEVytEBG6rfcLrdqflD8TsjmCRn2_1611080173358
自定义域版本：
https://youernes.com/yhoyquetoca
https://youernes.com/planes/UE
浏览 2提问于2021-03-31得票数 2
我试图运行我的sveltekit应用程序，它运行良好的几天后，但突然，当我运行"npm运行构建“，它抛出错误:找不到: /，我的理解是，它是找不到进入文件的应用程序
//我的vite.config文件
// vite.config.js
import { sveltekit } from '@sveltejs/kit/vite';
/** @type {import('vite').UserConfig} */
const config = {
plugins: [sveltekit()]
};
export default config;
浏览 4提问于2022-11-17得票数 1
2回答
从标题中可以清楚地看出，我只有一个简单的问题。svelte商店安全吗？
我正在使用它来保存用户数据，如自定义声明，如果任何人都可以将自己更改为管理员，这可能不是很好。
所以我的问题是:用户/黑客有可能改变存储在svelte store中的数据吗？我是否应该将敏感数据移出它？
浏览 4提问于2021-02-08得票数 1
我正在缓慢但肯定地将一个jquery项目迁移到Svelte，但是在jquery中，一些特性(比如数据)要成熟一些。因此，在引用时，我测试了Svelte的反应性特性，方法是从服务器端调用更新一个对象数组，然后重绘表。其目的是使实现更接近本地Svelte。
但是，尽管我得到了要呈现的表，但当我用Svelte声明变量插入jquery特性时，在收到错误：Uncaught (in promise) TypeError: e.parentNode is null之前，我只需要更新一次表。
有人能帮我理解一下为什么会发生这种事吗？
// Load.svelte
<script context="
浏览 13提问于2022-07-03得票数 2
回答已采纳
我想创建一个JS文件，当通过脚本标记动态注入时，它执行另一个独立页面上的一些代码。需要运行的代码，我是用Svelte编写的。那么，如何才能将代码转换为单个HTML文件呢？目前，在构建包时有单独的CSS、HTML、JS文件。 如果需要，如果Svelte由于某种原因无法使用，我也可以在react中编写代码。 代码是创建一个按钮，它在页面上创建一个iframe。然后iframe中的内容从那里获取它。 如何实现创建包含css和html的单个JS文件的目标？
浏览 25提问于2021-05-04得票数 1
1回答
我的类别的params只运行第一次单击。
我有这样的结构：
我有两个类别:类别/销售和类别/租金。
卖和租是最重要的。
当我点击一个类别时，它会工作。
但是它只在第一次单击时运行，所以当我单击另一个类别时，svelte不会重新复制。
我的代码catName.svelte：
<script>
import { page } from '$app/stores';
const catName = $page.params.catName;
// $: catName = $page.params.catName;
$: list
浏览 4提问于2022-05-07得票数 0
我使用svelte创建了一个自定义元素： <svelte:options tag="my-component" />
<script>
export let name;
</script>
<div>Hello {name}</div> 当我在HTML中初始化它时，它会起作用： <my-component name="Jane"></my-component> 屏幕上的输出是"Hello Jane“。 当我尝试从控制台更新名称时，它不起作用： var mc =
浏览 36提问于2021-10-27得票数 0
1回答
我理解，与许多前端框架一样，Svelte允许开发人员将逻辑分离为更小的、可重用的组件文件。在这样做时，您可以将道具从父组件传递给子组件。
我想知道是否可以将道具传递给根组件本身。我试图使用Svelte创建一个模型，并要求在App.svelte范围之外确定一些变量(即在导入bundle.js的同一级别上分配的变量)。
浏览 1提问于2021-02-20得票数 3
回答已采纳
1回答
我对苗条很陌生，尤其是SvelteKit。目前，我正在做两个项目。
第一个是SPA，我在其中使用来管理不同的状态，并带来导航和前进的能力，就像我们在一个老学校的网站上所做的那样。这是完美的:)
第二个项目是一个SvelteKit应用程序。我有3个用例：
搜索产品
创造一个产品
展示前十名产品
首先，我认为如果每个用例需要的话，能够预取某种类型的JSON数据会很有趣，但另一方面，我不想为每个子用例创建路由页面，因为我不希望每次用户执行简单操作时页面刷新。因此，我使用3条路线在这3条“用例”之间导航：
src/routes/search_product.svelte
src/r
浏览 13提问于2022-02-19得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
