10分钟让你快速上手Vue3

经过了漫长地迭代，Vue 3.0 终于在上 2020-09-18 发布了，带了翻天覆地的变化，使用了 Typescript 进行了大规模的重构，带来了 Composition API RFC 版本，类似 React Hook 一样的写 Vue，可以自定义自己的 hook ，让使用者更加的灵活，接下来总结一下 vue 3.0 带来的部分新特性。

创新互联专注于企业全网营销推广、网站重做改版、灯塔网站定制设计、自适应品牌网站建设、H5网站设计、成都做商城网站、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为灯塔等各大城市提供网站开发制作服务。

  1. setup()
  2. ref()
  3. reactive()
  4. isRef()
  5. toRefs()
  6. computed()
  7. watch()
  8. LifeCycle Hooks(新的生命周期)
  9. Template refs
  10. globalProperties
  11. Suspense

Vue2 与 Vue3 的对比

  • 对 TypeScript 支持不友好(所有属性都放在了 this 对象上，难以推倒组件的数据类型)
  • 大量的 API 挂载在 Vue 对象的原型上，难以实现 TreeShaking。
  • 架构层面对跨平台 dom 渲染开发支持不友好
  • CompositionAPI。爱 ReactHook 启发
  • 更方便的支持了 jsx
  • Vue 3 的 Template 支持多个根标签，Vue 2 不支持
  • 对虚拟 DOM 进行了重写、对模板的编译进行了优化操作...

一、setup 函数

setup() 函数是 vue3 中，专门为组件提供的新属性。它为我们使用 vue3 的 Composition API 新特性提供了统一的入口, setup 函数会在 beforeCreate 之后、created 之前执行, vue3 也是取消了这两个钩子，统一用 setup 代替, 该函数相当于一个生命周期函数，vue 中过去的 data，methods，watch 等全部都用对应的新增 api 写在 setup()函数中

 
 
 
    
  
  
  
  1. setup(props, context) { 
    2.   
  
  
  2.     context.attrs 
    3.   
  
  
  3.     context.slots 
    4.   
  
  
  4.     context.parent 
    5.   
  
  
  5.     context.root 
    6.   
  
  
  6.     context.emit 
    7.   
  
  
  7.     context.refs 
    8.   
  
  
  8.  
    9.   
  
  
  9.     return { 
    10.   
  
  
  10.  
    11.   
  
  
  11.     } 
    12.   
  
  
  12.   } 
    13.
  • props: 用来接收 props 数据
  • context 用来定义上下文, 上下文对象中包含了一些有用的属性，这些属性在 vue 2.x 中需要通过 this 才能访问到, 在 setup() 函数中无法访问到 this，是个 undefined
  • 返回值: return {}, 返回响应式数据, 模版中需要使用的函数

二、reactive 函数

reactive() 函数接收一个普通对象，返回一个响应式的数据对象, 想要使用创建的响应式数据也很简单，创建出来之后，在 setup 中 return 出去，直接在 template 中调用即可

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4.  import { defineComponent, defineAsyncComponent } from "vue"; 
    5.   
  
  
  5.  const MyComponent = defineAsyncComponent(() => import('./Component')); 
    6.   
  
  
  6.  
    7.   
  
  
  7. export default defineComponent({ 
    8.   
  
  
  8.    components: { 
    9.   
  
  
  9.      MyComponent 
    10.   
  
  
  10.    }, 
    11.   
  
  
  11.    setup() { 
    12.   
  
  
  12.      return {} 
    13.   
  
  
  13.    } 
    14.   
  
  
  14. }) 
    15.   
  
  
  15.  
    16.   
  
  
  16.  
    17.   
  
  
  17.  
    18.

十二、vue 3.x 完整组件模版结构

一个完成的 vue 3.x 完整组件模版结构包含了:组件名称、 props、components、setup(hooks、computed、watch、methods 等)

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3.  
    4.   
  
  
  4. import { computed, defineComponent, getCurrentInstance, onMounted, PropType, reactive, ref, toRefs } from 'vue'; 
    5.   
  
  
  5.  
    6.   
  
  
  6. interface IState { 
    7.   
  
  
  7.   count: 0, 
    8.   
  
  
  8.   name: string, 
    9.   
  
  
  9.   list: Array   
  
  
  10. } 
    11.   
  
  
  11.  
    12.   
  
  
  12. export default defineComponent({ 
    13.   
  
  
  13.   name: 'demo', 
    14.   
  
  
  14.   // 父组件传子组件参数 
    15.   
  
  
  15.   props: { 
    16.   
  
  
  16.     name: { 
    17.   
  
  
  17.       type: String as PropType, 
    18.   
  
  
  18.       default: 'vue3.x' 
    19.   
  
  
  19.     }, 
    20.   
  
  
  20.     list: { 
    21.   
  
  
  21.       type: Array as PropType, 
    22.   
  
  
  22.       default: () => [] 
    23.   
  
  
  23.     } 
    24.   
  
  
  24.   }, 
    25.   
  
  
  25.   components: { 
    26.   
  
  
  26.     /// TODO 组件注册 
    27.   
  
  
  27.   }, 
    28.   
  
  
  28.   emits: ["emits-name"], // 为了提示作用 
    29.   
  
  
  29.   setup (props, context) { 
    30.   
  
  
  30.     console.log(props.name) 
    31.   
  
  
  31.     console.log(props.list) 
    32.   
  
  
  32.  
    33.   
  
  
  33.  
    34.   
  
  
  34.     const state = reactive({ 
    35.   
  
  
  35.       name: 'vue 3.0 组件', 
    36.   
  
  
  36.       count: 0, 
    37.   
  
  
  37.       list: [ 
    38.   
  
  
  38.         { 
    39.   
  
  
  39.           name: 'vue', 
    40.   
  
  
  40.           id: 1 
    41.   
  
  
  41.         }, 
    42.   
  
  
  42.         { 
    43.   
  
  
  43.           name: 'vuex', 
    44.   
  
  
  44.           id: 2 
    45.   
  
  
  45.         } 
    46.   
  
  
  46.       ] 
    47.   
  
  
  47.     }) 
    48.   
  
  
  48.  
    49.   
  
  
  49.     const a = computed(() => state.name) 
    50.   
  
  
  50.  
    51.   
  
  
  51.     onMounted(() => { 
    52.   
  
  
  52.  
    53.   
  
  
  53.     }) 
    54.   
  
  
  54.  
    55.   
  
  
  55.     function handleClick () { 
    56.   
  
  
  56.       state.count ++ 
    57.   
  
  
  57.       // 调用父组件的方法 
    58.   
  
  
  58.       context.emit('emits-name', state.count) 
    59.   
  
  
  59.     } 
    60.   
  
  
  60.  
    61.   
  
  
  61.     return { 
    62.   
  
  
  62.       ...toRefs(state), 
    63.   
  
  
  63.       handleClick 
    64.   
  
  
  64.     } 
    65.   
  
  
  65.   } 
    66.   
  
  
  66. }); 
    67.   
  
  
  67.  
    68.   
  
  
  68.  
    69.   
  
  
  69.  
    70.   
  
  
  70.  
    71.   
  
  
  71.  
    72.   
  
  
  72. import { computed, defineComponent, getCurrentInstance, onMounted, PropType, reactive, ref, toRefs } from 'vue'; 
    73.   
  
  
  73.  
    74.   
  
  
  74. interface IState { 
    75.   
  
  
  75.   count: 0, 
    76.   
  
  
  76.   name: string, 
    77.   
  
  
  77.   list: Array   
  
  
  78. } 
    79.   
  
  
  79.  
    80.   
  
  
  80. export default defineComponent({ 
    81.   
  
  
  81.   name: 'demo', 
    82.   
  
  
  82.   // 父组件传子组件参数 
    83.   
  
  
  83.   props: { 
    84.   
  
  
  84.     name: { 
    85.   
  
  
  85.       type: String as PropType, 
    86.   
  
  
  86.       default: 'vue3.x' 
    87.   
  
  
  87.     }, 
    88.   
  
  
  88.     list: { 
    89.   
  
  
  89.       type: Array as PropType, 
    90.   
  
  
  90.       default: () => [] 
    91.   
  
  
  91.     } 
    92.   
  
  
  92.   }, 
    93.   
  
  
  93.   components: { 
    94.   
  
  
  94.     /// TODO 组件注册 
    95.   
  
  
  95.   }, 
    96.   
  
  
  96.   emits: ["emits-name"], // 为了提示作用 
    97.   
  
  
  97.   setup (props, context) { 
    98.   
  
  
  98.     console.log(props.name) 
    99.   
  
  
  99.     console.log(props.list) 
    100.   
  
  
  100.  
    101.   
  
  
  101.  
    102.   
  
  
  102.     const state = reactive({ 
    103.   
  
  
  103.       name: 'vue 3.0 组件', 
    104.   
  
  
  104.       count: 0, 
    105.   
  
  
  105.       list: [ 
    106.   
  
  
  106.         { 
    107.   
  
  
  107.           name: 'vue', 
    108.   
  
  
  108.           id: 1 
    109.   
  
  
  109.         }, 
    110.   
  
  
  110.         { 
    111.   
  
  
  111.           name: 'vuex', 
    112.   
  
  
  112.           id: 2 
    113.   
  
  
  113.         } 
    114.   
  
  
  114.       ] 
    115.   
  
  
  115.     }) 
    116.   
  
  
  116.  
    117.   
  
  
  117.     const a = computed(() => state.name) 
    118.   
  
  
  118.  
    119.   
  
  
  119.     onMounted(() => { 
    120.   
  
  
  120.  
    121.   
  
  
  121.     }) 
    122.   
  
  
  122.  
    123.   
  
  
  123.     function handleClick () { 
    124.   
  
  
  124.       state.count ++ 
    125.   
  
  
  125.       // 调用父组件的方法 
    126.   
  
  
  126.       context.emit('emits-name', state.count) 
    127.   
  
  
  127.     } 
    128.   
  
  
  128.  
    129.   
  
  
  129.     return { 
    130.   
  
  
  130.       ...toRefs(state), 
    131.   
  
  
  131.       handleClick 
    132.   
  
  
  132.     } 
    133.   
  
  
  133.   } 
    134.   
  
  
  134. }); 
    135.   
  
  
  135.  
    136.  
 
 
    vue 3 的生态
      

    • 官网
    • 源码
    • vite 构建器
    • 脚手架:https://cli.vuejs.org/
    • vue-router-next
    • vuex4.0
    

    UI 组件库
    • vant2.x
    • Ant Design of Vue 2.x
    • element-plus
                
    
                分享名称：10分钟让你快速上手Vue3
                
    
                URL地址：http://www.csdahua.cn/qtweb/news45/214295.html
            
    
            
    
                网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等
                                
    
            
    
                广告
                
            
    
            
    
                声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
                快上网
            
    
        
        
    
            
    成都快上网为您推荐相关内容
    
            
        
    
    
    
    
        
    
            
    网站收录知识
    
            
        
    
        
    
            
    各行业网站
    
            
        
    
    
    


    
    
    
        微官网开发　　 　品牌网站建设公司　　 　添翼二手车鉴定　　 　app开发　　 　正泰动物　　 　圣月冷冻库　　 　400电话办理　　 　温江网站建设　　 　成都企业网站建设　　 　成都网站维护　　 　服务器托管　　 　合江网站建设　　 　艾名斯智能　　 　成都小程序开发公司　　 　重庆电信回兴机房　　 　网页设计　　 　成都定制网站　　 　关键词优化　　 　绵阳电信机房　　 　域名注册