nextTick的作用 组件全局注册

面试题：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