vue3.0新特性盘点

转载

秋风的笔记 2022-04-07 17:46:39

文章标签 数据响应式模版 文章分类 代码人生

宏伟的事业,是靠实实在在的微不足道的一步步的积累,获得的。

vue3.0新特性盘点_数据

前言

vue3还没有正式发版前各大培训机构均把它作为一个"噱头"，来吸引流量，目前vue3也已经发布。相比vue2，写法有一个很大变动，也越来越符合"解藕"的思想。目前在vue3的使用方面有两种方式：

一种是通过下载vue@next，直接使用vue3。
另一种是通过vue-compisition-api来使用Vue3的一些特性。

vue3.0新特性盘点_模版_02

没有this

在之前vue2，this的指向是难以琢磨的，而且有诸多限制，如下：

export default {
    data() {
        return {
            title: "foo",
        }
    },
    methods: {
        //title："foo"
        getTitle() {
            this.title = "";
            //这里的this不应该是methods这个对象吗
        }
    }
}

而在vue3中，抛弃了"this"这个难以理解的概念。直接用声明式的函数来实现数据响应。vue3通过setup函数取代vue2中的date函数，返回一个对象暴露给模版，我们一切的响应式操作都在setup函数中实现。

import { defineComponent, ref } from "vue";
export default defineComponent({
    setup() {
        const title = ref("vue3");
        console.log(count);
        //      {
        //        value: "vue3",
        //        __v_isRef: true
        //      }
        return {
            title,
        };
    },
});

更好的tree-shaking支持

Tree-shaking较早由Rich_Harris的rollup实现，后来，webpack也增加了tree-shaking功能。中文翻译过来是"树摇"，摇树，树上没有生命的叶子就会掉落下来，简单的理解就是去除"无用的东西"。为什么说vue3对此功能有更好的支持，重点就在"按需加载"这四个字上，在Vue3中，我们用到的函数可以通过import声明。而在vue2中我们直接导出的是整个vue实例，如果我们只是简单的用某一些功能的话就有点累赘。这其实也说明来一个未来框架必不缺少的一个能力就是"解藕"。

import {
    ref,
    reactive,
    defineComponent,
    onMounted,
    computed
} from "vue";
//更好的tree-shaking支持

tree-shaking有一个两个要求：

一个是必须是import导入。
另一个是必须是单个函数或常量导出。

如果导出的是一个对象，那也无法用tree-shaking。

export const add=()=>{
    //...
}
export const handleClick=()=>{
    //...
}


//不要这样导出
export default {
    add,
    handleClick
}

webpack中需要开启：

optimization: {
    usedExports: true, //用到使用
    minimize: true, //压缩
},

数据的不可逆性

这里讲到了引用类型，如下：

<template>
    <div>
        <button>加加</button>
        <div>count:{{ obj.count }}</div>
    </div>
</template>


<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
    setup() {
        const obj = {
            count: 0,
        };
        const handleClick = () => {
            obj.count++;
            console.log(obj);
        };
        return {
            obj,
            handleClick,
        };
    },
});
</script>

以上代码中，页面数据会跟着变吗？不会，虽然打印出来的obj中的count会变化，但是在vue3中它是不可变的，想要变化，使用vue3提供的ref或reactive。

这样做的意义是为了防止原数据被意外的改变，可以想想vue2中this，如果用this来实现响应式，那么很容易出现的问题就是我可以通过this改变vue实例下的任意数据。

所以vue3数据的响应其实就是拷贝来一份数据来实现页面数据更新。

setup() {
    let count = ref(0);
    //常用来响应基本数据类型


    const state = reactive({
        title: "Hello,Vue.js 3.0!",
    });
    //常用来响应引用数据类型
    return {
        count,
        state,
    //...
    };
}

组件传值

还有一个明显的变化就是父子组件的传值，通过参数的形式。

//父组件
<template>
    <div>
        <div>count:{{ count }}</div>
        <Button @outClick="onOutClick" text="Foo"></Button>
    </div>
</template>


<script>
import {
    ref,
    reactive,
    defineComponent,
    onMounted,
    computed
} from "vue";
import Button from "./components/Button.vue";
export default defineComponent({
    components: {
        Button,
    },
    setup() {
        let count = ref(0);
        const onOutClick = (now) => {
            console.log("子组件触发向父组件触发事件与传值:", now);
        };
        return {
            count,
            onOutClick,
        };
    },
});
</script>

通过setup的参数prop、SetupContext实现父子组件通信。

//子组件


export default {
    props: {
        text: String,
    },
    setup(props, { emit }) {
        const onClick = () => {
            emit("outClick", Date.now());
        };
        return {
            props,
            onClick,
        };
    },
}

生命周期钩子函数和computed等也写在setup函数中。

import {
    ref,
    reactive,
    defineComponent,
    onMounted,
    computed
} from "vue";
export default defineComponent({
    setup() {
        let count = ref(0);
        // Vue2.x 中的 mounted 生命周期函数
        onMounted(() => {
            console.log("mounted");
        });


        // 计算属性
        const zerosCount = computed(() => {
            return new Array(10000)
                    .fill("")
                    .map((value, index) => index + 1)
                    .join("")
                    .match(/0/g).length;
        });
        return {
            count,
            zerosCount,
        };
    },
})

逻辑复用

在项目中，我们可能会抽出一些共用的功能单元来通过mixin来注入。这样会导致一些问题，比如原数据不透明，模版中的一些响应式数据，找不到声明。在vue3中我们可以通过解构赋值的方式显式的声明数据。如下mixin混入

// mixin混入文件
import {
    ref,
    onMounted,
    onUnmounted
} from "vue";
export default () => {
    const width = ref(window.innerWidth);
    const height = ref(window.innerHeight);
    const update = (e) => {
        width.value = window.innerWidth;
        height.value = window.innerHeight;
    };
    onMounted(() => {
        window.addEventListener("resize", update);
    });
    onUnmounted(() => {
        window.removeEventListener("resize", update);
    });
    return { width, height};
}

这样写，就可以明确知道原数据的出处。

import { defineComponent, ref } from "vue";

 import windowSize from "../mixin.js";

 export default defineComponent({

    setup() {

        const count = ref(0);

        const {

            width = window.innerWidth,

            height

        } = windowSize();

        return {

            count,

            width,

            height,

            //...

        };

    },

 });