search

博客列表 >组合式 API（Composition API）

组合式 API（Composition API）

初见
初见原创
2021年11月06日 17:16:241180浏览

认识组合式 API（Composition API）

  1. <template>
  2.   <div class="home">
  3.     {{data.count}}<hr>
  4.     <button @click="data.count++">++</button><hr>
  5.     <button @click="add()">++</button><hr>
  6.     {{data.pow}}
  7.   </div>
  8. </template>
  10. <script>
  12. import { reactive,computed} from "vue";
  14. export default {
  15.   name: 'Home',
  16.   // data(){
  17.   //
  18.   // },
  19.   // components:{
  20.   //
  21.   // },
  22.   //vue3 新增setup 但是可以与原来的共生，但命名不要冲突
  23.   setup(){
  24.     const data= reactive({
  25.       count:10,
  26.       pow:computed(()=>data.count*data.count)
  27.     })
  28.     const add=()=>{
  29.       data.count++;
  30.     }
  31.     return{
  32.       data,
  33.       add
  34.     }
  35.   }
  36. }
  37. </script>

组合式 API

setup()方法应用

  1. <template>
  2. <div>
  3.   <h1>这是子组件</h1>
  4. </div>
  5. </template>
  7. <script>
  8. export default {
  9.   name: "SubComp",
  10.   data(){
  11.     return{
  12.       num:1
  13.     }
  14.   },
  15.   beforeCreate() {
  16.     console.log('beforeCreate')
  17.   },
  18.   created() {
  19.     console.log('created');
  20.     console.log(this.num);
  21.   },
  22.   beforeMount() {
  23.     console.log('beforeMount')
  24.   },
  25.   setup(){
  26.     console.log('setup');//组件创建之前调用 setup() 没this
  27.   }
  28. }
  29. </script>
  31. <style scoped>
  33. </style>

setup

setup()的参数

  1. <template>
  2.   <div class="about">
  3.     <h1>父组件：关于setup（）</h1>
  4.     <sub-comp  @myadd="add" one="this one" :two="10" three="hello" four="world">
  6.       <h2>SLOT</h2>
  7.     </sub-comp>
  9.   </div>
  10. </template>
  12. <script>
  13. import SubComp from "../components/SubComp";
  14. export default {
  15.   name:'About',
  16.   components:{
  17.     SubComp
  18.   },
  19.   methods: {
  20.     add(str){
  21.       console.log(str);
  22.     }
  23.   }
  24. }
  25. </script>
  28. <template>
  29. <div>
  30.   <h1>这是子组件</h1>
  31.   one={{one}}<hr>
  32.   two={{two}}<hr>
  33.   <button @click="add()">++</button>
  34.   <slot>111</slot>
  35. </div>
  36. </template>
  38. <script>
  39. export default {
  40.   name: "SubComp",
  41.   props:{
  42.     one:{
  43.       type:String
  44.     },
  45.     two: {
  46.       type:Number
  47.     }
  48.   },
  49.   setup(props,{attrs, slots, emit}){
  51.     console.log(attrs.three);
  52.     console.log(slots.default());
  53.     console.log(attrs.desc);
  54.     emit('myadd', '向父组件传数据')
  55.     const  add =()=>{
  57.       console.log(props.two); //10
  59.     }
  60.     return{
  61.       add
  62.     }
  63.   }
  64.   // setup(props, context) {
  65.   //   context.attrs // 没有在props中声明的其他传组子组件的属性
  66.   //   context.slots
  67.   //   context.parent
  68.   //   context.root
  69.   //   context.emit
  70.   //   context.refs
  71.   // }
  72.   // setup(props,context){
  73.   //   console.log(context);
  74.   //   console.log(context.attrs);
  75.   //   console.log(context.attrs.three);
  76.   //   console.log(context.slots.default());
  77.   //   const  add =()=>{
  78.   //     console.log(this) // undefined
  79.   //      console.log(props.two); //10
  80.   //      props.two++;// target is readonly
  81.   //   }
  82.   //   return{
  83.   //     add
  84.   //   }
  85.   // }
  86.   // data(){
  87.   //   return{
  88.   //     num:1
  89.   //   }
  90.   // },
  91.   // beforeCreate() {
  92.   //   console.log('beforeCreate')
  93.   // },
  94.   // created() {
  95.   //   console.log('created');
  96.   //   console.log(this.num);
  97.   // },
  98.   // beforeMount() {
  99.   //   console.log('beforeMount')
  100.   // },
  101.   // setup(){
  102.   //   console.log('setup');//组件创建之前调用 setup() 没this
  103.   // }
  104. }
  105. </script>
  107. <style scoped>
  109. </style>

参数

常用API

  • ref()函数用来给定的值创建一个响应式的数据对象,ref()的返回值是一个对象,这个对象上只包含一个.value属性.
  • reactive是用来创建一个响应式对象
  • 将ref响应式数据挂载到reactive中，当把ref()创建出来值直接挂载到reactive()中时,会自动把响应式数据对象的展开为原始的值,不需要通过.value就可以直接访问到
  • 双向绑定
  • toRefs()解构响应式对象
  • readonly将响应式数据变回原使数据
  1. <template>
  2. <div>
  3.   <h1>常用api</h1>
  4.   <div>{{num}}</div>
  5.   <button @click="num++">++</button>
  7.   <hr>
  8.   <div>{{num2}}</div>
  9.   <button @click="num2++">++</button>
  10.   <button @click="add2()">++ add2</button>
  11.   <hr>
  12.   <div>{{one}}</div>
  13.   <hr>
  14.   <div>{{two}}</div>
  15.   <hr>
  16.   <div v-for="(item,i) in two" :key="i">{{item}}</div>
  17. </div>
  18. </template>
  20. <script>
  21. import {ref,reactive,toRefs,readonly,isRef} from 'vue'
  22. export default {
  23.   name: "SetApi",
  24.   setup(){
  25.     let num=10
  26.     let num2=ref(0)
  27.     const data=reactive({
  28.       one:100,
  29.       two:['1111','2222']
  30.     })
  31.     const add2=()=>{
  32.       console.log(num2.value)
  33.       num2.value++
  34.       data.one++
  35.     }
  36.     let num8= isRef(num2) ? num2.value :num2
  37.     let num3 =readonly(num2)
  39.     return{
  40.       num,
  41.       num2,
  42.       add2,
  43.       // data,
  44.       //...data 展开可以直接调用one和two 展开之后不再是响应式
  45.       ...toRefs(data) //保持响应式
  46.     }
  47.   }
  48. }
  49. </script>
  51. <style scoped>
  53. </style>

常用

计算属性API（computed）

  • computed()用来创建计算属性,返回值是一个ref的实例
  • 创建可读可写的计算属性。在使用computed函数期间，传入一个包含get和set函数的对象，可以额得到一个可读可写的计算属性
  1. <template>
  2. <div>
  3.  <h1>computed()</h1>
  4.   <div>num={{num}}</div>
  5.   <hr>
  6.   <button @click="num++">{{num}}++</button>
  8.   {{all}}
  9.   <hr>
  10.   <input type="text" v-model="user.first">
  11.   <input type="text" v-model="user.end">
  12. </div>
  13. </template>
  15. <script>
  16. import {ref,reactive,computed} from "vue";
  18. export default {
  19.   name: "Comp",
  20.   setup(){
  21.     let num= ref(0)
  23.     const user = reactive({
  24.       first:'php',
  25.       end:'cn'
  26.     })
  27.     const all =  computed(() =>{
  28.       return user.first + '.' +user.end
  29.     })
  30.     return{
  31.       num,
  32.       user,
  33.       all
  34.     }
  35.   }
  36. }
  37. </script>
  39. <style scoped>
  41. </style>

计算

侦听器watch

监听数字变化

  1. <template>
  2. <div>
  3.   <h1>Watch</h1>
  4.   <h2>a={{a}}, b={{b}}</h2>
  5.   <button @click="a++">a++</button>
  6.   <button @click="b++">b++</button>
  7. </div>
  8. </template>
  10. <script>
  11. import {ref,reactive,watch,watchEffect,toRef} from 'vue';
  12. export default {
  13.   name: "Watch",
  14.   setup(){
  15.     let a= ref(0)
  16.     let b=ref(2)
  18. // watchEffect 它与 watch 的区别主要有以下几点：
  20. //懒执行副作用；
  21. //更明确哪些状态的改变会触发侦听器重新运行副作用；
  22. //访问侦听状态变化前后的值。
  23. //     watch(a,(newa,olda)=>{
  24. //       console.log('a的值：'+a.value+'############# a的新值：'+ newa+'，a的原值：'+olda)
  25. //     },{immediate:true})
  26.         // {immediate:true} 默认执行一次
  27.     watch([a,b],([newa,newb],[olda,oldb])=>{
  28.       console.log('a的值：'+a.value+'############# a的新值：'+ newa+'，a的原值：'+olda)
  29.       console.log('b的值：'+b.value+'############# b的新值：'+ newb+'，b的原值：'+oldb)
  30.     },{immediate:true})
  31.     // watch(()=>{
  32.     //   console.log(a.value+'++++++++++++++'+b.value)
  33.     // })
  34.     // watchEffect(()=>{
  35.     //   console.log(a.value+'++++++++++++++'+b.value)
  36.     // })
  38.     return{
  39.       a,
  40.       b
  41.     }
  42.   }
  43. }
  44. </script>
  46. <style scoped>
  48. </style>

监听数字

监听对象

  1. <template>
  2. <div>
  3.   <h1>Watch</h1>
  4.   <h2>a={{a}}, b={{b}}</h2>
  5.   <button @click="a++">a++</button>
  6.   <button @click="b++">b++</button>
  8.   <hr>
  9.   <input type="text" v-model="nnn"><hr>
  10.   <input type="text" v-model="age"><hr>
  12.   {{nnn}} --- {{age}}
  13. </div>
  14. </template>
  16. <script>
  17. import {ref,reactive,watch,watchEffect,toRefs} from 'vue';
  18. export default {
  19.   name: "Watch",
  20.   setup(){
  21.     let a= ref(0)
  22.     let b=ref(2)
  23.     const user = reactive({
  24.       age:30,
  25.       nnn:'xiaoming'
  26.     })
  28.     watch([()=>user.age,()=>user.nnn],()=>{
  29.       console.log(user.age+'***************')
  31.     },{immediate:true})
  34.     return{
  35.       a,
  36.       b,
  37.       ...toRefs(user)
  38.     }
  39.   }
  40. }
  41. </script>
  43. <style scoped>
  45. </style>

监听对象

生命周期

  1. 选项式 API 的生命周期选项和组合式 API 之间的映射
  3. beforeCreate -> 使用 setup()
  4. created -> 使用 setup()
  5. beforeMount -> onBeforeMount
  6. mounted -> onMounted
  7. beforeUpdate -> onBeforeUpdate
  8. updated -> onUpdated
  9. beforeUnmount -> onBeforeUnmount
  10. unmounted -> onUnmounted
  11. errorCaptured -> onErrorCaptured
  12. renderTracked -> onRenderTracked
  13. renderTriggered -> onRenderTriggered
  14. activated -> onActivated
  15. deactivated -> onDeactivated
  1. <template>
  2. <div>
  4. </div>
  5. </template>
  7. <script>
  8. import {onMounted, onUpdated} from 'vue';
  9. export default {
  10.   name: "Time",
  11.   beforeCreate() {
  12.     console.log('beforeCreate() ---');
  13.   },
  14.   created() {
  15.     console.log('create() .....');
  16.   },
  17.   mounted() {
  18.     console.log('mounted() .....')
  19.   },
  20.   setup() {
  21.     console.log('setup().....');
  23.     let one = '11111';
  25.     onMounted(()=>{
  26.       console.log(one+'onmounted.....')
  27.     });
  28.     onUpdated(()=>{
  29.       console.log('onUpdate....');
  30.     })
  31.   }
  32. }
  33. </script>
  35. <style scoped>
  37. </style>

在组合API中provide和inject使用

  1. 父子组件：通过props，$emit，【$root，$parent，$children】
  2. 非父子组件：Vuex实现，父子层层传递、$ref
  3. provide/inject 这对选项允许一个祖先组件向其所有子孙后代组件注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
  4. provide就相当于加强版父组件prop，可以跨越中间组件，inject就相当于加强版子组件的props
  5. 使用办法
  6. provide 提供变量：Object | () => Object
  7. inject 注入变量： Array<string> | { [key: string]: string  | Object }
  1. 祖
  2. <template>
  3. <div>
  4. <h1>父组件</h1>
  5.   <two></two>
  8. </div>
  9. </template>
  11. <script>
  12. import Two from "../components/Two";
  13. import {reactive,provide,ref} from "vue";
  15. export default {
  16.   name: "One",
  17.   components:{
  18.     Two
  19.   },
  20.   //原来的方法
  21.   // provide(){
  22.   //   return{
  23.   //     count:99
  24.   //   }
  25.   // },
  26.   setup() {
  27.     const name = ref('lmonkey')
  28.     const obj = reactive({
  29.       name: 'lmonkey',
  30.       age: '3'
  31.     })
  32.     provide('name', name)
  33.     provide('animal', obj)
  34.   }
  35. }
  36. </script>
  38. <style scoped>
  40. </style>
  42. 孙
  43. <template>
  44. <div>
  45.   <h1>孙组件</h1>
  47. <!--  {{count}}-&#45;&#45;<hr>-->
  48.   {{name}}--<hr>
  49.   {{animal}}---<hr>
  50.    <div v-for="(item,i) in animal" :key="i">{{i}}--{{item}}</div>
  51.   <hr>
  52.   <input type="text" v-model="name"><hr>
  53. </div>
  54. </template>
  56. <script>
  57. import {inject} from "vue";
  59. export default {
  60.   name: "Sun",
  61.   // inject:['count'],
  62.   setup() {
  63.     // 用法: inject(key)
  64.     const name = inject('name')
  65.     const animal = inject('animal')
  66.     return {
  67.       name,
  68.       animal
  69.     }
  70.   }
  71. }
  72. </script>
  74. <style scoped>
  76. </style>

祖孙传值

Composition API结合路由

  1. <template>
  2. <div>
  3.    <h1>Router</h1>
  4. </div>
  5. </template>
  7. <script>
  8. import {useRoute,useRouter} from 'vue-router';
  9. export default {
  10.   name: "Router",
  11.   setup(){
  12.     const route=useRoute();
  13.     const router=useRouter();
  14.     console.log(route);
  15.     console.log(route.fullPath);
  16.     console.log(route.query);
  17.     console.log(route.params.uid) //user/14
  18.     console.log(router);
  19.     // setTimeout(()=>{
  20.     //   router.push({path:'/',query:{name:1111,age:2222}})
  21.     // },5000)
  23.   }
  24. }
  25. </script>
  27. <style scoped>
  29. </style>
  1. import { createStore } from 'vuex'
  3. export default createStore({
  4.   state: {
  5.     num1:11,
  6.     num2:22
  7.   },
  8.   getters:{
  9.     double1(state) {
  10.       return state.num1 * 2;
  11.     },
  12.     double2(state) {
  13.       return state.num2 * 2;
  14.     }
  15.   },
  16.   mutations: {
  17.     changenum1(state, payload){
  18.       state.num1 = payload;
  19.     },
  20.     changenum2(state, payload){
  21.       state.num2 = payload;
  22.     }
  23.   },
  24.   actions: {
  25.     timecnum1({commit, state}) {
  26.       setTimeout(()=>{
  27.         commit('changenum1', 44);
  28.       }, 5000)
  29.     },
  30.     timecnum2({commit, state}) {
  31.       setTimeout(()=>{
  32.         commit('changenum2', 55);
  33.       }, 5000)
  34.     }
  35.   },
  36.   modules: {
  37.   }
  38. })
  41. <template>
  42.   <h2>Vuex Api useStore</h2>
  43.   <h3>num1: {{$store.state.num1}}</h3>
  44.   <h3>getter-num1: {{$store.getters.double1}}</h3>
  45.   <button @click="cnum1(33)">修改num1:{{$store.state.num1}}</button>
  46.   <button @click="canum1">修改anum1:{{$store.state.num1}}</button>
  47.   <hr>
  48.   <h3>num2: {{num2}}</h3>
  49.   <h3>getters-num2: {{double2}}</h3>
  50.   <button @click="cnum2(33)">修改num2:{{num2}}</button>
  51.   <button @click="canum2">修改anum2:{{num2}}</button>
  52. </template>
  54. <script>
  55. import {useStore} from 'vuex';
  56. import {computed} from 'vue';
  57. export default {
  58.   name: "VuexApi",
  60.   setup() {
  61.     const store = useStore();
  63.     return {
  64.       num2:computed(()=>store.state.num2),
  65.       double2:computed(()=>store.getters.double2),
  66.       cnum2:(newnum)=>{
  67.         store.commit('changenum2', newnum);
  68.       },
  69.       canum2:()=>{
  70.         store.dispatch('timecnum2');
  71.       }
  72.     }
  73.   },
  75.   methods: {
  76.     cnum1(newnum) {
  77.       this.$store.commit('changenum1', newnum);
  78.     },
  79.     canum1() {
  80.       this.$store.dispatch('timecnum1');
  81.     }
  82.   }
  83. }
  84. </script>
  86. <style scoped>
  88. </style>

Vuex

上一条：很多人不知道的Python 炫技操作：合并字典的七种方法下一条：Vue完成购物车
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多