Vue3现在已经出来了，感觉用的还是不多，但是我们却是需要拥抱这种变化，特别是TypeScript得到了非常大的使用的情况下，未来可以想象TypeScript在前端将会出现越来越多的使用，现在就让我们走进Vue3，走进TypeScript吧
之前也是研究了一段时间的Vue3的变化，感觉却是跟vue2变化非常明显，如果要是一个vue2的项目转换成vue3，我感觉我劝你还是重写吧，特别是组合式api的引入，这让之前的vue的js写法直接废弃了，当然特别是ref、reactive的出现，让我感觉反而比之前的代码还要麻烦了，还要return出去，还要考虑解包。这让我感觉很不方便。
今天我又创建了一个vue的项目，准备来仔细研磨一下vue和typeScript，好吧，一上来就让我懵了，原来的defineComponent不负存在，变成了一个继承Vue的一个类，还有就是出现了@Options这种东西，让我好不适应。
更让我感到奇怪的是，我尝试写setup函数，竟然没有任何作用，我想vue3的这些特性呢？？？？真是见鬼了。当我百度半天后我才明白，vue3的特性js部分变化其实在对象这方面经过封装后是没有多少变化的，原来是什么样子还是什么样子的，这让我有点喜欢了，我们可以直接用看待java对象的形式，看待一个vue3的TypeScript代码。
你定义变量，其实就有ref、reactive类型
如：
data: any = {
title : “title”,
left : “left”,
}
console.log(isReactive(this.data),this.data);
// true Proxy {title: “title”, left: “left”}
但是ref让我很纠结，打印出来的始终是false
public test = ref(2);
console.log(isRef(this.test),this.test);
// false 2
生命周期方法，这个比较简单，跟所有面向对象，android、ios都比较相似，生命周期如下
created() {
const helloword = shallowRef<ComponentPublicInstance
console.log(“created”,helloword);
}
mounted() {
console.log(“mounted”);
}
beforeCreate() {
console.log(“mounted”);
}
beforeMount?(): void {
console.log(“beforeMount”);
}
beforeUnmount?(): void {
console.log(“beforeUnmount”);
}
unmounted?(): void {
console.log(“unmounted”);
}
beforeUpdate?(): void {
console.log(“beforeUpdate”);
}
updated?(): void {
console.log(“updated”);
}
activated?(): void {
console.log(“activated”);
}
deactivated?(): void {
console.log(“deactivated”);
}
render?(){
console.log(“render”);
}
@Options
这个东西让我也是比较的难受，其实里面的代码跟vue2的代码一摸一样，我不知道为什么要这样分开设计，感觉还是比较难受的，主要是包含三个部分，组建定义、属性定义、事件监听
@Options({
components: { // 组建
HelloWorld,
},
props: { // 属性
msg: String!
},
watch: {// 事件监听
age: {
handler: function(newval,oldval) {
console.log(“watch”,newval);
//this.gotoAbourt();
},
}
}
})
get方法，同vue中的 computed
public get age(): number {
console.log(“get age”, this.mAge);
return this.mAge;
}
总体感觉是TypeScript的vue没有vue3那些弯弯绕绕，还是比较直接的，我想以后的发展应该也会越来越好，我感觉新项目的话值得尝试。