Nativescript Vue 简单示例 create()mounted() 永远不会触发

Posted 2023-02-19

【中文标题】Nativescript Vue 简单示例 create()mounted() 永远不会触发

【英文标题】：Nativescript Vue simple example create() mounted() never fire

【发布时间】：2019-06-27 12:37:46

【问题描述】：

以下是一个非常简单的 Nativescript Vue 示例。如下所示，它显示了 5 个帖子标题的列表。

所以上面的测试很好，只要我只使用 computed 将数据返回到模板。但是，如果我尝试使用create() 或mounted() 事件/生命周期挂钩来设置posts 属性，我将在显示中一无所获。 console.log 行从不显示消息，因此它们从不触发。为什么不呢？

另外，如果我尝试使用 fetch（调用我的 fetchPosts() 方法）从测试 restapi 中提取帖子，我没有得到任何数据，console.error 什么也没有显示。为什么不呢？

<template>
<Page class="page">
    <ActionBar class="action-bar">
    <Label class="action-bar-title" text="Home"></Label>
    </ActionBar>
    <ScrollView>
    <StackLayout class="home-panel">
        <!--Add your page content here-->
        <Label v-for="post in posts" :text="post.title" :key="post.id"/>
    </StackLayout>
    </ScrollView>
</Page>
</template>

<script>
export default 
//   posts: [],
//   create() 
//     console.log("create event fired");
//     this.posts = this.getPosts();
//   ,
//   mounted() 
//     console.log("mounted event fired");
//     this.posts = this.getPosts();
//   ,
computed: 
    posts() 
    //return this.fetchPosts();
    return this.getPosts();
    
,
methods: 
    fetchPosts() 
    fetch("https://jsonplaceholder.typicode.com/posts")
        .then(res => res.json())
        .then(res => 
        console.log("fetch response", res);
        return res;
        )
        .catch(err => 
        console.error(err);
        return [ id: 0, title: "Error: " + err ];
        );
    ,
    getPosts() 
    return [
        
        userId: 1,
        id: 1,
        title:
            "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
        body:
            "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
        ,
        
        userId: 1,
        id: 2,
        title: "qui est esse",
        body:
            "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
        ,
        
        userId: 1,
        id: 3,
        title: "ea molestias quasi exercitationem repellat qui ipsa sit aut",
        body:
            "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
        ,
        
        userId: 1,
        id: 4,
        title: "eum et est occaecati",
        body:
            "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit"
        ,
        
        userId: 1,
        id: 5,
        title: "nesciunt quas odio",
        body:
            "repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem sed est\nvoluptatem omnis possimus esse voluptatibus quis\nest aut tenetur dolor neque"
        
    ];
    

;
</script>

<style scoped lang="scss">
// Start custom common variables
@import "../app-variables";
// End custom common variables

// Custom styles
.fa 
color: $accent-dark;


.info 
font-size: 20;

</style>

【问题讨论】：

在this 基本示例中，我刚刚编写了它似乎有效。也许你有一些错误，与 vue 生命周期钩子无关。

感谢@Jori 的回复和示例。我在 VS Code 中运行，它确实构建并运行良好。我在任何地方都看不到错误。但是我永远无法生成任何 console.log 消息

好的，如果我使用 Nativescript Sidekick 应用程序，我可以看到 console.log 输出，并且似乎生命周期事件确实触发了。不知道为什么我在 VS Code 的任何地方都看不到 console.log 输出。我应该在哪里看到它们？

所以使用 Nativescript Sidekick 应用程序我可以看到设备控制台输出，并且我可以看到 fetch is 在从 mounted() 或 created() 调用时返回数据。 posts 属性 is 正在设置。但是，模板永远不会刷新以显示获取的帖子。我缺少的最后一个“绑定”部分是什么？

【参考方案1】：

我在您的代码中发现了一些问题：

正确的生命周期钩子名称是created，而不是create

posts 列表应该在 data 内：

data() 
    return 
        posts: []
    ;
,

fetchPosts() 不返回任何内容，但您希望返回 posts。您必须在then 回调中设置posts：

fetchPosts() 
    fetch("https://jsonplaceholder.typicode.com/posts")
        .then(res => res.json())
        .then(res => this.posts = res)
        .catch(err => console.error(err));

这是因为fetch 返回一个Promise。 Q: 如何从Promise返回数据？答：You can't！

完整代码：

<script>
export default 
    data() 
        return 
            posts: [
                title: '1 Title',
                id: 1
            ]
        ;
    ,
    created() 
        console.log("create event fired");
        this.posts = this.fetchPosts();
    ,
    mounted() 
        console.log("mounted event fired");
        this.fetchPosts();
    ,
    methods: 
        fetchPosts() 
            return fetch("https://jsonplaceholder.typicode.com/posts")
                .then(res => res.json())
                .then(res => this.posts = res);
        
    
;
</script>

代码已测试here。

【讨论】：

谢谢@Jorij。它正在工作。我接受了你的回答。我认为最后一块是你上面的#2。我的 data() 设置不正确。另外，我永远看不到（在我键入时仍然看不到）在 VS Code 中触发的生命周期挂钩。但我确实在 Nativescript Sidekick 中看到了设备控制台输出。所以我克服了困难。谢谢乔吉！！！

有趣的注意：你不能从 promise.then 中返回 res/data 并在 mounted() 中设置 this.posts = this.fetchPosts()。那行不通。您必须在 promise.then 中设置 this.posts = res 以使其工作。这是为什么呢？

不要介意上面的“有趣的注释”。这根本不是 有趣 :-/ 你可以简单地返回 promise 然后在 mounted() 中捕获 promise.then。我想是这样。我现在就试试。应该可以正常工作。

【参考方案2】：

对我来说它也没有触发，而不是使用 mount 或 created 我在页面元素上添加了一个加载事件

<template>
    <page @loaded="startMyApp">
    ......
</template>
<script>
  export default 
    data() 
      return 
      
    ,
   methods: 
        startMyApp()
        
        
  
</script>