nextTick的作用 组件全局注册

本文介绍Vue中nextTick方法的作用及使用场景,解释如何确保DOM更新后执行操作,并通过示例展示了nextTick在实际开发中的应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

面试题:nextTick的作用

使用场景:

需要在视图更新之后,基于新的视图进行js节点操作,能够使用nextTick  (等异步结束并且最终渲染完毕后才会执行)

js节点操作:比如想要获取更新视图后的样式值,或者 改变节点等(不是在玩数据)
mounted不是万能的,只能获取同步(本身)的节点,如果某些节点是异步数据返回之后才渲染的,则在mounted是无法获取最新的节点

语法:

this.$nextTick(()=>{
	自己业务,一般都是操作最终渲染的节点
})

Demo1: 3 1 4 2

 created(){
      console.log(3);
       this.$nextTick(()=>{
        console.log(4);
      })
    },
    mounted(){
      console.log(1);
      this.$nextTick(()=>{
        console.log(2);
      })
    }

Demo2:

<template>
    <div>
        <span ref="s">{{name}}</span>
        <button @click="change">更改</button>

         <button @click="getInfo">再次获取</button>
    </div>
</template>

<script>
export default {

   data(){
    return{
       name:"张三"
    }
   },
   methods:{
    change(){
       console.log(this.name);//李四
       console.log(this.$refs.s.innerHTML);//  张三
       this.$nextTick(()=>{
         console.log(this.$refs.s.innerHTML);//李四
       })
    },
    getInfo(){
        console.log(this.$refs.s.innerHTML);//李四
    }
   }
}
</script>

组件全局注册

组件的注册:

1 局部注册   import + components  
	优点:被引入的组件会随着当前组件的销毁而销毁---->节约内存
	缺点: 每次都要通过import + components 来引入,很麻烦
	
2 全局注册 
	优点:只要全局注册后,可以在任意组件中直接使用  <组件标签 ,很方便
	缺点:一直占用内存,不会销毁
	
  比如某个组件使用率非常之高,就能够使用全局注册
  

步骤:

1 src下新建global_components目录,然后在该目录下新建  My.vue、My2.vue和对应的index.js

My.vue  、My2.vue    :  省。。。
index.js:

import My from './My.vue'
import My2 from './My2.vue'
export default {
    install:function(Vue){
        //参数1:自定义标签名 
        //参数2:组件对象
        Vue.component('ele-my',My);
        Vue.component('ele-my2',My2)
    }
}


2 编辑main.js
import index from './global_components/index.js'
Vue.use(index)

v2课堂贯穿项目功能模块:

1 注册
2 使用注册的账号登录
3 个人中心、注销(注销后直接访问后台主页面,应该出现401,)
4 换账号,展示权限控制(自定义实现的)
5 演示学生分页(下一页、更改页容量)
6 演示学生的修改(包含上传)---》路由版  (如果你写了dialog版,那么就演示dialog) 
7 echarts的两个图(学生姓名-年龄关系柱状图、班级名-班级人数关系饼状图 )

Vue3

历史:

2018年 vue3 计划
2020年 4月  v3 beta
2020年 9月  v3 正式版

V3的特点

1 V3性能更高(创建项目速度、打包开发速度、渲染速度、占有内存减少)
2 V3对typeScript有更好的支持
3 v3也兼容 v2的语法
4 v3和v2的响应式原理是不同
5 组合式api (composition-api)
6 新的组件  Fragment(碎片) 、 Teleport(瞬移)
7 api更新  (全局挂载:必须使用新的api,不能像以前一样直接挂载原型中区)

V3的脚手架

1 vue cli 底层是webpack---目前流行的前端开发构建工具  vue create xxx 
2 vite   下一代前端开发与构建工具,对node版本是有要求的,如果报错,则推荐下载最新版:v16.xxx

通过vite脚手架创建项目

npm init vite@latest

Need to install the following packages:
  create-vite@3.0.2
Ok to proceed? (y) y
√ Project name: ... v3_stu
? Select a framework: » - Use arrow-keys. Return to submit.
    vanilla
>   vue
    react
    preact
    lit
    svelte
    
    ? Select a variant: » - Use arrow-keys. Return to submit.
>   vue
    vue-ts
    	
   

开服:

npm run dev

只需要打包:npm run build
### 获取 Vue 3 中全局注册组件的实例 在 Vue 3 中,获取全局注册组件的实例并不是直接通过 `Vue.component` 注册方法完成的。相反,可以利用 Composition API 提供的功能来实现这一目标。 当使用 `<script setup>` 或者普通的组合式 API 函数时,可以通过调用 `getCurrentInstance()` 来获得当前活跃组件的上下文对象[^2]。然而,对于已经全局注册过的组件来说,如果想要在一个特定的地方拿到它的实例,则通常是在该组件被渲染之后,在其生命周期钩子内操作,比如 mounted 阶段。 下面是一个简单的例子展示如何尝试捕获一个全局组件的实例: ```javascript import { defineComponent, onMounted } from 'vue'; export default defineComponent({ name: 'SomeParentComponent', components: { MyGlobalComponent // 假设这是已经在 main.js 中作为全局组件注册过了 }, setup() { let myCompRef; onMounted(() => { const app = getCurrentInstance(); console.log(app); // 这里打印的是父级 SomeParentComponent 的实例信息 // 如果要找具体的子组件实例,可能需要借助 ref 属性 nextTick().then(() => { console.log(myCompRef.$el); // 访问 DOM 节点 console.log(myCompRef.proxy); // 子组件的真实代理实例 }); }); return { myCompRef, }; } }); ``` 为了能够真正地引用到名为 `MyGlobalComponent` 的全局组件实例,还需要在其模板部分给它加上特殊的标记以便后续查找,例如使用 `ref="myComp"`: ```html <template> <!-- ... --> <MyGlobalComponent ref="myCompRef"></MyGlobalComponent> <!-- ... --> </template> ``` 需要注意的是,上述方式适用于局部定义的情况;而对于全局组件而言,由于它们可以在任意位置无声明地使用,因此除非特别指定(如上所示),否则无法轻易定位并取得这些组件的具体实例。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值