宏伟的事业,是靠实实在在的微不足道的一步步的积累,获得的。
前言
虽然vue3还没有正式发版，但是各大培训机构均把它作为一个"噱头"，来吸引流量。相比vue2，写法有一个很大变动，也越来越符合"解藕"的思想。目前在vue3的使用方面有两种方式：
- 一种是通过下载vue@next，直接使用vue3。
- 另一种是通过vue-compisition-api来使用Vue3的一些特性。
没有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,
};
组件传值
还有一个明显的变化就是父子组件的传值，通过参数的形式。
//父组件
<div>count:{{ count }}</div>
<Button @outClick="onOutClick" text="Foo"></Button>
import {
ref,
reactive,
defineComponent,
onMounted,
computed
} from "vue";
import Button from "./components/Button.vue";
components: {
Button,
let count = ref(0);
const onOutClick = (now) => {
console.log("子组件触发向父组件触发事件与传值:", now);
count,
onOutClick,
通过setup的参数prop、SetupContext实现父子组件通信。
//子组件
props: {
text: String,
setup(props, { emit }) {
const onClick = () => {
emit("outClick", Date.now());
props,
onClick,
生命周期钩子函数和computed等也写在setup函数中。
// 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;
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 windowSize from "../mixin.js";
const count = ref(0);
const {
width = window.innerWidth,
height
} = windowSize();
width,
height,
//...