[前端暴龙机，Vue2.x 进化 Vue3 ] Day25. Vue3 Composition API 使用(一)

在 Composition API 当中我们可以将响应式资料和相关业务逻辑结合到一起，是因为 Vue3 的 setup 方法

setup

setup 是 Vue3 使用 Composition API 的统一入口
在 Vue3 中 beforecate 和 created 被 setup 方法本身给取代
Vue2.x 中，我们使用 this 来取得 Vue 实体的东西，但是在 setup， 我们不使用 this

生命周期

除了上面提到的 beforecate 和 created 被取代掉了，其它的生命周期钩子，可以透过前面加上 "on" 来使用，如下

如何使用

在 Vue3 中，我们会将生命周期钩子在 setup 里面来使用，如下

import {createApp,onMounted} from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.1.4/vue.esm-browser.min.js'
createApp({
    setup(){
        onMounted(()=>{
        
        })
    }
}).mount('#app');

computed 写法，会是透过直接宣告一个变数来使用 computed 而不是全部包在 computed 中，就会像是下面这样的写法

import {createApp,computed} from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.1.4/vue.esm-browser.min.js'
createApp({
    setup(){
        const 变数 = computed(()=>{
            return ...
        })
    }
}).mount('#app');

Proxy: Vue 的双向绑定机制

先以 Options API 的方式来说明

import {createApp,computed,ref,watch,onMounted} from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.1.4/vue.esm-browser.min.js' 

createApp({
  data(){
    return {
      text: 'hello'
    }
  },
  mounted(){
    console.log(this)
  }
}).mount('#app')

Proxy 结构是 Vue 用来做双向绑定的机制，在 Options API 时可能不是那麽重要，不过 Composition API 满重要的，所以需要了解一下

可以看到我们在 Options API data 里定义的变数存放在 [Target] 内
Options API 演示范例

接着我们以 Composition API 的方式来看一下

import {createApp} from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.1.4/vue.esm-browser.min.js' 

createApp({
  setup() {
    const text = "Composition API"
    
    console.log(text)
    
    return {
      text
    }
  }
}).mount('#app')

可以看到 console 出来的是个纯字串，非 Proxy 物件，还记得上面说到~ Proxy 是 Vue 用来实践双向绑定机制的重要关键
所以这样的写法会造成 Vue 的双向绑定机制不见了 !!!~

<div id="app">
  {{ text }}
  <input type="text" name="" v-model="text">
</div>

import {createApp} from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.1.4/vue.esm-browser.min.js' 

createApp({
  setup() {
    const text = "Composition API"
    
    console.log(text)
    
    return {
      text
    }
  }
}).mount('#app')

Composition API 演示范例

下一篇就来介绍该怎麽写 data 的资料，找回双向绑定机制 !!!