Vue3学习笔记—Vue3setup()高级用法

从vue2升级到vue3，vue3兼容vue2，所以vue3可以使用vue2的可选API。由于可选API中的一个变量存在于多个地方，如果出现问题，需要在多个函数中进行检查。当项目较大时，就会遇到问题，增加排查难度。因此vue3新增了一个setup配置项，用于编写组合API。一、可选API和组合API的区别有些同学用了一年的Vue发呆，竟然连可选API都不知道！你是那个同学吗？如果有，请速速收藏。vue2中的OptionsAPI是一个可选的API，一个中文一个英文，你可以随便叫。在一个vue文件中，会有data、methods、mounted、computed、watch等用来定义属性和方法一起处理页面逻辑。我们称此方法为OptionsAPI。示例1：计数器观察上面的例子，我们发现num值的处理涉及数据和方法两个选项，业务处理比较分散。项目小，清晰，但是项目变大后，数据和方法会包含很多属性和方法，这时候很难区分哪个属性对应哪个方法。所以vue3添加了编写组合API的设置。Vue3的CompositionAPI是一个组合API。Combinedapi是指将一个函数定义的api放在一起，这样即使项目变大，函数增多，我们也可以快速找到所有与该函数相关的api，不像optionsAPI的函数是分散且需要更频繁地更改找到它的过程更困难。示例2：计数器ref是让基本数据类型响应。下一篇文章会详细介绍它的用法。需要的同学可以关注一下，以免迷路！用一张图告诉你它们的区别：2.如何使用setup?2.1．setup什么时候执行？Setup用于编写组合API。从生命周期钩子函数的角度来说，相当于替代了beforeCreate。将在创建之前执行。执行后，setup打印结果一直在前方。2.2.如何使用设置数据和方法？示例3：直接定义并使用变量，运行Exception:runtime-core后发现结果。esm-bundler.js?5c40:6584[Vue警告]：在渲染期间访问了属性“a”，但未在实例上定义。提示我们实例上没有挂载访问的属性a。setup里面的属性和方法必须通过return暴露出来，属性挂载在实例上，否则没法使用。上面的代码添加了return:2.3。设置里面有这个吗？在setup中打印这个，返回的结果是undefined。就是setup里面不存在这个，和这个相关的东西是挂不上去的。2.4.如何在设置中使用钩子函数？Vue3是兼容vue2的option式写法，所以hook函数可以和setup并存，相当于OptionsAPI。例4：exportdefault{setup(){console.log('setup');},mounted(){console.log('mounted');}}使用vue3新增的setup()函数编写组合api，所以不建议这样写代码。因此，需要使用onXXX函数族来注册钩子函数。注册成功后，调用时传递一个回调函数。示例5：从“vue”导入{onMounted}；exportdefault{setup(){consta=0return{a},onMounted(()=>{console.log("execution");})}}注册了这些生命周期Hook函数只能在setup时同步使用，因为它们依赖在全局内部状态上定位当前组件实例，当前组件下没有调用该函数会抛出错误。其他钩子函数同理，按需导入即可。2.5.setup和hook函数的关系setup和hook函数并列时，setup不能调用lifecycle相关的函数，lifecycle可以调用setup相关的属性和方法。例6：this.$options.setup()返回一个大对象，里面包含了setup中的所有属性和方法。3.setupparameter在使用setup时，会收到两个参数：props和context。3.1.props的第一个参数是props，表示父组件给子组件传值，props是响应式的。当传入新的道具时，它们会自动更新。例7：exportdefault{props:{msg:String,ans:String,},setup(props,context){console.log(props);//Proxy{msg:"急找对象",ans:"你haveanobject是吗？"}},}因为props是响应式的，所以不能使用ES6解构，会消除props的响应性。这种情况下需要借用toRefs解构。示例8：import{toRefs}from"vue";exportdefault{props:{msg:String,ans:String,},setup(props,context){console.log(props);const{msg,ans}=toRefs(props)console.log(msg.value);//急着找对象console.log(ans.value);//你有对象吗？},}在使用组件的时候，经常会遇到可选参数。有的地方需要传某个值，有的时候不需要。如何处理？如果ans是可选参数，则传递的props中可能没有ans。在这种情况下，toRefs不会为ans创建ref，您需要改用toRef。import{toRef}from"vue";setup(props,context){letans=toRef(props,'ans')//如果不存在则创建一个ansconsole.log(ans.value);}3.2、contextcontext上下文environment，它包含三个部分：attributes，slots，和customevents。setup(props,context){const{attrs,slots,emit}=context//attrs获取组件传递的属性值，//slots组件中的slots//emit自定义事件子组件}attrs为无响应样式对象，主要接收no-props属性，经常用来传递一些样式属性。slots是一个代理对象，其中slots.default()得到一个数组，数组的长度由组件的slot决定，slot的内容在数组内部。setup中不存在这个，所以用emit来代替之前的this.$emit，在child传递给parent的时候使用，触发自定义事件。示例9：4.setupfeatures总结1.这个函数会在create之前执行，上面已经解释过了。2.setup里面没有this，所以不能挂载this相关的东西。3.setup内部的属性和方法必须通过return暴露出来，否则没法使用。4.setup内部数据无响应。5、setup不能调用生命周期相关函数，但是生命周期函数可以调用setup中的函数。