浅谈vue3.0基本用法与优势

自3.0问世(2020/09)至今一年多了, 总结一下3.0的看法和基本用法

1, 3.0现状
    发布一年多的时间了,3.0的社区有了相当的完善,同时也在迅速扩大, 推荐几个常用组件库

     *  element-plus
        类似element的组件库

     *  vant
        有赞, 已完成对3.0的适配

      *  ant-design-vue 
         类似于ant design

      *  primevue
          最早支持3.0的库,内容丰富

2, 3.0对于2.0的优势

     a: 性能

         * 首屏渲染更快

         * diff算法更优

         * 打包体积更小

     b:  引入组合式api(composition api)

          能更好的复用复杂的逻辑,适合大型项目的开发, 从而打破2.0不适合大型项目开发的壁垒

     

     c:  对ts更好的支持
   

3, 3.0新增及优化用法

       a: setup入口函数  

            * setup 函数是一个新的组件选项，作为组件中组合式API 的起点（入口）

            *  从生命周期角度来看，setup 会在 beforeCreate 钩子函数之前执行

            * setup 中不能使用 this， this 指向 undefined

               (如b中图片所示)

        b: 定义变量 ref/ reactive

             * ref 主要用于定义num, string, bool, array
             * reactive 则用于定义object
             * toRefs 用于双向绑定的结构赋值d

          

 c: computed 计算属性

     

d: watch 与 watchEffect
   a: watch,监听具体某一个变量, 三个参数, 第一个监听的对象, 第二个回调函数,第三个是是否深度监听和立刻执行(deep/immediate)

   b: watchEffets: 监听的一种, 参数是回调函数, 回调函数内部的对应值发生变化, 便会执行函数体
   c: 两者应用场景: 推荐在大部分时候用 watch 显式的指定依赖以避免不必要的重复触发，也避免在后续代码修改或重构时不小心引入新的依赖。watchEffect 适用于一些逻辑相对简单，依赖源和逻辑强相关的场景（或者懒惰的场景 ）。

    

    e: 生命周期

       

   f: 组件通信

      * 父子组件传值, 2.0类似,不做赘述. 唯一需要注意的是setup(props, comtext)中, context.emit可触发父组件函数

      * 隔代及多级嵌套组件

        provide, inject

        用法跟2.0类似,但是不同点在于2.0中provide响应变化的值,在inject中不能实时响应. 但是3.0是同步的        

g: 属性或者方法的全局挂载
   *  2.0使用原型的方法挂在,例如: vue.prototype.$ajax = Axios

   *  3.0中引入全局属性, 例如: app.config.globalProperties.$ajax = Axios

h: ref获取dom的应用

   

i: 3.0中引入mitt, 代替总线bug, 用法稍有不同,整体类似

 import Mitt from 'mitt'

 const bus = new Mitt()

 bus.emit('send', value)

  bus.on('send', (value) => {} )

如果文中展示有所缺陷,欢迎指正