一篇干货，轻松上手Vue.js3.0

以下是最新的 vue3.x 一些新特性 - 希望对你上手Vue最新版有所帮助！

创新互联主营崆峒网站建设的网络公司,主营网站建设方案,手机APP定制开发,崆峒h5重庆小程序开发公司搭建,崆峒网站营销推广欢迎崆峒等地区企业咨询

1. 初始化项目

 
 
 
    
  
  
  
  1. // ① npm i -g @vue/cli 
    2. 
  
  
  
  2. // ② vue create my-project 
    3. 
  
  
  
  3. // ③ npm install @vue/composition-api -S 
    4. 
  
  
  
  4. // ④ main,js 
    5. 
  
  
  
  5. import Vue from 'vue' 
    6. 
  
  
  
  6. import VueCompositionApi from '@vue/composition-api' 
    7. 
  
  
  
  7. Vue.use(VueCompositionApi)
    8.

2. setup方法

setup是vue3.x中新的操作组件属性的方法，它是组件内部暴露出所有的属性和方法的统一API。

2.1 执行时机

setup的执行时机在：beforeCreate 之后 created之前

 
 
 
    
  
  
  
  1. setup(props, ctx) { 
    2. 
  
  
  
  2.     console.log('setup') 
    3. 
  
  
  
  3.   }, 
    4. 
  
  
  
  4.   beforeCreate() { 
    5. 
  
  
  
  5.     console.log('beforeCreate') 
    6. 
  
  
  
  6.   }, 
    7. 
  
  
  
  7.   created() { 
    8. 
  
  
  
  8.     console.log('created') 
    9. 
  
  
  
  9.   },
    10.

2.2 接受props数据

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
  2.  
    3. 
 
 
 
 
 
 
    
  
  
  
  1. // 通过 setup 函数的第一个形参，接收 props 数据： 
    2. 
  
  
  
  2. setup(props) { 
    3. 
  
  
  
  3.   console.log(props) 
    4. 
  
  
  
  4. }, 
    5. 
  
  
  
  5. // 在 props 中定义当前组件允许外界传递过来的参数名称： 
    6. 
  
  
  
  6. props: { 
    7. 
  
  
  
  7.     p1: String 
    8. 
  
  
  
  8. } 
    9. 
  
  
  
  9. /* 
    10. 
  
  
  
  10. {} 
    11. 
  
  
  
  11. p1: "传值给 com-setup" 
    12. 
  
  
  
  12. get p1: ƒ reactiveGetter() 
    13. 
  
  
  
  13. set p1: ƒ reactiveSetter(newVal) 
    14. 
  
  
  
  14. __proto__: Object 
    15. 
  
  
  
  15. */
    16.

2.3 context

setup 函数的第二个形参是一个上下文对象，这个上下文对象中包含了一些有用的属性，这些属性在 vue 2.x 中需要通过 this 才能访问到，在 vue 3.x 中，它们的访问方式如下：

 
 
 
    
  
  
  
  1. setup(props, ctx) { 
    2. 
  
  
  
  2.     console.log(ctx) 
    3. 
  
  
  
  3.     console.log(this) // undefined 
    4. 
  
  
  
  4.   }, 
    5. 
  
  
  
  5. /* 
    6. 
  
  
  
  6. attrs: Object 
    7. 
  
  
  
  7. emit: ƒ () 
    8. 
  
  
  
  8. listeners: Object 
    9. 
  
  
  
  9. parent: VueComponent 
    10. 
  
  
  
  10. refs: Object 
    11. 
  
  
  
  11. root: Vue 
    12. 
  
  
  
  12. ... 
    13. 
  
  
  
  13. */
    14.

注意：在 setup() 函数中无法访问到 this

3. reactive

reactive函数接收一个普通函数，返回一个响应式的数据对象。

reactive函数等价于 vue 2.x 中的 Vue.observable() 函数，vue 3.x 中提供了 reactive() 函数，用来创建响应式的数据对象，基本代码示例如下：

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
    3.

4. ref

ref() 函数用来根据给定的值创建一个响应式的数据对象，ref() 函数调用的返回值是一个对象，这个对象上只包含一个 .value 属性：

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
    3.

4.1 在 reactive 对象中访问 ref 创建的响应式数据

当把 ref() 创建出来的响应式数据对象，挂载到 reactive() 上时，会自动把响应式数据对象展开为原始的值，不需通过 .value 就可以直接被访问，例如：

 
 
 
    
  
  
  
  1. setup() { 
    2. 
  
  
  
  2.   const refrefCount = ref(0) 
    3. 
  
  
  
  3.   const state = reactive({refCount}) 
    4. 
  
  
  
  4.   console.log(state.refCount) // 输出 0 
    5. 
  
  
  
  5.   state.refCount++ // 此处不需要通过 .value 就能直接访问原始值 
    6. 
  
  
  
  6.   console.log(refCount) // 输出 1 
    7. 
  
  
  
  7.   return { 
    8. 
  
  
  
  8.     refCount 
    9. 
  
  
  
  9.   } 
    10. 
  
  
  
  10. }
    11.

注意：新的 ref 会覆盖旧的 ref，示例代码如下：

 
 
 
    
  
  
  
  1. setup() { 
    2. 
  
  
  
  2.   // 创建 ref 并挂载到 reactive 中 
    3. 
  
  
  
  3.   const c1 = ref(0); 
    4. 
  
  
  
  4.   const state = reactive({ c1 }); 
    5. 
  
  
  
  5.   // 再次创建 ref，命名为 c2 
    6. 
  
  
  
  6.   const c2 = ref(9); 
    7. 
  
  
  
  7.   // 将 旧 ref c1 替换为 新 ref c2 
    8. 
  
  
  
  8.   state.c1 = c2; 
    9. 
  
  
  
  9.   state.c1++;
    10. 
  
  
  
  10.   console.log(state.c1); // 输出 10 
    11. 
  
  
  
  11.   console.log(c2.value); // 输出 10 
    12. 
  
  
  
  12.   console.log(c1.value); // 输出 0 
    13. 
  
  
  
  13. }
    14.

5. isRef

isRef() 用来判断某个值是否为 ref() 创建出来的对象；应用场景：当需要展开某个可能为 ref() 创建出来的值的时候，例如：

 
 
 
    
  
  
  
  1. import { ref, reactive, isRef } from "@vue/composition-api"; 
    2. 
  
  
  
  2. export default { 
    3. 
  
  
  
  3.   setup() { 
    4. 
  
  
  
  4.     const unwrapped = isRef(foo) ? foo.value : foo 
    5. 
  
  
  
  5.   }
    6. 
  
  
  
  6. };
    7.

6. toRefs

toRefs() 函数可以将 reactive() 创建出来的响应式对象，转换为普通的对象，只不过，这个对象上的每个属性节点，都是 ref() 类型的响应式数据。

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
    3.

7. computed计算属性

7.1 只读的计算属性

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
    3.

7.2 可读可写的计算属性

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
    3.

8. watch

watch() 函数用来监视某些数据项的变化，从而触发某些特定的操作，使用之前需要按需导入：

 
 
 
    
  
  
  
  1. import { watch } from '@vue/composition-api'
    2.

8.1 基本用法

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
    3.

8.2 监视数据源

监视 reactive 类型的数据源：

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
    3.

监视 ref 类型的数据源：

 
 
 
    
  
  
  
  1. export default { 
    2. 
  
  
  
  2.   setup() { 
    3. 
  
  
  
  3.     // 定义数据源 
    4. 
  
  
  
  4.     let count = ref(0); 
    5. 
  
  
  
  5.     // 指定要监视的数据源 
    6. 
  
  
  
  6.     watch(count, (count, prevCount) => { 
    7. 
  
  
  
  7.       console.log(count, prevCount) 
    8. 
  
  
  
  8.     }) 
    9. 
  
  
  
  9.     setInterval(() => { 
    10. 
  
  
  
  10.       count.value += 2 
    11. 
  
  
  
  11.     }, 2000) 
    12. 
  
  
  
  12.     console.log(count.value) 
    13. 
  
  
  
  13.     return { 
    14. 
  
  
  
  14.       count 
    15. 
  
  
  
  15.     } 
    16. 
  
  
  
  16.   } 
    17. 
  
  
  
  17. };
    18.

8.3 监听多个数据源

监视 reactive 类型的数据源：

 
 
 
    
  
  
  
  1. export default { 
    2. 
  
  
  
  2.   setup() { 
    3. 
  
  
  
  3.     const state = reactive({count: 100, name: 'houfei'}) 
    4. 
  
  
  
  4.     watch( 
    5. 
  
  
  
  5.       // 监听count name 
    6. 
  
  
  
  6.       [() => state.count, () => state.name], 
    7. 
  
  
  
  7.       // 如果变换 执行以下函数 
    8. 
  
  
  
  8.       ([newCount, newName], [oldCount, oldName]) => { 
    9. 
  
  
  
  9.         console.log(newCount, oldCount) 
    10. 
  
  
  
  10.         console.log(newName, oldName) 
    11. 
  
  
  
  11.       }, 
    12. 
  
  
  
  12.       { lazy: true} // 在 watch 被创建的时候，不执行回调函数中的代码 
    13. 
  
  
  
  13.     ) 
    14. 
  
  
  
  14.     setTimeout(() => { 
    15. 
  
  
  
  15.       state.count += 2 
    16. 
  
  
  
  16.       state.name = 'qweqweewq' 
    17. 
  
  
  
  17.     }, 3000) 
    18. 
  
  
  
  18.     return state 
    19. 
  
  
  
  19.   } 
    20. 
  
  
  
  20. };
    21.

监视 ref 类型的数据源：

 
 
 
    
  
  
  
  1. export default { 
    2. 
  
  
  
  2.   setup() { 
    3. 
  
  
  
  3.     // 定义数据源 
    4. 
  
  
  
  4.     const count = ref(10) 
    5. 
  
  
  
  5.     const name = ref('zs') 
    6. 
  
  
  
  6.     // 指定要监视的数据源 
    7. 
  
  
  
  7.     watch( 
    8. 
  
  
  
  8.       [count, name], 
    9. 
  
  
  
  9.       ([newCount, newName], [oldCount, oldName]) => { 
    10. 
  
  
  
  10.         console.log(newCount, oldCount) 
    11. 
  
  
  
  11.         console.log(newName, oldName) 
    12. 
  
  
  
  12.       }, 
    13. 
  
  
  
  13.       { lazy: true}
    14. 
  
  
  
  14.     ) 
    15. 
  
  
  
  15.     setInterval(() => { 
    16. 
  
  
  
  16.       count.value += 2
    17. 
  
  
  
  17.     }, 2000) 
    18. 
  
  
  
  18.     console.log(count.value) 
    19. 
  
  
  
  19.     return { 
    20. 
  
  
  
  20.       count 
    21. 
  
  
  
  21.     } 
    22. 
  
  
  
  22.   } 
    23. 
  
  
  
  23. };
    24.

8.4 清除监视

在 setup() 函数内创建的 watch 监视，会在当前组件被销毁的时候自动停止。如果想要明确地停止某个监视，可以调用 watch() 函数的返回值即可，语法如下：

 
 
 
    
  
  
  
    2.

8.5 在watch中清除无效的异步任务

有时候，当被 watch 监视的值发生变化时，或 watch 本身被 stop 之后，我们期望能够清除那些无效的异步任务，此时，watch 回调函数中提供了一个 cleanup registrator function 来执行清除的工作。这个清除函数会在如下情况下被调用：

watch 被重复执行了

watch 被强制 stop 了

Template 中的代码示例如下：

 
 
 
    
  
  
  
    2.

Script 中的代码示例如下：

 
 
 
    
  
  
  
    2.

9. provide & inject 组件传值

provide() 和 inject() 可以实现嵌套组件之间的数据传递。这两个函数只能在 setup() 函数中使用。父级组件中使用 provide() 函数向下传递数据；子级组件中使用 inject() 获取上层传递过来的数据。

9.1 共享普通数据

app.vue 根组件：

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
    3.

06.son.vue son 组件：

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
    3.

07.grandson.vue son 组件：

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
    3.

9.2 共享ref响应式数据

app.vue 根组件：

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
  2. 
                分享文章：一篇干货，轻松上手Vue.js3.0
                
    
                网页地址：http://www.shufengxianlan.com/qtweb/news42/45442.html
            
    
            
    
                网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等
                                
    
            
    
                广告
                
            
    
            
    
                声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
                创新互联

猜你还喜欢下面的内容

品牌网站设计知识

同城分类信息

注册域名　　 　南京护栏钻孔机　　 　四川服务器托管　　 　成都虚拟主机　　 　成都装饰装修　　 　成都网站建设　　 　西云服务器托管　　 　乐至网站建设　　 　成都门户网站建设设计方案　　 　成都恒翔机电维修　　 　成都响应式网站建设公司　　 　成都导视系统设计　　 　网站建设推广　　 　培训网站方案　　 　软文推广公司　　 　网站建设公司　　 　成都酒店服定制　　 　医药医疗网站建设方案　　 　温江做网站　　 　绵阳主机托管