jjzjj

nextTick和Vue生命周期

glassUp 2023-03-28 原文

先看一段代码，这是通用轮播图组件的部分代码

watch: {
    //监听carouselList状态发生变化
    carouselList: {
      //carouselList状态发生变化了
      immediate:true,
      handler() {
        this.$nextTick(() => {
          new Swiper(this.$refs.swiper, {
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
              el: ".swiper-pagination",
              clickable:true
            },

            // 如果需要前进后退按钮
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            }
          });
        });
      },
    },
  }

这段代码的其他知识点我前面都写过了，这里出现一个新的知识点:nextTick

对于nextTick官方是这么解释的：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
这句话我是这么理解的，数据改变了，但是数据还得在dom中渲染，渲染结束后获得新的dom节点再调用nextTick，进行下一步操作

调用方法有两种：
1.Vue.nextTick() 这种是全局的方法
2.this.$nextTick() 这种是调用绑定的实例
其实这两种差不多，我个人更喜欢第二种，至于原因自然是不想在组件实例上再引入vue了

为啥有nextTick的出现，这就有必要讲讲Vue生命周期了，Vue官网有一张图就是讲Vue生命周期的，当然都是英文写的，所以我就在网上找了一张别人注释过的图，我觉得注释的挺好的


Vue生命周期.png

由此可见，vue的生命周期有八个阶段
1 beforeCreate(创建前)：在该阶段组件未创建，不能访问数据，组件中的 data，ref 均为 undefined。
2 created(创建后)：这个阶段组件建立完成，但是还未渲染成HTML模板，组件中的data对象已经存在，可以对data进行操作了
3 beforeMount(挂载前):这个阶段编译模板结束，虚拟dom已经存在
4 mounted(挂载后)：这个阶段页面挂载完成，真实dom节点已经挂载在页面上了， 但是不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 this.$nextTick：
5 beforeUpdate(更新前)：页面数据更新之前，监听数据的改变，并且可以获取到最新的数据，但是不会更新页面的数据
6 updated(更新后)：这个阶段数据更新完成，dom树已经完成更新，可以拿到dom节点了
7 beforeDestroy(销毁前)：销毁前，这个阶段组件还是能用的
8 destroyed(销毁后)：组件销毁了，生命周期结束

nextTickVuesection销毁

有关nextTick和Vue生命周期的更多相关文章

  1. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  2. (附源码)vue3.0＋.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍　　介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。　　内容有：　　　　①：Hub模型的方法介绍　　　　②：服务器端代码介绍　　　　③：前端vue3安装并调用后端方法　　　　④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过，signalR内置方法.invoke()  去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on

  3. vue 实现内容超出两行显示展开更多功能，可依据需求自定义任意行数！ - 2

    平时开发中我们经常会遇到这样的需求，在一个不限高度的盒子中会有很多内容，如果全部显示用户体验会非常不好，所以可以先折叠起来，当内容达到一定高度时，显示展开更多按钮，点击即可显示全部内容，先来看看效果图： 这样做用户体验瞬间得到提升，接下来看看具体细节。0">主要操作在内容这里{{item.username}},……展开更多样式大家可依据自己项目需求进行设计，这里就不贴了，主要说几个关键的。1、在data中定义三个属性isShowMore:false, //控制展开更多的显示与隐藏textHeight:null, //框中内容的高度status:false, //内容状态是否打开2.计算内容是否

  4. vue3.0 + vite2.0+如何兼容低版本浏览器 - 2

    这里写自定义目录标题一、问题二、解决三、解决方案四、打包预览一、问题在使用vue3.2和vite2开发一个移动端或者钉钉端H5微服务iosapp内置浏览器打开没问题安卓app内置浏览器打开空白页面vconsole打印出现报错globalthisundefind二、解决内置浏览器版本比较低打印出来是63vue3代码不兼容低版本浏览器三、解决方案步骤一：vite.config.ts里build.target配置项指定构建目标为es2015或者步骤二：安装@vitejs/plugin-legacy安装完报错也还在指定版本可以解决“@vitejs/plugin-legacy”:“1.8.0”,步骤三：

  5. ruby - 在 Ruby 中查找周期和范围集差异的有效方法 - 2

    我在Ruby中有很多时间范围:period=Time.parse('8:00am')..Time.parse('8:00pm')incidents=[Time.parse('7:00am')..Time.parse('9:00am'),Time.parse('1:00pm')..Time.parse('3:00pm'),Time.parse('1:30pm')..Time.parse('3:30pm'),Time.parse('7:00pm')..Time.parse('9:00pm'),]我正试图在这段时间内获得一系列无事件block。对于以上内容:[Time.parse('9:00

  6. Vue3的新特性 - 2

    Vue3的新特性包括：CompositionAPI：一种新的API风格，可将有关组件功能的代码逻辑封装在单独的函数中，从而更好地管理和重用代码。Teleport：可以让组件在DOM层次结构中的任何位置渲染。Suspense：一种新的异步渲染模式，可以优化应用程序的性能。更快的渲染速度：Vue3使用了新的虚拟DOM算法，并且对渲染过程进行了优化，因此在渲染大型应用时性能更高。更小的包大小：Vue3的打包大小比Vue2更小，因为它不再需要依赖像vue-template-compiler这样的工具。其他改进：Vue3还具有其他一些改进，例如更好的TypeScript支持、更好的错误提示和更好的调试工

  7. ruby-on-rails - 有没有一种简单的方法可以在 Passenger 的请求周期之外运行垃圾收集？ - 2

    unicorn有OobGC可用于在一定数量的请求后运行GC.start的机架中间件。PhusionPassenger中有类似的东西吗？ 最佳答案 PhusionPassenger4正式引入了带外垃圾回收机制。它比Unicorn更灵活，允许任意工作，而不仅仅是垃圾收集。http://blog.phusion.nl/2013/01/22/phusion-passenger-4-technology-preview-out-of-band-work/ 关于ruby-on-rails-有没有一种

  8. ruby-on-rails - rails 周期性任务 - 2

    我有一个ruby​​onrails应用程序，我试图在其中找到每隔几秒运行一些代码的方法。我发现了很多使用cron或类似cron的实现的信息和想法，但这些只是准确到分钟，并且/或需要外部工具。我想每15秒左右启动一次任务，并且我希望它完全独立于应用程序中(如果应用程序停止，任务也停止，并且没有外部设置)。这用于缓存数据的后台生成。每隔几秒，任务就会收集一些数据，然后将其存储在缓存中，供所有客户端请求使用。该任务非常慢，因此需要在后台运行并且不阻塞客户端请求。我是ruby​​的新手，但有很强的perl背景，我解决这个问题的方法是创建一个间隔计时器和处理程序，它fork、运行代码，然后在完成

  9. vue2+element-ui,el-aside侧边栏容器收缩与展开 - 2

    一、概览实现效果如下：二、项目环境1、nodejs版本node-vv16.16.02、npm版本npm-vnpmWARNconfigglobal`--global`,`--local`aredeprecated.Use`--location=global`instead.8.15.03、vue脚手架版本vue-V@vue/cli5.0.8三、创建vue项目1、创建名为vuetest的项目vuecreatevuetest选择Default（[Vue2]babel,eslint）  2、切换到项目目录，启动项目cdvuetestnpmrunserve 3、使用浏览器预览 http://localh

  10. Vue学习笔记：Vue element-ui中table组件的使用----接入后端数据 - 2

    记个笔记以免遗忘，建议还是查看Element-UI提供的官方文档学习，自己摸索比较难受官方文档：Element-UI组件TableElement-UI官网提供了许多Table格式，这里以一个带有筛选器的表格为例表格的官网显示效果：直接将官方提供的示例代码贴入.vue文件中即可使用显示的数据是通过data()方法提供的假数据。方法见下：data(){return{tableData:[{date:'2016-05-02',name:'王小虎',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-04',name:'王小虎',address:'上海市普陀区金沙江路1

随机推荐