Vue3 和 Vue2 的异同及开发中具体区别

总体来说
开发时差异

总体来说

性能提升

重写了虚拟DOM的实现（跳过静态节点，只处理动态节点）
update性能提高1.3~2倍
服务端渲染速度提高了2~3倍

树摇（Tree shaking）

可以将无用模块“剪辑”掉，仅打包需要的

原理：

ES6 Module引入进行静态分析，故而编译的时候正确判断到底加载了那些模块
静态分析程序流，判断那些模块和变量未被使用或者引用，进而删除对应代码

参考：介绍一下 tree shaking 及其工作原理

碎片化节点（Fragment）

在 vue2.x 中，每个组件只能有一个根，所以，写每个组件模板时都要套一个父元素。

在 vue3 中，为了更方便的书写组件模板，新增了一个类似 dom 的标签元素，也就是 vue3 中组件可以拥有多个根了。

这样做的好处在于：减少标签层级, 减小内存占用。

传送门 (Teleport)

可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。

Suspense

用于协调对组件树中嵌套的异步依赖的处理。

如果在渲染时遇到异步依赖项 (异步组件和具有 async setup() 的组件)，它将等到所有异步依赖项解析完成时再显示默认插槽。

https://cn.vuejs.org/api/built-in-components.html#suspense

更好的TypeScript支持

Composition API

组合式API，替换原有的 Options API

根据逻辑相关性组织代码，提高可读性和可维护性

更好的重用逻辑代码（避免mixins混入时命名冲突的问题）

兼容了VUE2中的写法，原有Options API依然可以延用

响应式原理

不再基于 Object.defineProperty而是基于ES6中的Proxy

开发时差异

0. setup

组合式API以setup函数作为组件的入口

<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的 <script> 语法，它具有更多优势：

更少的样板内容，更简洁的代码。
能够使用纯 TypeScript 声明 props 和自定义事件。
更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象)。
更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。

// setup 函数的第一个参数是组件的 props

// 没有vue2.x中的this指向vue对象了

export default {

  props: {

    title: String

  },

  setup(props) {

    console.log(props.title)

  }

}

1. 生命周期调用

<script setup>

// 在vue中解构出方法

import { onMounted, onUpdated } from 'vue'

onMounted(() => {

  ...

})

onUpdated(() => {

  ...

})

</script>

beforeCreate -> 使用 setup()

created -> 使用 setup()

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeDestroy -> onBeforeUnmount

destroyed -> onUnmounted

errorCaptured -> onErrorCaptured

2. 响应式（数据）API

ref

接受一个参数值并返回一个响应式且可改变的 ref 对象

ref 对象拥有一个指向内部值的单一属性 .value
当ref在模板中使用的时候，它会自动解套，无需在模板内额外书写 .value

import { ref } from "vue";

export default {

  setup() {

    let Num = ref(0),

        isShow = ref(false);

    return {

      Num,

      isShow

    };

  }

};

reactive

接收一个普通对象然后返回该普通对象的响应式代理等同于 2.x 的 Vue.observable()
响应式转换是“深层的”：会影响对象内部所有嵌套的属性

使用toRefs(state)可将其创建的传为Refs类型，方便在模板中直接取值，而不用.value

import { ref, reactive } from "vue";

export default {

  props: { title: String },

  setup() {

    let state = reactive({

      Num: 0,

      arr: [1, 2]

    });

    let change = () => {

      state.arr[0] = state.arr[0] + 1;

      state.name = "flytree";

    };

    return {

      state,

      change

    };

  }

};

相关的一些方法：

unref / toRef / toRefs / isRef / isProxy / isReactive / isReadonly

3.计算属性computed

传入一个 getter 函数，返回一个默认不可手动修改的 ref 对象

const count = ref(1);

const plusOne = computed(() => count.value + 1);

console.log(plusOne.value); //2

plusOne.value++; //错误！

或者传入一个拥有 get 和 set 函数的对象，创建一个可手动修改的计算状态

const count = ref(1);

const plusOne = computed({

  get: () => count.value + 1,

  set: val => {

    count.value = val - 1;

  }

});

plusOne.value = 1;

console.log(count.value); //0

4.侦听器watch

watchEffect

立即执行传入的一个函数，并响应式追踪其依赖，并在其依赖变更时重新运行该函数

export default {

  props: {

    title: String,

  },

  setup(props) {

    watchEffect(() => {

      console.log(`title is: ` + props.title);

    });

  }

};

watch

watch API 完全等效于 2.x this.$watch
watch 需要侦听特定的数据源，并在回调函数中执行副作用
默认情况是懒执行的，也就是说仅在侦听的源变更时才执行回调侦听单个数据源

点击查看代码

// 侦听器的数据源可以是一个拥有返回值的 getter 函数，也可以是 ref

const state = reactive({ count: 0 })

watch(

  () => state.count,

  (count, prevCount) => {

    /* ... */

  }

);

const count = ref(0)

watch(count, (count, prevCount) => {

  /* ... */

});

import { ref, reactive, toRefs, computed, watch } from "vue";

export default {

  setup() {

    ....

    let ratio = ref("--");

    watch(state, (state, preState) => {

      let total = state.supNum + state.oppNum;

      ratio.value =

        total === 0 ? "--" : ((state.supNum / total) * 100).toFixed(2) + "%";

    });

    return {

      ...,

      ratio

    };

  }

};

5. 获取DOM元素refs

模板的Refs

当使用组合式 API 时，reactive refs 和 template refs 的概念已经是统一的

点击查看代码

<template>

  <div ref="root"></div>

</template>

<script>

  import { ref, onMounted } from 'vue';

  export default {

    setup() {

      const root = ref(null);

      onMounted(() => {

        console.log(root.value);

      });

      return {

        root

      };

    }

  }

</script>

6. 路由使用, VUEX ，VUE挂载

先要解构出方法,再去创建对应路由，store或vue对象，其它一样

Vue Router 4.x



import { createRouter, createWebHashHistory } from 'vue-router';

import routes from './routes';

const router = createRouter({

    history: createWebHashHistory(),

    routes

});

router.beforeEach(async (to, from, next) => { ... })

export default router;

Vue Router 3.x

import VueRouter from 'vue-router'

import routes from './routes';

const router = new VueRouter({

  routes

})

export default router;

VUEX 4.x

import { createStore, createLogger } from 'vuex';

export default createStore({

  state: {},

  mutations: {},

  actions: {},

  plugins: [createLogger()]

})

VUEX 3.x

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({

  state: {},

  state: {},

  mutations: {},

  actions: {},

})

export default store

实例创建

VUE 3.x

import { createApp } from 'vue';

const app = createApp(App);

app.use(store);

app.use(router);

app.mount('#app');

VUE 2.x

import Vue from 'vue'

new Vue({

  router,

  store,

  render: h => h(App)

}).$mount('#app')

7. 自定义指令处理技巧

export default function directive(app) {

    app.directive('xxx', {

        // 指令首次绑定到元素且在安装父组件之前...「等同于bind」

        beforeMount(el, binding, vnode, prevVnode) {

            // binding:数据对象

            //   + arg:传给指令的参数   v-xxx:n -> arg:"n"

            //   + modifiers:修饰符对象 v-xxx.stop -> modifiers:{stop:true}

            //   + value:指令绑定的值   v-xxx="1+1" -> value:2

            //   + oldValue:之前绑定的值

        },

        // 安装绑定元素的父组件时...「等同于inserted」

        mounted() {},

        // 在包含组件的VNode更新之前...

        beforeUpdate() {},

        // 在包含组件的VNode及其子VNode更新后...「等同于componentUpdated」

        updated() {},

        // 在卸载绑定元素的父组件之前...

        beforeUnmount() {},

        // 指令与元素解除绑定且父组件已卸载时...「等同于unbind」

        unmounted() {}

    });

};

// main.js

import {

    createApp

} from 'vue';

import App from './App.vue';

import directive from './directive';

const app = createApp(App);

directive(app);

app.mount('#app');

8.emit

在子组件向父组件传值，或者发送事件时，我们通常使用emit，进行操作。

because composition functions are used inside the setup hook which doesn't have access to the other options like methods and emits:

export default defineComponent({

    name: "layout",

    emits: ['showsidebar'],

    setup(props, { emit }) {

        const showSidebar = ref(true);

        const { breakpoints } = useBreakpoint();

        watch(breakpoints, (val) => {

            showSidebar.value = !(val.is === "xs" || val.is === "sm");

            emit('showsidebar',showSidebar.value);

        });

        return {

            showSidebar,

        };

    },

    data() {

        // ...

    },

});

<script setup>

 import { defineEmits,watch,ref } from 'vue'

    const emit = defineEmits(['showsidebar'])

    const showSidebar = ref(true);

    const { breakpoints } = useBreakpoint();

    watch(breakpoints, (val) => {

            showSidebar.value = !(val.is === "xs" || val.is === "sm");

            emit('showsidebar',showSidebar.value);

        });

</script>

<script setup>

const emit = defineEmits({

  // No validation

  inFocus: null,

  // Validate submit event

  submit: ({ email, password }) => {

    if (email && password) return true

    else return false

  }

})

function submitForm(email, password) {

  emit('submit', { email, password })

}

</script>

// Typing with TS:

<script setup lang="ts">

const emit = defineEmits<{

  (e: 'change', id: number): void

  (e: 'update', value: string): void

}>()

</script>