vue3和vue2的区别有哪些？-囧呀全栈开发学习平台

1.vue2和vue3双向数据绑定原理不同

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

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

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

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

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

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

2.vue3支持碎片

vue2在组件中只能有一个根节点，vue3在组件中可以有多个根节点。

<template>
  <div>
    <h2> {{ title }} </h2>
  </div>
</template>

<template>
  <div></div>
  <h2> {{ title }} </h2>
</template>

3.API类型不同

vue2与vue3 最大的区别：vue2使用选项式API（Options API），对比vue3组合式API（Composition API）。

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

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

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

4.定义数据方式不同

vue2把数据放入data属性中

export default {
  props: {
    title: String
  },
  data() {
    return {
      username: '',
      password: ''
    }
  }
}

vue3需要使用一个新的setup()方法，此方法在组件初始化构造的时候触发。

使用以下三步来建立反应性数据：

1）从vue引入reactive

2）使用reactive()方法来声名我们的数据为响应性数据

3）使用setup()方法来返回我们的响应性数据，从而我们的template可以获取这些响应性数据

import {reactive} from 'vue'

export default {
  props: {
    title: String
  },
  setup() {
    const state = reactive({
      username: '',
      password: ''
    })

    return {
      state
    }
  }
}

template使用，可以通过state.username和state.password获得数据的值。

<template>
  <div>
    <h2> {{ state.username }} </h2>
  </div>
</template>

5.生命周期钩子函数不同

vue2	vue3	说明
beforeCreate	setup()	setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method。
created	setup()
beforeMount	onBeforeMount	组件挂载到节点上之前执行的函数。
mounted	onMounted	组件挂载完成后执行的函数。
beforeUpdate	onBeforeUpdate	组件更新之前执行的函数。
updated	onUpdated	组件更新完成之后执行的函数。
beforeDestroy	onBeforeUnmount	组件卸载之前执行的函数。
destroyed	onUnmounted	组件卸载完成后执行的函数。
activated	onActivated	被激活时执行（组件被<keep-alive></keep-alive>包含时才有效）。
deactivated	onDeactivated	比如从 A组件，切换到 B 组件，A 组件消失时执行（组件被<keep-alive></keep-alive>包含时才有效）。

6.父子传参不同，setup() 函数特性

1）setup 函数时，它将接受两个参数：（props、context(包含attrs、slots、emit)）。

2）setup函数是处于生命周期函数 beforeCreate 和 Created 两个钩子函数之前的函数。

3）执行 setup 时，组件实例尚未被创建（在 setup() 内部，this 不会是该活跃实例的引用，即不指向vue实例，vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined）。

4）与模板一起使用：需要返回一个对象 (在setup函数中定义的变量和方法最后都是需要 return 出去的不然无法再模板中使用)。

5）使用渲染函数：可以返回一个渲染函数，该函数可以直接使用在同一作用域中声明的响应式状态。

注意事项：

1）setup函数中不能使用this。vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined）。

2）setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。但是，因为 props 是响应式的，你不能使用 ES6 解构，因为它会消除 prop 的响应性。

如果需要解构 prop，可以通过使用 setup 函数中的toRefs 来完成此操作：

父传子，props

import {toRefs} from 'vue'

setup(props) {
  const {
    title
  } = toRefs(props)
  console.log(title.value)
  onMounted(() => {
    console.log('title: ' + props.title)
  })
}

子传父，事件

举例，现在我们想在点击提交按钮时触发一个login的事件。

在 vue2 中我们会调用到this.$emit然后传入事件名和参数对象。

login() {
  this.$emit('login', {
    username: this.username,
    password: this.password
  })
}

在setup()中的第二个参数content对象中就有emit，这个是和this.$emit是一样的。那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。

然后我们在login方法中编写登陆事件

另外：context是一个普通的JavaScript对象，也就是说，它不是响应式的，这意味着你可以安全地对context使用ES6解构

setup(props, {attrs, slots, emit}) {
  // ...
  const login = () => {
    emit('login', {
      username: state.username,
      password: state.password
    })
  }
  // ...
}

3） setup()内使用响应式数据时，需要通过.value获取。

import {ref} from 'vue'

const count = ref(0)
console.log(count.value) // 0

4）从 setup() 中返回的对象上的 property 返回并可以在模板中被访问时，它将自动展开为内部值。不需要在模板中追加 .value。

5）setup函数只能是同步的不能是异步的。

7.vue3 Teleport瞬移组件

该组件可以将插槽接收的内容渲染到指定的dom位置，常见的一个业务需求就是model弹窗了，我们有时候会在子组件里面去书写一个弹窗，但是这个弹窗是全局性的，为了防止被定位元素影响，我们vue2时会在mounted生命钩子里手动将model的dom传入body里面，而且还得在销毁时从body移除。

vue3提供了teleport组件，它和react的传送门组件其实效果相同，它有两个props属性：

to：支持字符串和html元素，如果是字符串，指的是css选择器，而html元素则是dom。

disabled：接收一个布尔值，表示是否禁用传送门，通过这个属性我们可以很方便的实现一个video视频的小屏处理，当用户往下滚动时，可以将video传送到右下角小屏展示。

interface TeleportProps {
  /**
   * 必填项。指定目标容器。
   * 可以是选择器或实际元素。
   */
  to: string | HTMLElement
  /**
   * 当值为 `true` 时，内容将保留在其原始位置
   * 而不是移动到目标容器中。
   * 可以动态更改。
   */
  disabled ? : boolean
}

<button @click="open = true">Open Modal</button>
<Teleport to="body" :disabled="disabled">
  <div v-if="open" class="modal">
    <p>Hello from the modal!</p>
    <button @click="open = false">Close</button>
  </div>
</Teleport>

官方表示该组件只是改变了渲染dom结构，所以它不会影响组件之间的逻辑关系，也就说，除了我们在代码编写层逻辑关系不变，它的虚拟dom位置也不会发生改变。

所以Teleport里的组件通过$parent获取到的，其实并不是Teleport本身，Teleport可以视为一个假组件，所以我们依旧可以拿到“逻辑”上的父级组件。

如果存在多个Teleport的to属性指向同一个html元素，那么会根据渲染的先后顺序插入（顺次追加）。

高阶使用

动态绑定to

事实上to这个属性是可以动态绑定的，当我们的to属性发生改变时，teleport会先将内容移动到新的位置。

<Teleport :to="container">

</Teleport>

ref获取内容

ref是可以正常获取到Teleport内的内容的

<template>
  <div>
    <button @click="onClick">s</button>

    <Teleport to="body">
      <h2 v-if="flag" ref="title">标题</h2>
    </Teleport>
  </div>
</template>
<script>
  import { defineComponent, ref, nextTick } from "vue";
  
  export default defineComponent({
    setup() {
      const flag = ref(false);
      const title = ref();
  
      function onClick() {
        flag.value = !flag.value;
        nextTick(() => {
          console.log(title);
        });
      }
      return {
        flag,
        title,
        onClick,
      };
    },
  });
</script>

8.指令与插槽不同

vue2中使用slot可以直接使用slot；v-for与v-if在vue2中优先级高的是v-for指令，而且不建议一起使用。

vue3中必须是使用v-slot的形式；Vue3中v-for与v-if，只会把当前v-if当作v-for的一个判断语句，不会相互冲突。

vue3中移除keyCode作为v-on的修饰符，当然也不支持config.keyCodes，取而代之的是使用键名来作为事件的修饰符来使用，于是Vue.config.keyCodes 也被弃用了。

vue2我们在监听按键事件的时候，是可以通过在事件后面加上按键码来实现监听某一个按键的。

<input @keyup.13="submit" />

甚至我们还可以使用按钮别名alias的方式调用

<input @keyup.enter="submit" />

还可以全局自定义别名，通过Vue.config.keyCodes属性。

Vue.config.keyCodes = {
  f1: 112
}

随着ECMAScript的标准推荐，官方已经不推荐使用keyCode键码了，这个功能在js的官方定义上是一个已弃用的状态，最新的标准是使用KeyboardEvent.code，也就是具体字符的显示。

window.addEventListener("keydown", (event) => {
  console.log(event.key, event.code);
}, true);

当我按下字母Q的时候，输出：

Q KeyQ

所以，在vue3看来，支持keyCodes是没有意义的，于是它被移除了，取而代之的是使用键名来作为事件的修饰符来使用，于是Vue.config.keyCodes也被弃用了。

<input v-on:keyup.page-down="nextPage">

<input v-on:keypress.q="quit">

多个字符使用短横线链接。

但是有时候我们的字符是一个特殊的标点符号，那么在书写时可能会造成代码上的格式错误，所以针对标点符号的识别，官方建议是放在事件函数的内部去处理，而不是去使用修饰符。

vue3中移除过滤器filter，官方推荐，如果要使用过滤器可以使用computed计算属性和method函数来代替。