来讲讲一直不降温度的vue3，对于使用vue框架的编程者来讲98%代码由typescript编写，期待100%的Ts
Vue3由于完全由TS进行重写，在应用中对类型判断的定义和使用有很强的表现。同一对象的多个键返回值必须通过定义对应的接口（interface）来进行类型定义。要不然在ESLint检测和检测时都会报错。
在实际应用当中，vue2中的this指向在vue3中使用同样的方法进行代码书写；
methods:{
kkb(){
this.num++
}
}
此时的num在data已经定义了，但是在vue3中直接这样写会报错需要在vue中引入defineComponent对象进行包裹；
import { defineComponent } from 'vue';
export default definedComponent({
name: 'App'
})
<template>
<button @click="kkb">
Count is: {{ state.count }}, double is: {{ state.double }}
</button>
</template>
<script>
import { reactive, computed } from 'vue'
export default {
setup() {
const state = reactive({
count: 0,
double: computed(() => state.count * 2),
})
function kkb() {
state.count++
}
return {
state,
kkb,
}
},
}
</script>
生命周期钩子函数
import { onMounted } from 'vue'
export default {
setup() {
onMounted(() => {
console.log('component is mounted!')
})
},
}
生命周期只能在setup钩子中，他会通过内部状态自动找到调用此setup钩子的实例，这样设计是为了减少将逻辑提取到外部函数试的冲突，setuo()函数现在只是简单的作为调用所有组合函数的入口
逻辑提取和复用方便
import { ref, onMounted, onUnmounted } from 'vue'
export function useMousePosition() {
const x = ref(0)
const y = ref(0)
function update(e) {
x.value = e.pageX
y.value = e.pageY
}
onMounted(() => {
window.addEventListener('mousemove', update)
})
onUnmounted(() => {
window.removeEventListener('mousemove', update)
})
return { x, y }
}
import { useMousePosition } from './mouse'
export default {
setup() {
const { x, y } = useMousePosition()
return { x, y }
},
}
响应式数据在vue3中变的更加灵活和友善。
Vue2中 data 里没有定义的属性在后续无法正常的进行响应操作，必须通过 Vue.set 这个 API 向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property ，而在 Vue3 中我们可以通过引入 ref 来操作响应值。ref 是一个实例方法，接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象具有指向内部值的单个 property.value。
示例：
const count = ref(0)
console.log(count.value) // 0
count.value++
console.log(count.value) // 1
如果将对象分配为 ref 值，则通过 reactive 方法使该对象具有高度的响应式。
Vue3 采用了 ES6的一项新特性：Proxy 来实现Vue3中数据响应式的设计
Object.defineProperty(data,'count',{ get(){}, set(){} })
new Proxy(data,{ get(key){}, set(key,value){} }) Object.defineProperty 要修改 data 中的属性必须要明确的知道 key 值（count）, Proxy 在使用中是读取或者设置data中任意的 key，所以不管是修改已有的属性还是新增属性，都可以实现响应式的要求。
其他的不同的地放如下：
一、模板指令
1.组件上v-model用法已将更改，替换v-bind.sync
2.<template v-for>和非 v-for节点上key用法已更改
3.在同一元素上使用的v-if和v-for优先级已经更改
4.v-for中的ref不再注册ref数组
5.v-bind="object"` 现在排序敏感
6.v-on:event.native` 修饰符已移除
二、组件
1.只能使用普通函数创建功能组件
2.functional 属性在单文件组件<template>` 和 `functional` 组件选项被抛弃
3.异步组件现在需要 `defineAsyncComponent` 方法来创建
4.组件事件现在需要在 `emits` 选项中声明
三、渲染函数
1.渲染函数API改变
2.`$scopedSlots` property 已删除，所有插槽都通过 `$slots` 作为函数暴露
3.`$listeners` 被移除或整合到 `$attrs`
4.`$attrs` 现在包含 `class` and `style` attribute
四、其他小改动
1.`destroyed` 生命周期选项被重命名为 `unmounted`
2.`beforeDestroy` 生命周期选项被重命名为 `beforeUnmount`
3.`default` prop 工厂函数不再可以访问 `this` 上下文
4.自定义指令 API 已更改为与组件生命周期一致
且 `binding.expression` 已移除
5.`data` 选项应始终被声明为一个函数
6.来自 mixin 的 `data` 选项现在为浅合并
7.Attribute 强制策略已更改
8.一些过渡 class 被重命名
9.`<TransitionGroup>` 不再默认渲染包裹元素
10.当侦听一个数组时，只有当数组被替换时，回调才会触发，如果需要在变更时触发，则需要指定 `deep` 选项。
11.没有特殊指令的标记 (`v-if/else-if/else`、`v-for` 或 `v-slot`) 的 `<template>` 现在被视为普通元素，并将生成原生的 `<template>` 元素，而不是渲染其内部内容。
12.已挂载的应用不会取代它所挂载的元素
13.生命周期 `hook:` 事件前缀改为 `vnode-`
五、移除 API
1.`keyCode` 支持作为 `v-on` 的修饰符
2.$on、$off 和 $once 实例方法
3.过滤
4.内联模板 attribute
5.`$children` 实例 property
6.`propsData` 选项
7.`$destroy` 实例方法。用户不应再手动管理单个 Vue 组件的生命周期。
8.全局函数 `set` 和 `delete` 以及实例方法 `$set` 和 `$delete`。基于代理的变化检测不再需要它们了。
就先写到这里，后期在跟进哈，小伙伴们一起学习，冲鸭。。。
