vue3.0新特性盘点
宏伟的事业,是靠实实在在的微不足道的一步步的积累,获得的。
前言
虽然vue3还没有正式发版，但是各大培训机构均把它作为一个"噱头"，来吸引流量。相比vue2，写法有一个很大变动，也越来越符合"解藕"的思想。目前在vue3的使用方面有两种方式：
一种是通过下载vue@next，直接使用vue3。
另一种是通过vue-compisition-api来使用Vue3的一些特性。
没有this
export default {
data() {
return {
title: "foo",
}
},
methods: {
//title："foo"
getTitle() {
this.title = "";
//这里的this不应该是methods这个对象吗
}
}
}
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支持
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混入文件
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,
//...
};
},
});
❤️爱心三连击
1.看到这里了就点个在看支持下吧，你的「点赞，在看」是我创作的动力。
2.关注公众号
程序员成长指北，回复「1」加入Node进阶交流群！「在这里有好多 Node 开发者，会讨论 Node 知识，互相学习」！3.也可添加微信【ikoala520】，一起成长。
“在看转发”是最大的支持