写在最前：本文转自掘金是在单文件组件（SFC）中使用组合式API的编译时语法糖，解决Vue3.0中setup需要频繁将声明的变量、函数以及import引入的内容通过return向外暴露，才能在使用的问题1.基本使用//import引入内容import{getToday}from'./utils'//变量letmsg='Hello!'//函数functionlog(){console.log(msg)}//在template中直接使用声明的变量、函数以及import引入的内容{{msg}}{{getToday()}}总结：语法糖里面的代码会被编译成组件setup()函数的内容，不需要通过retu
基本使用setup内部定义的变量可通过return返回，这些变量和方法便可在模板中使用基本使用setup内定义的变量本事不具有响应式，即修改其内容时，页面不会发生改变，只有通过ref（基本数据类型）和reactive（复杂数据类型）才能让这些变量具有响应式。赋予变量响应式父子组件传值父传子子组件父组件及效果子传父子组件调用父组件方法子组件父组件及效果子组件向父组件传值子组件传值父组件接受子组件传来的参数生命周期函数的调用setup中在生命周期函数的前面加上on来实现；setup的调用实在props解析后，并且在setup中不能调用beforeCreate和create生命周期，因为二者的执行顺
什么是setup语法糖vue3.0时setup的变量需要return暴露出来，template才能获取。到3.2之后只需要在script标签中添加setup，例如，组件中不在需要特殊注册，直接引入，属性和方法便不需返回，在中自定义的属性、指令可以直接在template使用。setup参数使用setup函数时，它将接收两个参数：1.props2.contextPropssetup函数中的第一个参数是props。正如在一个标准组件中所期望的那样，setup函数中的props是响应式的，当传入新的prop时，它将被更新。特别注意：因为props是响应式的，你不能使用ES6解构，它会消除prop的响应
基本使用setup内部定义的变量可通过return返回，这些变量和方法便可在模板中使用基本使用setup内定义的变量本事不具有响应式，即修改其内容时，页面不会发生改变，只有通过ref（基本数据类型）和reactive（复杂数据类型）才能让这些变量具有响应式。赋予变量响应式父子组件传值父传子子组件父组件及效果子传父子组件调用父组件方法子组件父组件及效果子组件向父组件传值子组件传值父组件接受子组件传来的参数生命周期函数的调用setup中在生命周期函数的前面加上on来实现；setup的调用实在props解析后，并且在setup中不能调用beforeCreate和create生命周期，因为二者的执行顺
什么是setup语法糖vue3.0时setup的变量需要return暴露出来，template才能获取。到3.2之后只需要在script标签中添加setup，例如，组件中不在需要特殊注册，直接引入，属性和方法便不需返回，在中自定义的属性、指令可以直接在template使用。setup参数使用setup函数时，它将接收两个参数：1.props2.contextPropssetup函数中的第一个参数是props。正如在一个标准组件中所期望的那样，setup函数中的props是响应式的，当传入新的prop时，它将被更新。特别注意：因为props是响应式的，你不能使用ES6解构，它会消除prop的响应
setup一个组件选项，在组件被创建之前，props被解析之后执行。它是组合式API的入口。countis:{{count}}import{ref}from"vue";exportdefault{props:{msg:String},setup(props){console.log(props);constcount=ref(0);letaddOne=()=>{console.log(1);count.value++;};return{count,addOne};}};单文件组件为了方便的使用setup,可以通过，它是在单文件组件(SFC)中使用组合式API的编译时语法糖。相比于普通的语法，它
setup一个组件选项，在组件被创建之前，props被解析之后执行。它是组合式API的入口。countis:{{count}}import{ref}from"vue";exportdefault{props:{msg:String},setup(props){console.log(props);constcount=ref(0);letaddOne=()=>{console.log(1);count.value++;};return{count,addOne};}};单文件组件为了方便的使用setup,可以通过，它是在单文件组件(SFC)中使用组合式API的编译时语法糖。相比于普通的语法，它
vue3.2到底更新了什么？根据原文内容的更新的内容主要有以下5块：SSR：服务端渲染优化。@vue/server-renderer包加了一个ES模块创建，与Node.js解耦，使在非Node环境用@vue/serve-render做服务端渲染成为可能，比如(Workers、ServiceWorkers)。NewSFCFeatures：新的单文件组件特性。WebComponents：自定义web组件。这个我们平时很少用到，但是应该知道。EffectScopeAPI：effect作用域，用来直接控制响应式副作用的释放时间(computed和watchers)。这是底层库的更新，开发不用关心，但是
vue3.2到底更新了什么？根据原文内容的更新的内容主要有以下5块：SSR：服务端渲染优化。@vue/server-renderer包加了一个ES模块创建，与Node.js解耦，使在非Node环境用@vue/serve-render做服务端渲染成为可能，比如(Workers、ServiceWorkers)。NewSFCFeatures：新的单文件组件特性。WebComponents：自定义web组件。这个我们平时很少用到，但是应该知道。EffectScopeAPI：effect作用域，用来直接控制响应式副作用的释放时间(computed和watchers)。这是底层库的更新，开发不用关心，但是
相信在座各位假如使用Vue生态开发项目情况下，对Pinia状态管理库应该有所听闻或正在使用，假如还没接触到Pinia，这篇文章可以帮你快速入门，并如何在企业项目中更优雅封装使用。本文先给大家阐述如何去理解、使用Pinia，最后讲怎样把Pinia集成到工程中，适合大多数读者，至于研读Pinia的源码等进阶科普，会另外开一篇文章细述。另外，本文的所有demo，都专门开了个GitHub项目来保存，有需要的同学可以拿下来实操一下。??认识PiniaPinia读音：/piːnjʌ/，是Vue官方团队推荐代替Vuex的一款轻量级状态管理库。它最初的设计理念是让VueStore拥有一款Composition
