围绕 Ionic 的缓存视图工作

一则或许对你有用的小广告

欢迎加入小哈的星球 ,你将获得:专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡/ 赠书活动

目前, 星球 内第2个项目《仿小红书(微服务架构)》正在更新中。第1个项目:全栈前后端分离博客项目已经完结,演示地址:http://116.62.199.48/。采用技术栈 Spring Boot + Mybatis Plus + Vue 3.x + Vite 4手把手,前端 + 后端全栈开发,从 0 到 1 讲解每个功能点开发步骤,1v1 答疑,陪伴式直到项目上线,目前已更新了 255 小节,累计 39w+ 字,讲解图:1716 张,还在持续爆肝中,后续还会上新更多项目,目标是将 Java 领域典型的项目都整上,如秒杀系统、在线商城、IM 即时通讯、权限管理等等,已有 1300+ 小伙伴加入,欢迎点击围观

在这里只是一个快速提示,因为它出现在我今天所做的演示中——当特定视图在 Ionic 中运行时,您如何处理运行代码?让我从一个例子开始,这样你就明白我在说什么了。

给定一个使用默认选项卡应用程序的新 Ionic 应用程序,我将修改帐户控制器以将随机数添加到范围:


 .controller('AccountCtrl', function($scope) {
  $scope.settings = {
    enableFriends: true
  };

console.log("Running stuff..."); $scope.number = Math.floor(Math.random()*10);

})


在此视图的视图中,我添加了数字的快速显示:随机数:{{number}}

是的,这不是最令人兴奋的演示,但你明白了。不过,您会立即注意到,当您在不同选项卡之间来回单击时,该值不会改变。如果您打开远程开发工具,您将看到控制台消息只运行一次。

这是由于 ion-view 指令中内置的默认缓存系统。幸运的是,通过生命周期事件之一修复它相当容易。文档说您可以收听这些事件,但没有演示如何收听。

这是一个例子:


 .controller('AccountCtrl', function($scope) {
  $scope.settings = {
    enableFriends: true
  };

console.log("Running stuff..."); $scope.number = Math.floor(Math.random()*10);

})


就是这样。对我来说,棘手的部分是 $scope.$on,这是我以前没有在 Angular 中使用过的东西。您可以在 文档 中阅读有关事件的更多信息。