## Vue3.0 新特性 https://mp.weixin.qq.com/s/l9MyfE4sMJTbsOsboYdvIQ https://juejin.cn/post/6940454764421316644 <hr/> * Performance：性能优化 * Tree-shaking support：支持摇树优化 * Composition API：组合API * Fragment，Teleport，Suspense：新增的组件 * Better TypeScript support：更好的TypeScript支持 * Custom Renderer API：自定义渲染器  ### Composition API #### setup - setup 执行时机是在beforeCreate之前执行 - 由于在执行setup 时候未创建组件实例，因此在 setup 选项中没有 this ``` export default defineComponent ({ // setup接受两个参数: props，context setup(props, context) { // 使用ES6解构，解构会消除它的响应式 const { name } = props console.log(name) }, }) ``` `context`中就提供了`this`中最常用的三个属性：`attrs`、`slot`和`emit`，并且这几个属性都是自动同步最新的值。 #### reactive、ref与toRefs 使用reactive和ref来进行数据定义---双向绑定 reactive函数确实可以代理一个对象， 但是不能代理基本类型，例如字符串、数字、boolean 等  直接将user中的属性解构出来，不能使用 ES6 直接解构，解决办法就是使用toRefs。 **toRefs 用于将一个 reactive 对象转化为属性全部为 ref 对象的普通对象**。 ``` setup() { const year = ref(0); const user = reactive({ nickname: "xiaofan", age: 26, gender: "女" }); setInterval(() => { year.value++; user.age++; }, 1000); return { year, // 使用reRefs ...toRefs(user), }; }, ``` ### 生命周期 Vue3.0 新增了`setup` `beforeDestroy`名称变更成`beforeUnmount`;`destroyed`表更为`unmounted`。 `beforeCreate`和`created`实际使用的是 vue2 的 钩子命名都增加了`on`  ### Teleport