美文网首页
Vue3新特性笔记

Vue3新特性笔记

作者: 小麻烦爱学习 | 来源:发表于2020-10-17 22:39 被阅读0次

    vue3.0的主要变化

    1. 响应式基本原理:Object.defineProperty -> Proxy,提高性能
    2. 初始化方式:Options api -> composition api,提供代码复用,更好的tree-shaking
    3. 初始化项目:vue-cli -> vite,提高开发效率
    4. 扩展方法:Vue.property.xxx -> config.globalProperties.xxx,更好的tree-shaking
    5. 实例化:new Vue -> createApp。
      原来的写法,如果一个项目有多个Vue实例,那么多个实例造成污染:
      ```
      Vue.use(plugin)
      new Vue({el:'app1'});
      new Vue({el:'app2'});
      而createApp这种方式,每次创建一个vue实例,然后use不同插件
      app1 = createApp({});
      app2 = createApp({});
      app1.use(plugin1)
      app2.use(plugin2)
    6. setup内部不支持this,因为setup时组件实例还没有创建,通过setup的第二个参数context获取实例
    7. 支持ts -> ts的优点:类型检查/编译器提示/ts拥抱ES6规范及部分起草规范

    vite是什么?

    vite是基于vue3单文件组件的非打包开发服务器
    原理:ES module/.vue文件拆分为http请求+type?=参数/热更新(koa/websocket/watcher)

    1. 使用ES module,代码以模块的方式引入到文件;即在浏览器使用import/export方式导入/导出
      webpack使用require方式导入
    2. vite使用koa构建的服务端
      webpack使用webpack-dev-server构建服务端
      参考:https://www.jianshu.com/p/07960e4bbb01

    vue3.0中的setup等新语法

    setup:是专门为使用vue3的composition-api开放的统一入口,执行时机:beforeCreate 与 created 之间
    reactive: 内部使用new Proxy(handle, target)
    ref:把普通值包装成响应式数据 功能类似于$set
    toRefs: 解构reactive创建的响应式对象

    composition api是什么?

    组合api:将组件属性公开为函数api
    data -> reactive()/ref()
    computed -> computed():创建计算属性,返回的是ref实例
    watch -> watch()
    provide/inject -> provide()/inject()
    lifeCicle -> on+xxx

    options api的优点:保证代码的下限,在指定的地方写指定的代码
    options api的缺点:同一个逻辑代码比较分散

    composition api的优点:自由度高,复用性提高
    composition api的缺点:对编码人员的要求比较高

    composition API的设计动机

    1. 逻辑复用及代码整理
      vue2.x中代码复用是通过mixin提取公共逻辑和通过作用域插槽编写复用性组件
      mixin的缺点:名称一样时会被覆盖
      作用域插槽的缺点:只能在模板中使用
      vue3.0中代码复用通过composition API。对于业务逻辑相同的代码,可以抽取到一个js文件,然后导入到不同到组件
      composition的缺点:自由度高,需要编码人员有比较高的抽象能力
    2. 更好的typescript支持

    相关文章

      网友评论

          本文标题:Vue3新特性笔记

          本文链接:https://www.haomeiwen.com/subject/rttqmktx.html