vue3初探----vue3的一些变化

一、vue3初探—vue3新特性学习

二、vue3初探—在vue3和vuex4.x中使用typescript

三、vue3初探----(vue3项目)vuex4.x中使用typescript最终写法

四、在三中用到的一些TypeScript中的一些高阶类型 Omit Pick ReturnType Parameters

五、vue3初探----项目构建

六、vue3初探----vue3的一些变化

vue3的一些变化

详细的改变查看https://v3.cn.vuejs.org/guide/migration/migration-build.html#%E6%A6%82%E8%BF%B0
vue3的部分变化

全局配置的变化

目前我们使用全局Vue对象来提供任何配置和创建新的Vue实例。对Vue对象进行的任何更改都会影响到每个Vue实例和组件

import Vue from 'vue'

import App from './App.vue'

Vue.mixin(/***/)

Vue.component(/***/)

Vue.directive(/***/)

Vue.use(/***/)

new Vue({ render: h => h(App) }).$mount('#app')

现在每个配置都是用 createApp 定义的某个Vue应用程序的范围

import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App)

app.config.ignoredElements = [/^app-/]

app.use(/* ... */)

app.mixin(/* ... */)

app.component(/* ... */)

app.directive(/* ... */)

app.mount('#app')

生命周期的变化

1. beforeCreate ---->setup
2. created ---->setup
3. beforeMount ---->onBeforeMount
4. mounted ---->onMounted
5. beforeUpdate ---->onBeforeUpdate
6. updated ---->onUpdated
7. beforeDestory ---->onBeforeUnmount
8. destoryed ---->onUnmounted

vue3的生命周期必须setup中进行调用

网上多数文章任务setup执行时间在beforeCreate 和created 之间但试验结果setup是在beforeCreate之前执行

<script>
export default {
  setup() {
    console.log('setup')
  },
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  },
}
</script>

指令的变化

vue2

Vue.directive('highlight', {
  bind(el, binding, vnode) {
    el.style.background = binding.value
  }
})

vue3

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AwgLc0gp-1630206380790)(img/image-20210827180303421.png)]

const MyDirective = {
  beforeMount(el, binding, vnode, prevVnode) {},
  mounted() {},
  beforeUpdate() {}, // 新
  updated() {},
  beforeUnmount() {}, // 新
  unmounted() {}
}

v-model 的变化 v-model参数

vue3 允许我们在自定义组件上使用多个 v-model。

v-model参数可以作为.sync 修饰符的替代

<ChildComponent :title.sync="pageTitle" />

//等同

<ChildComponent v-model:title="pageTitle" />

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

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

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

代码组织上的变化

<template>
    <div class=''></div>
</template>

<script>
export default {
    data() {
        return {
            filtr:{}
            pagination:{}
        };
    },
    methods: {
        filtrFunction(){},
        paginationFunction(){},
    },
    mounted (){}
}
</script>

vue3

<template>
    <div class=''></div>
</template>
<script  lang="ts">
import { reactive, ref, onMounted } from 'vue';
export default {
    setup() {
        let { filtr, filtrFunction } = filtrSetup();
        let { pagination, paginationFunction } = paginationSetup();
        onMounted(() => []);
        return {
            filtr,
            filtrFunction,
            pagination,
            paginationFunction
        };
    }
};
// 这里的代码可以抽离进行复用，比如分页的逻辑
const filtrSetup = () => {
    let filtr = reactive({});
    function filtrFunction() {}
    return {
        filtr,
        filtrFunction
    };
};
const paginationSetup = () => {
    let pagination = reactive({});
    function paginationFunction() {}
    return {
        pagination,
        paginationFunction
    };
};
</script>

vue3将某个逻辑关注点相关的代码全都放在一个函数里，这样当需要修改一个功能时，就不再需要在文件中跳来跳去。

vue3的新特性中便于开发的地方

• 对typescript更好的支持

• 代码更利于维护和封装 代码逻辑脱离组件存在

• vue3将响应式系统完成独立的一个包**@vue/reactivity**，也就是说ref，reactive，effect… 这些方法可以用在任何项目中(浏览器，node)，这些方法不再依赖于vue，只需要import { reactive, effect } from “@vue/reactivity”;就可以使用，

• vue3 中,代码是根据逻辑功能来组织的，一个功能的所有 api 会放在一起（高内聚，低耦合），提高可读性和可维护性,基于函数组合的 API 更好的重用逻辑代码（ Vue2 中,我们会在一个 vue 文件的 data，methods，computed，watch 中定义属性和方法，共同处理页面逻辑 ,一个功能的实现，代码过于分散）

• vue3每个配置都是用 createApp 定义的某个Vue应用程序的范围

• 性能提升以及vue3底层的优化