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组件发送改变

参考链接：

https://zhuanlan.zhihu.com/p/139590941