Vue3CompositionAPI

示例

我们提供的服务有：成都做网站、网站制作、微信公众号开发、网站优化、网站认证、兴县ssl等。为上千多家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的兴县网站制作公司

 
 
 
 
  
  
  
     
  
  
     
  
  
     
  
  
  import { defineComponent, ref, onMounted } from 'vue';   
  
  
     
  
  
  export default defineComponent({   
  
  
    name: 'App',   
  
  
    setup () {   
  
  
      const count = ref(0)   
  
  
      const getCount = () => {   
  
  
        count.value = Math.floor(Math.random() * 10)   
  
  
      }   
  
  
      const addCount = () => {   
  
  
        count.value++   
  
  
      }   
  
  
      onMounted(() => {   
  
  
        getCount()   
  
  
      })   
  
  
     
  
  
      return {   
  
  
        count,   
  
  
        addCount   
  
  
      }   
  
  
    }   
  
  
  });

Composition API顾名思义就是不再传入data、mounted等参数，通过引入的ref、onMounted等方法实现数据的双向绑定、生命周期函数的执行。

为什么需要
在组件比较复杂的情况下，可以将逻辑代码合到一起去，而不会被option强行分隔。这提高了代码质量的上限，同时也拉低了代码质量的下限。来自官方的一张对比图：

2.更好的进行复用。

在vue2中，想要复用部分逻辑的代码，都是通过mixin进去。但mixin进去的内容实际上很不直观，而且相同命名会被覆盖。而通过composition API，因为所有的方法都是引入的，可以将单独某个逻辑进行封装。例如对发送验证码倒计时功能进行封装。

 
 
 
 
  
  
  
     
  
  
     
  
  
     
  
  
  import { defineComponent, ref, reactive } from 'vue';   
  
  
     
  
  
  const userCountDown = () => {   
  
  
    const count = ref(0)   
  
  
    const countDown = (num: number) => {   
  
  
      count.value = num   
  
  
      num--   
  
  
      if (num > 0) {   
  
  
        setTimeout(() => {   
  
  
          countDown(num)   
  
  
        }, 1000)   
  
  
      }   
  
  
    }   
  
  
    const startCount = () => {   
  
  
      // get verifyCode   
  
  
      countDown(60)   
  
  
    }   
  
  
     
  
  
    return { count, startCount }   
  
  
  }   
  
  
     
  
  
  export default defineComponent({   
  
  
    name: 'Home',   
  
  
    setup () {   
  
  
      const { count, startCount } = userCountDown()   
  
  
      return { count, startCount }   
  
  
    }   
  
  
  });

3.更好的typescript支持。不会再往vue原型上添加很多内容，而是通过引入的方式，类型定义会更清晰。

setup
setup是vue新增的一个选项，它是组件内使用Composition API的入口。setup是在创建vue组件实例并完成props的初始化之后执行。因为setup会在option api解析之前被调用，所以setup中的this会与options中得完全不一样。为了避免混乱，在setup中不使用this。同时setup返回的值，可以在模板和其他option中使用。从设计上来说，vue官方是将所有的事情在setup里完成。setup返回值连接的是template模板与方法。

ref、reactive
既然不在传入data，那么将数据创建和监听响应式就需要通过vue暴露出来的功能 ref或reactive。两者有所区别，ref用于基础赋值类型的数据，而reactive用于引用类型的数据。

其中基础赋值类型的值，在setup方法中，需要用 .value的方式进行获取和修改。因为赋值类型的值如果return出去返回值，就失去了数据的双绑定。但是在template中，可以进行直接访问。

 
 
 
 
  
  
  
     
  
  
     
  
  
     
  
  
  import { defineComponent, ref, reactive } from 'vue';   
  
  
     
  
  
  export default defineComponent({   
  
  
    name: 'Home',   
  
  
    setup () {   
  
  
      const count = ref(0)   
  
  
      const changeCount = () => {   
  
  
        count.value = count.value + 1   
  
  
      }   
  
  
      const student = reactive({   
  
  
        name: 'Bob',   
  
  
        age: 12   
  
  
      })   
  
  
      const changeStudentAge = (age: number) => {   
  
  
        student.age = age   
  
  
      }   
  
  
      return {   
  
  
        count,   
  
  
        changeCount,   
  
  
        student,   
  
  
        changeStudentAge   
  
  
      }   
  
  
    }   
  
  
  });

computed与watch

 
 
 
 
  
  
  
     
  
  
     
  
  
     
  
  
  import { defineComponent, ref, computed, watchEffect, watch } from 'vue';   
  
  
     
  
  
  export default defineComponent({   
  
  
    name: 'App',   
  
  
    setup () {   
  
  
      const count = ref(0)   
  
  
      watch(count, () => { // 如多个则用数组的方式传入[count, count1]   
  
  
        console.log('watch', count.value)   
  
  
      })   
  
  
      watchEffect(() => {   
  
  
        console.log('watchEffect', count.value)   
  
  
      })   
  
  
      const addCount = () => {   
  
  
        count.value++   
  
  
      }   
  
  
      const doubleCount = computed(() => {   
  
  
        return count.value * 2   
  
  
      })   
  
  
      return {   
  
  
        count,   
  
  
        doubleCount,   
  
  
        addCount   
  
  
      }   
  
  
    }   
  
  
  });

watch与watchEffect的差别是，watchEffect会立马执行，执行中被读取的响应式数据会被观测。而watch只有在watch对象有变化时才会执行。

生命周期

 
 
 
 
  
  
  
  beforeCreate -> 使用 setup()   
  
  
  created -> 使用 setup()   
  
  
  beforeMount -> onBeforeMount   
  
  
  mounted -> onMounted   
  
  
  beforeUpdate -> onBeforeUpdate   
  
  
  updated -> onUpdated   
  
  
  beforeDestroy -> onBeforeUnmount   
  
  
  destroyed -> onUnmounted   
  
  
  errorCaptured -> onErrorCaptured

网页题目：Vue3CompositionAPI
链接URL：http://www.mswzjz.cn/qtweb/news33/250683.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：贝锐智能

贝锐智能技术为您推荐以下文章