Vue3.0とVue2.0の実際の違い

場合

 

ビュー2

利点; 学習と使用、コードの記述の場所について合意されています。

短所: データとビジネス ロジックが同じファイル内の N か所に散在しており、ビジネスの複雑さが増すと、アニメーションの左側のコード構成が表示される可能性があり、管理とメンテナンスに役立ちません。

<template>
  <div class="container">
    <p>X 轴：{
   
   { x }} Y 轴：{
   
   { y }}</p>
    <hr />
    <div>
      <p>{
   
   { count }}</p>
      <button @click="add()">自增</button>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'App',
    data() {
      return {
        // !#Fn1
        x: 0,
        y: 0,
        // ?#Fn2
        count: 0
      }
    },
    mounted() {
      // !#Fn1
      document.addEventListener('mousemove', this.move)
    },
    methods: {
      // !#Fn1
      move(e) {
        this.x = e.pageX
        this.y = e.pageY
      },
      // ?#Fn2
      add() {
        this.count++
      }
    },
    destroyed() {
      // !#Fn1
      document.removeEventListener('mousemove', this.move)
    }
  }
</script>

 

利点:同じ機能の*データ*と*ビジネス ロジック*をまとめて整理できるため、再利用とメンテナンスが容易になります。

短所: 優れたコード構成と分割能力が必要ですが、Vue2 よりも比較的簡単に使用できます。

注: すべてのユーザーが Vue3.0 バージョンに適切にフィルターできるようにするために、現在 Vue2.x オプション API がサポートされています。

接続: Why-composition-api、composition-api-doc。

<template>
  <div class="container">
    <p>X 轴：{
   
   { x }} Y 轴：{
   
   { y }}</p>
    <hr />
    <div>
      <p>{
   
   { count }}</p>
      <button @click="add()">自增</button>
    </div>
  </div>
</template>
<script>
  import { onMounted, onUnmounted, reactive, ref, toRefs } from 'vue'
  export default {
    name: 'App',
    setup() {
      // !#Fn1
      const mouse = reactive({
        x: 0,
        y: 0
      })
      const move = (e) => {
        mouse.x = e.pageX
        mouse.y = e.pageY
      }
      onMounted(() => {
        document.addEventListener('mousemove', move)
      })
      onUnmounted(() => {
        document.removeEventListener('mousemove', move)
      })

      // ?Fn2
      const count = ref(0)
      const add = () => {
        count.value++
      }

      // 统一返回数据供模板使用
      return {
        ...toRefs(mouse),
        count,
        add
      }
    }
  }
</script>