vue2和vue3的代碼區別

vue2

<template>
  <div class='form-element'>
    <h2> {{ title }} </h2>
    <input type='text' v-model='username' placeholder='Username' />
    
    <input type='password' v-model='password' placeholder='Password' />

    <button @click='login'>
      Submit
    </button>
    <p> 
      Values: {{ username + ' ' + password }}
    </p>
  </div>
</template>
<script>
export default {
  props: {
    title: String
  },
  data () {
    return {
      username: '',
      password: ''
    }
  },
  mounted () {
    console.log('title: ' + this.title)
  },
  computed: {
    lowerCaseUsername () {
      return this.username.toLowerCase()
    }
  },
  methods: {
    login () {
      this.$emit('login', {
        username: this.username,
        password: this.password
      })
    }
  }
}
</script>

vue3

<template>
  <div class='form-element'>
    <h2> {{ state.title }} </h2>
    <input type='text' v-model='state.username' placeholder='Username' />
    
    <input type='password' v-model='state.password' placeholder='Password' />

    <button @click='login'>
      Submit
    </button>
    <p> 
      Values: {{ state.username + ' ' + state.password }}
    </p>
  </div>
</template>
<script>
import { reactive, onMounted, computed } from 'vue'

export default {
  props: {
    title: String
  },
  setup (props, { emit }) {
    const state = reactive({
      username: '',
      password: '',
      lowerCaseUsername: computed(() => state.username.toLowerCase())
    })

    onMounted(() => {
      console.log('title: ' + props.title)
    })

    const login = () => {
      emit('login', {
        username: state.username,
        password: state.password
      })
    }

    return { 
      login,
      state
    }
  }
}
</script>

詳細區別：

1. data 響應式原理不一樣，2用的是Object.defineproperty,3用的是proxy。3中用的是reactive，先引入，而後能夠直接在setup中定義，return出來。
2. methods直接寫在setup中
3. computed引入直接當成一個方法來用，返回的結果值賦給變量
4. 生命鉤子函數除了create和beforecreate以外是直接引入，前面加個on，而後當方法執行。！destroyed和beforedestroy沒了，換成unmount和beforeunmount。
5. setup中的兩個參數：props和context（emit，slots，attrs），3沒了this，因而能夠用這兩個參數代替

總結：

1. 全新的合成式API（Composition API）能夠提高代碼的解耦程度，
2. 不少使用方式都和React很是相近
3. 按需引用的有了更細微的可控性

注意：
使用proxy的優點以下

1. defineProperty只能監聽某個屬性，不能對全對象監聽
2. 能夠省去for in、閉包等內容來提高效率（直接綁定整個對象便可）
3. 能夠監聽數組，不用再去單獨的對數組作特異性操做 vue3.x能夠檢測到數組內部數據的變化

變化總結：

1. 雙向數據綁定原理
2. 默認進行懶觀察（lazy observation）：在 2.x 版本里，無論數據多大，都會在一開始就爲其建立觀察者。當數據很大時，這可能會在頁面載入時形成明顯的性能壓力。3.x 版本，只會對「被用於渲染初始可見部分的數據」建立觀察者，並且 3.x 的觀察者更高效。
3. 更精準的變動通知
4. 3.0 新加入了 TypeScript 以及 PWA 的支持
5. vue2和vue3組件發送改變