从0开始手把手带你入门Vue3-全网最全(1.1w字)

天命不足畏,祖宗不足法。 ——王安石

前言

本文并非标题党,而是实实在在的硬核文章,如果有想要学习Vue3的网友,可以大致的浏览一下本文,总体来说本篇博客涵盖了Vue3中绝大部分内容,包含常用的CompositionAPI(组合式API)、其它CompositionAPI以及一些新的特性:Fragment、Teleport、Suspense、provide和inject。

项目搭建

既然是学习Vue3,那么首先应该需要的是如何初始化项目,在这里提供了两种方式供大家参考

  • 方式一:vue-cli脚手架初始化Vue3项目

官方文档:https://cli.vuejs.org/zh/guid...

//    查看@vue/cli版本,确保@vue/cli版本在4.5.0以上
vue --version
//    安装或者升级你的@vue/cli
npm install -g @vue/cli
//     创建
vue create vue_test
// 启动
cd vue_test
npm run serve
  • 方式二:vite初始化Vue3项目

vite官网:https://vitejs.cn/

//     创建工程
npm init vite-app 
//    进入工程目录
cd 
//     安装依赖
npm install
//    运行
npm run dev

项目目录结构分析

这里的项目目录结构分析主要是main.js文件

  • Vue2里面的main.js

    new Vue({
    el: '#app',
    components: {},
    template: ''
    });
  • Vue3里面的main.js

    import { createApp } from 'vue'
    import App from './App.vue'
    createApp(App).mount('#app')

在Vue2里面,通过new Vue({})构造函数创建应用实例对象,而Vue3引入的不再是Vue的构造函数,引入的是一个名为createApp的工厂函数创建应用实例对象。

Vue3-devtool获取

devtool:https://chrome.zzzmh.cn/info?...

Composition API

setup

  • 理解:Vue3.0中一个新的配置项,值为一个函数
  • setup是所有Composition API(组合式API)的入口
  • 组件中所用到的数据、方法等等,均要配置在setup里面
  • setup函数的两种返回值

    • 若返回一个对象,则对象中的属性、方法,在模板中均可以直接使用
    • 若返回一个渲染函数,则可以自定义渲染内容
  • setup的执行时机

    • 在beforeCreate之前执行一次,此时this为undefined
  • setup的参数

    props:值为对象,包含:组件外部传递过来,且组件内部声明接收了的属性

    context:上下文对象

    • attrs:值为对象,包含:组件外部传递过来,但没有在props配置中声明的属性,相当于this.$attrs
    • slots:收到的插槽内容,相当于this.$slots
    • emit:分发自定义事件的函数,相当于this.$emit

注意事项:

  • 尽量不要与Vue2x的配置使用

    • Vue2x的配置(data、methods、computed)均可以访问到setup中的属性、方法
    • setup中不能访问Vue2x的配置(data、methods、computed)
    • 如果data里面的属性和setup里面的属性有重名,则setup优先
  • setup不能是一个async函数,因为返回值不再是return的对象,而是Promise,模板看不到return对象中的属性,但是后期也可以返回一个Promise实例,需要Suspense和异步组件的配合

示例一:setup函数的两种返回值





这里需要注意的是setup里面定义的属性和方法均要return出去,否则无法使用

示例二:setup里面的参数和方法和配置项混合使用





这段代码是先实现了setup里面的属性和方法,以及Vue2中配置项里面的属性和方法。接下来添加对应的混合方法





这里新增了test01和test02方法,分别点击,控制台可以看到,点击配置项里面test01方法时,除了自身的sex属性有值,setup里面定义的属性也有值以及方法也可以调用,点击setup里面定义的test02方法时,控制台只能输出setup里面定义的属性和方法,而配置项里面定义的属性和方法值均为undefined。

  • setup里面定义的属性和方法均可以在配置项里面使用(methods、computed、watch等),而配置项里面定义的属性和方法无法在setup里面调用
  • 如果setup里面的属性和data里面的属性有重名,则setup里面的属性优先

示例三:setup的执行时机
setup会在beforeCreate之前执行一次





查看控制台的话我们看到的顺序是setup>beforeCreate

setup里面context和props的使用

Vue2里面props和slot的使用

讲解setup这里面的两个参数之前,先回顾一下Vue2里面的相关知识

  • props和自定义事件的使用
  • attrs
  • slot(插槽)

示例一:Vue2props和自定义事件的使用

准备两个组件,分别为parent.vue组件和child.vue组件

parent.vue



child.vue




child组件对应的代码如下:






从0开始手把手带你入门Vue3-全网最全(1.1w字)_第1张图片
子组件通过props接收父组件传递的信息,通过this.$emit()自定义事件向父组件传递信息。当使用props接收数据的时候,attrs里面的数据为空,如果没有使用props接收数据的话,那么props里面就有值。

从0开始手把手带你入门Vue3-全网最全(1.1w字)_第2张图片

示例二:Vue2里面slot的使用

同理准备两个组件,一个Index.vue组件,另一个为MySlot.vue组件

Index.vue






MySlot.vue






从0开始手把手带你入门Vue3-全网最全(1.1w字)_第3张图片

ref

  • 作用:定义一个响应式数据
  • 语法:const xxx=ref(initValue)
  • 创建一个包含响应式数据的引用对象(reference对象);
  • JS中操作数据:xxx.value=xxx;
  • 模板中读取数据:不需要.value,直接:

    {{xxx}}

    备注:

    • 接收的数据可以是:基本类型,也可以是对象类型
    • 基本类型的数据:响应式依然是靠Object.defineProperty()的get和set完成的
    • 对象类型的数据:内部求助了Vue3.0中的一个新函数-reactive函数
      示例

      
      
      
      
      

      注意:

  • ref定义的响应式数据修改数据时必需要.value
  • ref定义的对象数据类型,内部求助了Vue3.0中的一个新函数-reactive函数
  • 模板中使用数据时不需要.value

reactive函数

  • 作用:定义一个对象类型的响应式数据(基本类型别用它,用ref函数)
  • 语法:const 代理对象=reactive(被代理的对象)接收一个对象(或数组),返回一个代理器对象(Proxy的实例对象,简称Proxy对象)
  • reactive定义的响应式数据是深层次的
  • 内部基于ES6的Proxy实现,通过代理对象的操作源对象的内部数据都是响应式的

    
    
    
    
    

    reactive对比ref

  • 从定义数据的角度对比

    • ref用来定义:基本类型数据
    • reactive用来定义:对象(或数组)类型数据
    • 备注:ref也可以用来定义对象(或数组)类型的数据,它内部会自动通过reactive转为代理对象
  • 从原理角度对比

    • ref通过Object.defineProperty()的get和set实现(响应式)数据劫持
    • reactive通过使用Proxy来实现响应式(数据劫持),并通过Reflect操作源对象内部的数据
  • 从使用角度

    • ref定义的数据:操作数据需要.value,读取数据时模板中直接读取不需要.value
    • reactive定义的数据:操作数据与读取数据均不需要.value

watch和watchEffect

    //    attr表示需要监视的属性
    //  情况一:监视单个ref定义的响应式数据
    watch(attr,(newValue,oldValue)=>{
        console.log('attr变化了',newValue,oldValue);
    })

   //  情况二; 监视多个ref定义的响应式数据
    watch([attr1,attr2,....,attrn],(newValue,oldValue)=>{
        console.log('attr1或attrn变化了',newValue,oldValue);
    })

    // obj表示需要监听的对象
     // 情况三:监视reactive定义的响应式数据
    //    若watch监视的是reactive定义的响应式数据,则无法正确获得oldValue
    //    若watch监视的是reactive定义的响应式数据,则强制打开开启了深度监视
     watch(obj,(newValue,oldValue)=>{
        console.log('obj变化了',newValue,oldValue)

     },{immediate:true,deep:false}); // 此处deep配置不在奏效

    // 情况四,监视reactive定义的响应式数据中的某个属性
      watch(()=>person.job,(newValue,oldValue)=>{
         console.log('person的job变化了',newValue,oldValue)
      },{immediate:true,deep:true})

     //  情况五:监视reactive定义的响应式数据中的某一些属性
    watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
            console.log('person的job变化了',newValue,oldValue)
    })
    // 特殊情况
    watch(()=>person.job,(newValue,oldValue)=>{
        console.log('person的job变化了',newValue,oldValue)
    },{deep:false});//  此处由于是监视reactive所定义的对象中的某个属性,所以deep配置有效
  • watch

    • 监视reactive定义的响应式数据时:oldValue无法正确获取、强制开启了深度监视(deep配置失效)
    • 监视reactive定义的响应式数据中某个属性时deep配置有效
      示例一:wath监听ref定义的响应式数据

      
      
      
      
      

      示例二:watch监听reactive定义的响应式数据

      
      
      
      
      
  • watchEffect

    • watch的套路是:既要指明监视的属性,也要指明监视的回调
    • watchEffect的套路是:不用指明监视那个属性,监视的回调中用到那个属性,那就监视那个属性
    • watchEffect有点像computed

      • 但computed注重的是计算出来的值(回调函数的返回值),所以必需要写返回值
      • 而watchEffect更注重的是过程(回调函数的函数体),所以不用写返回值
        示例

        
        
        
        
        

Vue2响应式原理VSVue3响应式原理

在Vue2中主要是通过数据劫持来实现响应式原理的,也就是基于Object.defineProperty来实现的,而Vue3中是通过Proxy和Reflect来实现的(个人最低层次上的理解,还望各位大佬海涵)。

那么我们来对比一下Vue3实现响应式的原理比Vue2实现响应式的原理好在哪里?

Vue2响应式原理

  • 实现原理

    • 对象类型:通过Object.defineProperty()对属性的读取,修改进行拦截(数据劫持)
    • 数组类型:通过重写更新数组的的一系列方法来实现拦截。(对数组的变更方法进行了包裹)
    Object.defineProperty(data,'count',{
      get(){}
      set(){}
    })
  • 存在问题

    • 新增属性、删除属性、界面不会自动更新
    • 直接通过下标修改数组,界面不会自动更新

    先看一个简单的示例

    
    
    
      
      Title
    
    
    

    学生信息

    姓名:{{student.name}}

    年龄:{{student.age}}

    性别:{{student.sex}}

    爱好:{{student.hobbies}}

    分别调用按钮对应的方法,控制台可以看到,新增性别属性时,student里面有性别这个属性,但是并没有实现响应式(视图没有更新),同理,其它两个按钮对应的方法也是一样。

原因:Vue2.0想要实现响应式数据的话,必需先在data里面定义,之后重新添加的数据无法实现响应式。
解决方案:

  • 新增/修改:vue.$set(target,propName/index,value)

    • {Object | Array} target
    • {string | number} propertyName/index
    • {any} value
  • 删除:vue.$delete(target,propName/index)

    • {Object | Array} target
    • {string | number} propertyName/index

此时我们修改对应的代码如下

    addSex(){   // 新增性别
        // this.student.sex='male';
        // vm.$set(this.student,'sex','male');
        this.$set(this.student,'sex',male);
        console.log(this.student);
    },
    deleteAge(){    // 删除年龄
        // delete this.student.age;
        // this.$delete(this.student,'age');
        vm.$delete(this.student,'age');
        console.log(this.student);
    },  
     updateHobbies(){   //   修改爱好
         // this.student.hobbies[0]='玩游戏';
         // this.$set(this.student.hobbies,0,'玩游戏');
         //  vm.$set(this.student.hobbies,0,'玩游戏');
         /**
                 * 或者使用数组变异的方法
                 * push()
                 * pop()
                 * shift()
                 * unshift()
                 * splice()
                 * sort()
                 * reverse()
             */
         this.student.hobbies.splice(0,1,'玩游戏');
         console.log(this.student);
       }

弊端

  • 必需定义在data里面的数据才能实现响应式
  • 如果后面添加的数据想要实现响应式,那么就需要调用对应的API

Object.defineProperty的简单示例

    let student={
        name:'张三',
        age:18,
    }
    let p={}
    Object.defineProperty(p,'name',{
        get(){  // 读取name时触发
            console.log('读取了name属性');
            return student.name;
        },
        set(value){ // 修改name时触发
            console.log('name发生了变化,视图发生了变化');
            student.name=value;
        }
    });
    console.log(p.name);
    p.name='李四';
    p.sex='male';
    delete p.name;

Vue3响应式原理

关于Proxy和Reflect的用法这里不过多介绍,如果有想要了解的推荐看MDN或者阮一峰老师的ES6

示例

    let user={
        name:'张三',
        age:18,
    }
    let p=new Proxy(user,{
        get(target,propName){
            console.log(`读取了p里面的${propName}属性`);
            Reflect.get(target,propName);
            // return target[propName];
        },
        set(target,propName,value){
            console.log(`修改了p里面的${propName}属性`);
            // target[propName]=value;
            Reflect.set(target,propName,value);
        },
        deleteProperty(target,propName){
            console.log(`删除了p里面的${propName}属性`);
            // delete target[propName];
            Reflect.deleteProperty(target,propName);
        }
    });
    console.log(p.name);
    p.name='李四';
    p.sex='male';
    delete p.age;

查看控制台,当读取name属性的时候触发get()方法,新增或者修改属性的时候触发set()方法,删除的时候触发deleteProperty()方法,这就是Vue3.0对响应式的改进。

生命周期和钩子函数

Vue2.0生命周期和钩子函数

从0开始手把手带你入门Vue3-全网最全(1.1w字)_第4张图片

vue3.0生命周期和钩子函数

从0开始手把手带你入门Vue3-全网最全(1.1w字)_第5张图片

Vue2和Vue3生命周期对比
beforeCreate Not needed*
created Not needed*
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
beforeUnmount onBeforeUnmount
unmounted onUnmounted
activated onActivated
deactivated onDeactivated
因为 setup是围绕 beforeCreate和 created生命周期钩子运行的,所以不需要显式地定义它们。换句话说,在这些钩子中编写的任何代码都应该直接在 setup函数中编写。

Vue3x中可以继续使用Vue2x中的生命周期钩子,但有两个被更名

  • beforeDestory改名为beforeUnmout
  • destoryed改名为unmouted

    
    
    
    
    

自定义hook

  • 什么是hook:本质是一个函数,把setup函数中使用的CompositionAPI进行了封装
  • 类似于vue2x中mixin
  • 自定义hook的优势:复用代码,让setup中的逻辑更清楚易懂

作为初学hook的我来说,我对于hook并没有了解多少,这里贴一些自己练习中的示例,现阶段的我感觉不出来export 导出函数和hook的区别和优点。示例的话是鼠标点击的时候获取当前坐标

示例





抽离单独的hook

  • 新建目录hook
  • hook目录下新建文件usePoint.js

usePoint.js

import {reactive,onMounted,onUnmounted} from 'vue'
export let getPoint=()=>{
    // 数据
    let point=reactive({
        x:0,
        y:0,
    })
    // 方法
    function getPoint(event){
        console.log(event)
        point.x=event.clientX;
        point.y=event.clientY;
    }
    // 生命周期钩子函数
    onMounted(()=>{
        window.addEventListener('click',getPoint);
    })
    onUnmounted(()=>{
        window.removeEventListener('click',getPoint);
    })
    return point
}

需要引入hook的.vue文件

    import {reactive,toRefs,onMounted,onUnmounted} from 'vue'
    import {getPoint} from "./hook/usePoint";
    export default {
        name: "hook_component01",
        setup(){
            let point=getPoint();
            return{
                ...toRefs(point)
            }
        }
    }

这个就是最简单hook的用法,如果有知道export 导出函数和hook区别的大佬,可以在下方评论区留言,感激不敬!!!

其它Composition API

toRef与toRefs

toRef

  • 作用:创建一个ref对象,其value值指向另一个对象中的某个属性值
  • 语法:const name=toRef(obj,'name')
  • 应用:要将响应式对象中的某个属性单独提供给外部使用时
  • 扩展:toRefs与toRef功能一致,但可以批量创建多个ref对象,toRefs(obj)

示例一





示例一里面直接返回person对象,导致每次取值的时候都需要person.xxx,这样既不美观也不优雅,修改一下代码。

示例二





错误用法示例一





错误用法示例二





toRefs

示例一





shallowRef和shallowReactive

  • shallowReactive:只处理对象最外层属性的响应式(浅响应式)
  • shallowRef:只处理基本数据类型的响应式,不进行对象的响应式处理
  • 什么时候用

    • 如果有一个对象数据,结构比较深,但变化时只是外层属性变化用shallowReactive
    • 如果有一个对象数据,后续功能不会修改该对象中的属性,而是生新的对象来替换用shallowRef

shallowRef示例





这里我们通过ref和shallowRef进行比对,点击x.y加1按钮的时候,视图不会触发更新,因为y的值对象作为深层次的,而直接点击sum加1的按钮的时候可以触发更新,sum直接是浅层次的,替换y的值的时候替换的是整个x的值(即整个对象),而不是x里面的值进行操作。

shallowReactive示例





点击修改姓名和修改年龄的按钮时,可以看到视图发生变化,点击涨薪的时候视图不会发生变化,但是数据发生了变化,这个大家可以使用控制台进行测试。

readonly和shallowReadonly

  • readonly:让一个响应式数据变为只读的(深只读)
  • shallowReadonly:让一个响应式变为只读的(浅只读)
    示例一

    
    
    
    
    


使用readonly的时候,按钮点击全部失效,我们看下shallowReadonly的效果


使用shallowReadonly的时候,修改姓名,修改年龄都不会发生变化,只有涨薪发生了变化

toRaw和markRaw

  • toRaw

    • 作用:将一个由reactive生成的响应式对象转为普通对象
    • 使用场景:用于读取响应式对象对应的普通对象,对这个普通对象的所有操作,不会引起页面更新
  • markRow

    • 作用:标记一个对象,使其永远不会再成为响应式对象

      应用场景:

    • 有些值不应该被设置为响应式的,例如复杂的第三方类库,
    • 当渲染具有不可变的数据源的大列表时,跳过响应式转换可以提高性能
      示例一




调用showRawPerson方法的时候,控制台可以看到输出最原始的person,sum的话,输出的undefined,toRaw对ref定义的响应式数据无效,接下来看下markRow的效果

示例二





这里新增了一个车信息的方法和相关属性到person对象里面,正常情况下,直接在reactive里面的追加的数据会实现响应式的,但是这里使用了markRaw方法,所以点击修改车的名字和价格时数据发生了变化,但是视图不会更新。

customRef

  • 作用:创建一个自定义的ref,并对其依赖项跟踪和更新触发进行显示控制,它需要一个工厂函数,该函数接收 track 和 trigger 函数作为参数,并且应该返回一个带有 get 和 set 的对象。
    实现防抖效果:
  • 1、先实现自定义双向绑定
  • 2、实现了双向绑定之后,实现防抖
    自定义双向绑定

    
    
    
    
    

从0开始手把手带你入门Vue3-全网最全(1.1w字)_第6张图片
在这里我们实现了数据的双向绑定,接下来是实现防抖





从0开始手把手带你入门Vue3-全网最全(1.1w字)_第7张图片

响应式数据的判断

  • isRef:检查一个值是否为ref对象
  • isReactive:检查一个对象是否由reactive创建的响应式代理
  • isReadonly:检查一个对象是否由readonly创建的只读代理
  • isProxy:检查一个对象是否由reactive或者readonly方法创建的代理

provide和inject

  • 作用:实现祖与后代组件间通信
  • 套路:父组件有一个provide选项来提供数据,后代组件有一个inject选项来开始使用这些数据

从0开始手把手带你入门Vue3-全网最全(1.1w字)_第8张图片

祖组件





后代组件





Fragment

  • 在vue2中:组件必需有一个根标签
  • 在vue3中:组件可以没有根标签,内部会将多个根标签包含在一个Fragment虚拟元素中

好处:减少标签层级,减少内存占用

Teleport

Teleport是一种能够将我们的组件html结构移动到指定位置的技术


    

我是一个弹窗

实现一个弹窗居中显示,有四个组件,分别为:teleport_parent,teleport_child,teleport_son,teleport_dialog,然后需要实现的效果是在teleport_son组件引入teleport_dialog组件,teleport_dialog显示的时候在屏幕正中央

teleport_parent.vue





teleport_child.vue





teleport_son.vue





teleport_dialog.vue





实现的效果如下

从0开始手把手带你入门Vue3-全网最全(1.1w字)_第9张图片
当我们点击按钮的时候,效果是这样的

从0开始手把手带你入门Vue3-全网最全(1.1w字)_第10张图片
点击按钮的时候,弹窗显示,但是在son组件里面会改变son的高度,这样子不太美观,如果弹窗使用定位的话可以使其脱离文档流,而不会撑开son里面的高度,但是postion:absolute是根据最近的有定位元素的父元素进行定位的,所以此方法不可靠,我们需要实现的效果是根据body来定位

修改dialog的样式





从0开始手把手带你入门Vue3-全网最全(1.1w字)_第11张图片

Suspense

作用:等待异步组件时渲染一些额外的内容,让应用有更好的用户体验

使用步骤:

  • 异步引入组件
import {defineAsyncComponent} from 'vue'
const child=defineAsyncComponent(()=>import('./components/Child.vue'))
  • 使用Suspense包裹组件,并配置好default和fallback

示例

suspense.vue





child.vue





如果使用以上代码引入的话,那么suspense和child组件将会同时加载,如果child里面还有其它子组件的话,子组件里面还有子组件,在网络慢的情况下,用户可能就看不到child组件以及child里面其它的组件。这会影响用户体验,修改对应的代码

suspense.vue





child.vue





为了看到效果,延迟了3秒之后显示组件

从0开始手把手带你入门Vue3-全网最全(1.1w字)_第12张图片

Vue2x和Vue3x的其它变化

1.全局API的转移

vue2.x有许多全局API和配置,例如:全局注册组件、注册全局指令等

  • 注册全局组件
Vue.component('MyButton',{
    data:()=>{
        count:0,
    },
        template:''
    });
  • 注册全局指令
Vue.directive('focus',{
    inserted:el=>el.foucus
})
  • Vue3.0中对这些API做出了调整

将全局的API,即Vue.xxx调整到应用实例app上

2.x 全局API(Vue) 3.x 实例API(app)
Vue.config.xxx app.config.xxx
Vue.config.productionTip 移除
Vue.component app.component
Vue.directive app.directive
Vue.mixin app.mixin
Vue.use app.use
Vue.prototype app.config.globalProperties

2.其它改变

  • data 选项应始终被声明为一个函数
  • 过度类的写法

Vue2.x的写法

.v-enter
.v-leave-to{
    opacity:0,
}
v-leave,
v-enter-to{
    opacity:1
}

Vue3.x的写法

.v-enter-from,
.v-leave-to{
    opacity:0
}
.v-leave-to,
.v-enter-to{
    opacity:1
}
  • 移除keyCode作为v-on的修饰符,同时也不再支持config.keyCodes
  • 移除v-on.navtive修饰符

父组件绑定事件


    v-on:close="handleComponentEvent"
v-on:click="handleNativeClickEvent"

子组件中声明自定义组件

export default{
    emits:['close']
}
  • 移除过滤器(filter)

    过滤器虽然看起来方便,但它需要一个自定义语法,打破大括号内表达式'只是javascript'的假设,这不仅有学习成本,而且有实现成 本, 建议用法调用或者计算属性去替换过滤器

    Vue3x相关资料

相关库名称 在线地址
Vue 3.0 官方文档(英文) 在线地址
Vue 3.0 中文文档 在线地址
Composition-API手册 在线地址
Vue 3.0 源码学习 在线地址
Vue-Router 官方文档 在线地址
Vuex 4.0 Github
vue-devtools Github
Vite 源码学习 线上地址
Vite 2.0 中文文档 线上地址
Vue3 新动态 线上地址

Vue3xUI组件库

Element-plus

Ant Design of Vue

Vant

NutUI 3

相关库名称 在线地址
Vue 3.0 实战星座物语 H5 项目 在线地址
Vue 3.0 UI 组件库开发 在线地址
Vue 3.0 + Vite 手册阅读 在线地址
Vue 3.0 入门之项目搭建(杨村长) 在线地址
Vue 3.0 入门(技术胖)【不太建议推荐】 在线地址
Vite 2.0 插件开发指南 在线地址
Vue 3.0 + Vite 2.0 快速搭建 Electron 应用 在线地址
Vue3.0视频(强烈推荐) 在线地址
Vue3.0驾照题库 在线地址

参考资料

掘金地址:https://juejin.cn/post/695512...

Vue.js官网:https://v3.cn.vuejs.org/

bilibili地址:https://www.bilibili.com/vide...

MDN地址:https://developer.mozilla.org...

ES6地址:https://es6.ruanyifeng.com/

总结

总体来说,学完这篇博客基本涵盖了Vue3中的绝大部分内容,写的也特别详细,笔记,配套资料和实战视频都有,主要看你愿不愿意抽出时间去学习,我自己认为学习是一辈子的事情,当然学习也是一件特别孤独的事情。如果本篇文章对您有所帮助的话,记得点赞、收藏和关注,原创不易,三连支持,感谢大家!

你可能感兴趣的