VUE3+TS+vueRouter4+vuex4

第一章 创建Vue3项目

• 查看vue-cli版本  

        查看@vue.cli版本，确保版本在4.5.0以上    

• vue -V 升级vue-cli至指定版本    

        npm uninstall vue-cli -g    npm install -g @vue/cli@4.5.6

• 创建vue3项目    

        vue create vue3cliproject

       

        

 

 第二章 生命周期钩子函数

• 新旧版本对比

       beforeCreate   -> setup()

       created            -> setup()

       beforeMount  ->  onbeforeMount

       mounted         ->  onMounted

       beforeupdate  ->  onBeforeupdate

       updated          ->  onUpdated

       beforeDestroy ->  onBeforeUnmount

       destroyed        ->  onUnmounted

       errorCaptured ->   onErrorCaptured

• 包含在<keep-alive>中的组件特有

        activated         ->   onActivated

        deactivated     ->   onDeactivated

• 新版生命周期函数，可以按需导入到组件中，且只能在setup()中使用

      

  第三章 setup

• 第一个形参props

       父组件 

      <child msg="儿子"/>

      子组件

      通过setup函数的第一个形参，接收props数据

      

• 第二个形参context

       context是一个上下文对象，它对组件暴露三个属性：attrs slots emit

1. context---attrs

         用途：当父组件传递数据给子组件时，子组件不通过props接收，那么父组件传递的数据就到 了setup中的context的attrs属性

       父组件 <child msg="儿子"/>

       子组件

        

     2. context---slots

         用途：用于接受渲染父组件传递的插槽内容

         父组件

        <child msg="儿子">父组件通过插槽传递的内容</child>

         子组件

          

          

       3. context---emit

          用途：向父组件触发事件

          子组件 
          

      父组件

           

     第四章 reactive、ref

• setup函数中默认定义的变量并不是响应式的（即页面不会随着数据改变而改变），如果想让变量变为响应式的变量，需要使用ref和reactive函数修饰变量。
• ref、reactive的区别  ：

          reactive 只能传入对象类型的参数 所以基本数据类型添加响应式状态只能用ref

                   （ref也可以定义复杂的数据）     ‘

          ref 获取数据值需要添加 .value 

• ref、reactive的使用

       ref:

       

       reactive:

       

 第五章  toRef、toRefs

•  toRef、toRefs区别：

    toRef：只希望转换一个reactive对象中的属性为ref，获取数据值需要加.value

    toRefs：可以将reactive返回的对象中的属性都转成ref

• ref、reactive的使用

    

   

 第六章 computed、watch

• computed函数用来创建计算属性，computed的返回值是一个ref的实例

   

•  watch函数用来监视某些数据项的变化，从而触发某些特定的动作

    

 第七章  vueRouter4

• 安装并使用vueRouter4

       安装

       npm install vue-router@4.0.0

       创建路由

       

     

• vueRouter3的使用

     

 第八章  provide、inject

 第九章  异步组件（suspense、async/await）