vue2和vue3的区别

莫比乌斯的日落

已于 2022-04-21 11:55:21 修改

阅读量9.7k

点赞数 5

文章标签：前端 vue 开发语言

于 2022-04-19 10:30:16 首次发布

本文链接：https://blog.csdn.net/aliyun3/article/details/124266966

版权

本文详细对比了Vue2和Vue3的主要差异，包括双向数据绑定由Object.defineProperty改为Proxy，Vue3新增支持Fragments，引入Composition API，data处理方式变化，生命周期钩子的更新，以及父子组件通信和Teleport组件的使用。这些变化显著提升了开发效率和性能。

摘要由CSDN通过智能技术生成

1. vue2和vue3双向数据绑定原理发生了改变

vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持结合发布订阅模式的方式来实现的。

vue3 中使用了 es6 的 ProxyAPI 对数据代理。

相比于vue2.x，使用proxy的优势如下

defineProperty只能监听某个属性，不能对全对象监听

可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）

可以监听数组，不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化

2. Vue3支持碎片(Fragments)

就是说在组件可以拥有多个根节点。
vue2

<template>
  <div class='form-element'>
  <h2> {
  { title }} </h2>
  </div>
</template>

vue3

<template>
  <div class='form-element'>
  </div>
   <h2> {
  { title }} </h2>
</template>

3. Composition API

Vue2与Vue3 最大的区别 — Vue2使用选项类型API（Options API）对比Vue3合成型API（Composition API）

旧的选项型API在代码里分割了不同的属性: data,computed属性，methods，等等。新的合成型API能让我们用方法（function）来分割，相比于旧的API使用属性来分组，这样代码会更加简便和整洁。

vue2


export default {
  props: {
    title: String
  },
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login () {
      // 登陆方法
    }
  },
  components:{
            "buttonComponent":btnComponent
        },
  computed:{
	  fullName(){
	    return this.firstName+" "+this.lastName;     
	  }
}
 
}

vue3

export default {
  props: {
    title: String
  },
  
  setup () {
    const state = reactive({ //数据
      username: '',
      password: '',
      lowerCaseUsername: computed(() => state.username.toLowerCase()) //计算属性
    })
     //方法
    const login = () => {
      // 登陆方法
    }
    return { 
      login,
      state
    }