vue3相较与vue2的不同 以及变化

系列文章

一. 根节点不同

1. vue2中必须要有根标签
2. vue3中可以没有根标签，会默认将多个根标签包裹在一个fragement虚拟标签中，有利于减少内存。

二、生命周期的变化

1.  创建前：beforeCreate -> 使用setup()
2. 创建后：created -> 使用setup()
3. 挂载前：beforeMount -> onBeforeMount
4. 挂载后：mounted -> onMounted
5. 更新前：beforeUpdate -> onBeforeUpdate
6. 更新后：updated -> onUpdated
7. 销毁前：beforeDestroy -> onBeforeUnmount
8. 销毁后：destroyed -> onUnmounted

三. v-if和v-for的优先级

1. 在vue2中v-for的优先级高于v-if，可以放在一起使用，但是不建议这么做，会带来性能上的浪费
2. 在vue3中v-if的优先级高于v-for，一起使用会报错。可以通过在外部添加一个标签，将v-for移到外层

四.Teleport传送门组件

<template>
  <div>
    页面
    <h1>This is an about page</h1>
    {{state.count}}
    <button @click="handleClick">点击+++</button>
    {{state.doubble}}
    <button @click="jian">点击---</button>
  </div>
</template>
  
  <script>
import { useCount } from "../hooks/useCount.js";
export default {
  name: "LiuduanDemoView",

  setup() {
    let { state, handleClick, jian } = useCount();

    return {
      state,
      handleClick,
      jian
    };
  }
};
</script>

五..vue3带来了什么

(1):性能的提升。

(2):新的特性。

(3):Composition API （组合api）

(4):新的内置组件

(5):更加接近原生js

六.Composition Api

1.setup是vue3中的一个新的配置，值为一个函数

2.组件中的所要用到的数据，方法等，均要配置在setup中

3.在setup内部需要.value来访问设置值

4。在生命周期中：setup中的生命周期，没有beforeCreate与created

5.setup的生命周期需要加on前缀