vue3.0新特性盤點(diǎn)

宏偉的事業(yè),是靠實(shí)實(shí)在在的微不足道的一步步的積累,獲得的。

前言

雖然vue3還沒有正式發(fā)版，但是各大培訓(xùn)機(jī)構(gòu)均把它作為一個(gè)"噱頭"，來吸引流量。相比vue2，寫法有一個(gè)很大變動(dòng)，也越來越符合"解藕"的思想。目前在vue3的使用方面有兩種方式：

• 一種是通過下載vue@next，直接使用vue3。

• 另一種是通過vue-compisition-api來使用Vue3的一些特性。

沒有this

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

export default {
????data() {
????????return {
????????????title: "foo",
????????}
????},
????methods: {
????????//title："foo"
????????getTitle() {
????????????this.title = "";
????????????//這里的this不應(yīng)該是methods這個(gè)對象嗎
????????}
????}
}

而在vue3中，拋棄了"this"這個(gè)難以理解的概念。直接用聲明式的函數(shù)來實(shí)現(xiàn)數(shù)據(jù)響應(yīng)。

vue3通過setup函數(shù)取代vue2中的date函數(shù)，返回一個(gè)對象暴露給模版，我們一切的響應(yīng)式操作都在setup函數(shù)中實(shí)現(xiàn)。

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實(shí)現(xiàn)，后來，webpack也增加了tree-shaking功能。中文翻譯過來是"樹搖"，搖樹，樹上沒有生命的葉子就會(huì)掉落下來，簡單的理解就是去除"無用的東西"。

為什么說vue3對此功能有更好的支持，重點(diǎn)就在"按需加載"這四個(gè)字上，在Vue3中，我們用到的函數(shù)可以通過import聲明。而在vue2中我們直接導(dǎo)出的是整個(gè)vue實(shí)例，如果我們只是簡單的用某一些功能的話就有點(diǎn)累贅。這其實(shí)也說明來一個(gè)未來框架必不缺少的一個(gè)能力就是"解藕"。

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

tree-shaking有一個(gè)兩個(gè)要求：

• 一個(gè)是必須是import導(dǎo)入。

• 另一個(gè)是必須是單個(gè)函數(shù)或常量導(dǎo)出。

如果導(dǎo)出的是一個(gè)對象，那也無法用tree-shaking。

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

//不要這樣導(dǎo)出
export default {
????add,
????handleClick
}

webpack中需要開啟：

optimization: {
????usedExports: true, //用到使用
????minimize: true, //壓縮
},

數(shù)據(jù)的不可逆性

這里講到了引用類型，如下：

<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>

以上代碼中，頁面數(shù)據(jù)會(huì)跟著變嗎？不會(huì)，雖然打印出來的obj中的count會(huì)變化，但是在vue3中它是不可變的，想要變化，使用vue3提供的ref或reactive。

這樣做的意義是為了防止原數(shù)據(jù)被意外的改變，可以想想vue2中this，如果用this來實(shí)現(xiàn)響應(yīng)式，那么很容易出現(xiàn)的問題就是我可以通過this改變vue實(shí)例下的任意數(shù)據(jù)。

所以vue3數(shù)據(jù)的響應(yīng)其實(shí)就是拷貝來一份數(shù)據(jù)來實(shí)現(xiàn)頁面數(shù)據(jù)更新。

setup() {
????let count = ref(0);
????//常用來響應(yīng)基本數(shù)據(jù)類型

????const state = reactive({
????????title: "Hello,Vue.js 3.0!",
????});
????//常用來響應(yīng)引用數(shù)據(jù)類型
????return {
????????count,
????????state,
????//...
????};
}

組件傳值

還有一個(gè)明顯的變化就是父子組件的傳值，通過參數(shù)的形式。

//父組件
<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("子組件觸發(fā)向父組件觸發(fā)事件與傳值:", now);
????????};
????????return {
????????????count,
????????????onOutClick,
????????};
????},
});
script>

通過setup的參數(shù)prop、SetupContext實(shí)現(xiàn)父子組件通信。

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

生命周期鉤子函數(shù)和computed等也寫在setup函數(shù)中。

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

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

邏輯復(fù)用

在項(xiàng)目中，我們可能會(huì)抽出一些共用的功能單元來通過mixin來注入。這樣會(huì)導(dǎo)致一些問題，比如原數(shù)據(jù)不透明，模版中的一些響應(yīng)式數(shù)據(jù)，找不到聲明。

在vue3中我們可以通過解構(gòu)賦值的方式顯式的聲明數(shù)據(jù)。如下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};
}

這樣寫，就可以明確知道原數(shù)據(jù)的出處。

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,

????????????//...

????????};

????},

});

??愛心三連擊
1.看到這里了就點(diǎn)個(gè)在看支持下吧，你的「點(diǎn)贊，在看」是我創(chuàng)作的動(dòng)力。
2.關(guān)注公眾號(hào)程序員成長指北，回復(fù)「1」加入Node進(jìn)階交流群！「在這里有好多 Node 開發(fā)者，會(huì)討論 Node 知識(shí)，互相學(xué)習(xí)」！
3.也可添加微信【ikoala520】，一起成長。

“在看轉(zhuǎn)發(fā)”是最大的支持