構成API

記事コンテンツの出力ソース：大規模なフロントエンドの高額トレーニングキャンプ

1.コンポジションAPIの使用

1.Vue3.0を使用します

最初に空のフォルダを作成し、npm init -y次に実行するフォルダを入力してから、実行してnpm install [email protected]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.セットアップとリアクティブの使用

createAPP：Vueオブジェクトを作成します
セットアップ：CompositionAPIのエントリ
リアクティブ：リアクティブオブジェクトを作成します

<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)

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

第二に、セットアップのライフサイクルフック機能

vueフック関数の最初の文字を大文字にして、フック関数の前に追加するだけです。特別：元のライフサイクルでの破棄はonUnmountedに対応します。

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

    function useMousePosition () {
     
     
        const position = reactive({
     
     
          x: 0,
          y: 0
        })

        const update = e => {
     
     
          position.x = e.pageX
          position.y = e.pageY
        }

        onMounted(() => {
     
     
          window.addEventListener('mousemove', update)
        })

        onUnmounted(() => {
     
     
          window.removeEventListener('mousemove', update)
        })

        return position
    }

    const app = createApp({
     
     
      setup () {
     
     
        const position = useMousePosition()
        return {
     
     
          position
        }
      },
      mounted () {
     
     
        this.position.x = 2
      }
    })
    console.log(app)

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

三、reactive-toRefs-ref

リアクティブによって作成されたリアクティブデータは、分解後にリアクティブではなくなります。toRefsは、リアクティブオブジェクトのすべてのプロパティをリアクティブに変換できるため、toRefsによって返されたオブジェクトを分解でき、データは分解後もリアクティブのままです。

リアクティブは通常のオブジェクトをリアクティブオブジェクトに変換することであり、refは基本的なタイプのデータをリアクティブオブジェクトにパッケージ化することです。

参照の使用：

<body>
  <div id="app">
    <button @click="increase">Button</button>
    <span>{
   
   {count}}</span>
  </div>
  <script type="module">
    import {
     
      createApp, ref } from './node_modules/vue/dist/vue.esm-browser.js'

    function useCount () {
     
     
      const count = ref(0) // 将基本类型数据转化成响应式对象
      return {
     
     
        count,
        increase: () => {
     
     
          count.value++
        }
      }
    }

    createApp({
     
     
      setup () {
     
     
        return {
     
     
          ...useCount()
        }
      }
    }).mount('#app')
  </script>
</body>

4、計算

Computedは応答データを作成できます。この応答データは、計算された属性である他の応答データに依存します。

最初の使用法
- 計算された（（）=> count.value + 1）

2番目の使用法

const count = ref(1)
const plusOne = computed({
      
      
  get: () => count.value + 1,
  set: val => {
      
      
    count.value = val - 1
  }
})

使用する：

<body>
  <div id="app">
    <button @click="push">Button</button>
    <span>未完成：{
   
   {activeCount}}</span>
  </div>
  <script type="module">
    import {
     
      createApp, reactive, computed } from './node_modules/vue/dist/vue.esm-browser.js'
    const data = [
      {
     
      text: '看书', complated: false },
      {
     
      text: '敲代码', complated: false },
      {
     
      text: '约会', complated: true },
    ]

    createApp({
     
     
      setup () {
     
     
        const todos = reactive(data)
        const activeCount = computed(() => {
     
     
          return todos.filter(item => !item.complated).length
        })
        return {
     
     
          activeCount,
          push: () => {
     
     
            todos.push({
     
     
              text: '开会',
              complated: false
            })
          }
        }
      }
    }).mount('#app')
  </script>
</body>

ファイブ、見て

1.時計の3つのパラメータ

最初のパラメーター：監視するデータは、reactiveまたはrefによって返されるオブジェクトである必要があります
2番目のパラメーター：データの変更を監視した後に実行される関数。この関数には、新しい値と古い値の2つのパラメーターがあります。
3番目のパラメーター：オプションオブジェクト、深くて即時

2.時計の戻り値

リスニングをキャンセルする機能