vue2与vue3的区别

响应式原理

Vue.js 2使用Object.defineProperty()对数据进行劫持，结合发布订阅模式来实现响应式。例如，下面是一个Vue.js 2的示例：

var data = { message: 'Hello, Vue!' }

Object.defineProperty(data, 'message', {
  get: function () {
    console.log('get message')
    return message
  },
  set: function (newValue) {
    console.log('set message')
    message = newValue
  }
})

console.log(data.message) // 输出：'Hello, Vue!'
data.message = 'Hello, World!'
console.log(data.message) // 输出：'Hello, World!'

Vue.js 3则使用ES6的Proxy API对数据进行代理，通过reactive()函数给每一个对象都包一层Proxy，从而实现对数据的监控。例如，下面是一个Vue.js 3的示例：

import { reactive } from 'vue'

const data = reactive({ message: 'Hello, Vue!' })

console.log(data.message) // 输出：'Hello, Vue!'
data.message = 'Hello, World!'
console.log(data.message) // 输出：'Hello, World!'

Vue.js 3引入了Composition API，可以更好地组织和复用组件逻辑。例如，下面是一个Vue.js 2的示例：

export default {
  data () {
    return {
      message: 'Hello, Vue!'
    }
  },
  methods: {
    sayHello () {
      console.log(this.message)
    }
  }
}

而在Vue.js 3中，可以使用setup()函数来组织和复用组件逻辑。例如，下面是一个Vue.js 3的示例：
 

import { reactive } from 'vue'

export default {
  setup () {
    const state = reactive({
      message: 'Hello, Vue!'
    })
    const sayHello = () => {
      console.log(state.message)
    }
    return {
      state,
      sayHello
    }
  }
}

TypeScript支持

Vue.js 3对TypeScript的支持更加友好，可以更好地进行类型检查和代码提示。例如，下面是一个Vue.js 3的示例：

import { defineComponent, ref } from 'vue'

interface User {
  name: string
  age: number
}

export default defineComponent({
  setup () {
    const user = ref<User>({ name: 'Tom', age: 18 })
    const sayHello = () => {
      console.log(`Hello, ${user.value.name}!`) // 可以进行代码提示
    }
    return {
      user,
      sayHello
    }
  }
})

Teleport组件

Vue.js 3引入了Teleport组件，可以更方便地在DOM树中移动组件。例如，下面是一个Vue.js 3的Teleport组件示例：

<teleport to="body">
  <div class="modal">
    <h2>Modal Title</h2>
    <p>Modal Content</p>
  </div>
</teleport>

全局API的变化

Vue.js 3中的全局API发生了变化，例如Vue.component()变成了app.component()，Vue.directive()变成了app.directive()，Vue.filter()变成了app.filter()等。例如，下面是一个Vue.js 3的全局API示例：

import { createApp } from 'vue'
import MyComponent from './MyComponent.vue'

const app = createApp({})

app.component('my-component', MyComponent)
app.directive('my-directive', {
  mounted (el, binding) {
    console.log(binding.value)
  }
})
app.filter('my-filter', (value) => {
  return value.toUpperCase()
})

app.mount('#app')

VNode的变化

Vue.js 3中的VNode发生了变化，可以更好地支持渲染函数和自定义渲染器。例如，下面是一个Vue.js 3的VNode示例：

import { h } from 'vue'

const vnode = h('div', { class: 'container' }, [
  h('h1', 'Hello, Vue!'),
  h('p', 'This is a paragraph.')
])

console.log(vnode)

生命周期的变化

Vue.js 3中的生命周期发生了变化，例如beforeCreate和created合并成了beforeMount，beforeDestroy和destroyed合并成了unmounted等。例如，下面是一个Vue.js 3的生命周期示例：

import { createApp, onBeforeMount, onMounted, onBeforeUnmount, onUnmounted } from 'vue'

const app = createApp({
  beforeMount () {
    console.log('beforeMount')
  },
  mounted () {
    console.log('mounted')
  }
})

onBeforeMount(() => {
  console.log('onBeforeMount')
})

onMounted(() => {
  console.log('onMounted')
})

onBeforeUnmount(() => {
  console.log('onBeforeUnmount')
})

onUnmounted(() => {
  console.log('onUnmounted')
})

app.mount('#app')