vue3.0 Composition API上手体验

vue3.0 Composition API上手体验

vue3.0 对比 vue2.0 优势

  • vue3.0 相比 vue2.0 性能提升了近 50%,框架内部做了大量性能优化,包括:虚拟dom,编译模板,Proxy 的新数据监听,更小的打包文件等
  • vue3.0 新的组合式 API(即 Composition API)根据逻辑相关性组织代码,相比于 vue2.0 的 Options API,提高了代码的可读性和可维护性,更适合大型项目的编写方式
  • vue3.0 对 Typescript 支持更好,去除了繁琐的 this 操作,更强大的类型推导

vue3.0 对比 vue2.0 语法区别

  • vue3.0 支持组件中使用多个根节点,可以减少节点层级深度,也希望开发者能够明确语义

  • vue3.0 删除了过滤器(filters),将不在支持,官方建议使用计算属性(computed)替换过滤器

  • vue3.0 暴露出很多 API 供开发者使用,可以根据需求,将所需要的 API 从 Vue 中导入。考虑到 tree-shaking,利用了 import 和 export 的语法,实现了按需打包模块的功能

  • vue3.0 中新增了一个新的全局 API createApp,调用 createApp 返回一个应用实例,该应用实例暴露出来全局 API(vue3.0 将可以全局改变 Vue 行为的 API 从原来的 Vue 构造函数上转移到了实例上了)

    //vue2.0创建
    import Vue from 'vue'
    import App from './App.vue'
    
    Vue.config.productionTip = false
    
    new Vue({
      render: h => h(App),
    }).$mount('#app')
    
    
    //vue3.0创建
    import { createApp } from 'vue'
    import App from './App.vue'
    
    createApp(App).mount('#app');
    

vue3.0 对比 vue2.0 响应式

Object.defineProperty 只能监听到属性的读写,而 Proxy 除读写外还可以监听属性的删除,方法的调用等

  • vue2.0 数据响应式的原理是通过遍历 data 属性,利用 Object.definePrototype 将其转化成 setter/getter,在数据变动时发布消息给订阅者,触发相应的监听回调,由于 js 的限制,vue 不能检测数组和对象属性的添加和删除
  • vue3.0 基于 Proxy 来做数据的劫持代理,可以原生支持到数组的响应式,不需要重写数组的原型,还可以直接检测数组和对象属性的新增和删除(解决了 vue2.0 不能检测数组和对象属性的添加和删除的问题)
vue3.0 对 Typescript 支持更好
  • Typescript 是 javascript 类型的超集,它可以编译成纯的 javascript
  • Typescript 可以在任何浏览器、任何计算机和任何操作系统上运行,并且是开源的
  • Typescript 可以提供静态类型检查,规范团队的编码及使用方式,适合大型项目的开发
  • IDE 的友好提示,也是适合大型项目的开发

vue3.0 常用 API

Vue 组合式 API:https://composition-api.vuejs.org/zh/api.html#setup

setup

setup 函数是一个新的组件选项,作为在组件内使用 Composition API 的入口函数,变量、方法都定义在该函数中

  • setup 函数代替了 beforeCreate 和 created 两个生命周期函数,在生命周期 beforeCreate 之前被调用
  • this 在 setup() 中不可用,直接使用声明的变量名来访问数据(由于 setup() 在解析 2.x 选项前被调用,setup() 中的 this 将与 2.x 选项中的 this 完全不同。同时在 setup() 和 2.x 选项中使用 this 时将造成混乱)
  • setup 函数有两个参数:propscontext
    • props 对象为当前组件允许外界传递过来的参数名称以及对应的响应式的值
    • context 是一个上下文对象,暴露出三个属性:attrs 、slots、emit
  • setup 函数内定义的变量使用 return 暴露出去,供 template 中使用
<template>
   <div>
      {{ count }}
      {{ obj.count }}
   </div>
</template>

<script>
//引入需要的API
import { ref, reactive } from 'vue'

export default {
   name: 'home',
   setup() {
      const count = ref(0)
      export let obj = reactive({ count: 0 })
      
      //通过return暴露出去,供template中使用
      return {
         count,
         obj
      }
   }
}
</script>

<style scoped>
  
</style>

使用

你可能感兴趣的:(vue,vue3.0,Composition,API,vue,vue-cli4)