优化网站推广,电子商务网站开发文档,网站建设的基本步奏,死链对网站的影响一、组合式API
什么是组合式API#xff1f; vue3中支持vue2的选项式、支持新的编程模式–函数式编程#xff08;没有this指针#xff09;做了一个兼容#xff0c;可以在一个组件中使用函数式编程和OOP编程#xff08;选项式#xff09;
setup()函数
可以使用setup属性…一、组合式API
什么是组合式API vue3中支持vue2的选项式、支持新的编程模式–函数式编程没有this指针做了一个兼容可以在一个组件中使用函数式编程和OOP编程选项式
setup()函数
可以使用setup属性来实现函数式编程内部直接编写任意代码可以直接调用不存在块作用域方法必须写在methods中setup中不可以使用外边data数据定义响应式数据–关联对象–必须使用ref函数来定义如果是使用ref定义的变量那么直接使用 //如果是使用ref定义的变量那么直接使用并且获取值需要使用.value属性获取console.log(函数式编程, name.value);定义响应式数据–关联对象–必须使用ref函数来定义 //定义响应式数据--关联对象--必须使用ref函数来定义const name Vue.ref(画虎)ref赋值不能够直接给数据赋值只能给数据的.value赋值
setName() {//ref赋值不能够直接给数据赋值只能给数据的.value赋值name.value dada}获取节点 1、定义一个空的ref对象 2、这个对象的名字必须和dom节点上的ref属性名字一致 3、必须导出这个ref对象 因为ref是关联对象所以vue3给出了另外一个定义响应式数据的函数–reactiveref定义的是一个数据ref对象reactive定义的是一个对象所以reactive相当于之前的data属性
bodydiv idroot classcontainerdiv classpanel panel-primarydiv classpanel-headingh3 classpanel-titlePanel title/h3/divdiv classpanel-bodydiv classform-grouplabel for用户名字/labelinput refnode typetext classform-control v-modelname placeholderInput field/divdiv classform-grouplabel for登录次数/labelinput refnode typetext classform-control v-modelobj.count placeholderInput field/divdiv classform-grouplabel for只读的值/labelinput refnode typetext classform-control v-modelreadValue placeholderInput field/divbutton typesubmit clickshowName classbtn btn-primary获取值/buttonbutton typesubmit clicksetName classbtn btn-primary赋值/buttonbutton typesubmit clickgetNode classbtn btn-primary获取节点/button/divpanel :countobj.countpanel//div/divscriptconst Panel {template: div classpanel panel-warningdiv classpanel-headingh3 classpanel-titlePanel title/h3/divdiv classpanel-body获取父组件传递的数据{{mycount}}/div/div,// 如果涉及组件props传参还是要用props属性接收数据和定义数据props: {count: Number},setup(props) {/* 如果在setup钩子函数中要使用props的数据必须先使用props定义和接收数据然后通过setup参数获取数据 */console.log(props)//如果要修改数据const mycount Vue.ref(props.count * 10)return {mycount}}}Vue.createApp({// 组件注册还是使用components属性components: {panel:Panel},// 可以使用setup属性来实现函数式编程// 内部直接编写任意代码可以直接调用不存在块作用域方法必须写在methods中setup() { 如果定义的方法dom节点需要使用必须进行导出--returnfunction showName() {//setup中不可以使用外边的data数据//如果是使用ref定义的变量那么直接使用并且获取值需要使用.value属性获取console.log(函数式编程, name.value)console.log(获取reactive的值, obj.count)console.log(获取redonly的值, readValue);}//定义响应式数据--关联对象--必须使用ref函数来定义const name Vue.ref(画虎)//获取节点// 1、定义一个空的ref对象// 2、这个对象的名字必须和dom节点上的ref属性名字一致// 3、必须导出这个ref对象const node Vue.ref()function getNode() {console.log(node.value)//}/*** 因为ref是关联对象所以vue3给出了另外一个定义响应式数据的函数--reactive ref定义的是一个数据ref对象reactive定义的是一个对象 所以reactive相当于之前的data属性*/const obj Vue.reactive({count:1}) /** 定义只读数据 */const readValue Vue.readonly(10000)return {name,node,obj,readValue,showName,setName() {//ref赋值不能够直接给数据赋值只能给数据的。value赋值name.value dada},getNode}}}).mount(#root)/script
/body
/html函数式编程组件传值
组件注册还是使用components属性 // 组件注册还是使用components属性components: {panel:Panel},如果涉及组件props传参还是要用props属性接收数据和定义数据 // 如果涉及组件props传参还是要用props属性接收数据和定义数据props: {count: Number},如果再setup钩子函数中要使用props的数据必须使用props选项来定义数据然后在setup钩子函数中使用形参来接收数据
setup(props) {/* 如果在setup钩子函数中要使用props的数据必须先使用props定义和接收数据然后通过setup参数获取数据 */console.log(props)//如果要修改数据const mycount Vue.ref(props.count * 10)return {mycount}}生命周期钩子函数
setup钩子函数要早于beforeCreate生命周期并且它实现了方法和数据定义所以setup可以理解为创建生命周期因此setup钩子函数中如果要实现生命周期那么没有创建生命周期只有挂载、更新、卸载所以vue3的生命周期钩子函数有6个onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted四个阶段每一个阶段分为之前之后vue3中提供了两种写法选项式和钩子函数式在setup中没有创建生命周期因为setup限于创建生命周期而执行所以可以把setup当创建生命周期使用
