大前端学习笔记 -- Composition API

最新推荐文章于 2024-07-31 23:59:41 发布

爱玲姐姐

最新推荐文章于 2024-07-31 23:59:41 发布

阅读量1.2k

点赞数 1

分类专栏： Vue 大前端文章标签： vue3.0 CompositionAPI

本文链接：https://blog.csdn.net/jal517486222/article/details/108689508

版权

本文详细介绍了Vue3.0中的Composition API，包括setup、reactive、toRefs、ref、Computed、watch和WatchEffect的使用。通过实例演示了如何在Vue3.0项目中应用这些功能，帮助开发者理解并掌握Vue3.0的新特性。

摘要由CSDN通过智能技术生成

Composition API

文章内容输出来源：大前端高薪训练营

一、Composition API使用

1. 使用Vue3.0

先创建一个空文件夹，然后进入文件夹执行npm init -y，再执行npm install vue@3.0.0-rc.1安装vue3.0

创建index.html，vue3.0的使用

<body>
  <div id="app">
    x: {
  { position.x }} <br>
    y: {
  { position.y }} <br>
  </div>
  <script type="module">
    import {
     createApp } from './node_modules/vue/dist/vue.esm-browser.js'

    const app = createApp({
    
      data () {
    
        return {
    
          position: {
    
            x: 0,
            y: 0
          }
        }
      }
    })
    console.log(app)

    app.mount('#app')
  </script>
</body>

2. setup、reactive的使用

createAPP：创建Vue对象
setup：CompositionAPI的入口
reactive：创建响应式对象

<body>
  <div id="app">
    x: {
  { position.x }} <br>
    y: {
  { position.y }} <br>
  </div>
  <script type="module">
    import {
     createApp, reactive } from './node_modules/vue/dist/vue.esm-browser.js'

    const app = createApp({
    
      setup () {
    
        // 第一个参数 props，响应式对象，不能被解构
        // 第二个参数 context， attrs、emit、slots
        const position = reactive({
    
          x: 0,
          y: 0
        })
        return {
    
          position
        }
      },
      mounted () {
    
        this.position.x = 2
      }
    })
    console.log(app