企业实缴公示在什么网站做,免费注册域名网,开发者选项在哪,wordpress网站标题优化目前setup sugar已经进行了定稿#xff0c;vue3 setup sugar TS的写法看起来很香,写本文时 Vue 版本是 “^3.2.6”
script setup 语法糖
新的 setup 选项是在组件创建之前, props 被解析之后执行#xff0c;是组合式 API 的入口。 WARNING 在 setup 中你应该避免使用 thi…目前setup sugar已经进行了定稿vue3 setup sugar TS的写法看起来很香,写本文时 Vue 版本是 “^3.2.6”
script setup 语法糖
新的 setup 选项是在组件创建之前, props 被解析之后执行是组合式 API 的入口。 WARNING 在 setup 中你应该避免使用 this因为它不会找到组件实例。setup 的调用发生在 data property、computed property 或 methods 被解析之前所以它们无法在 setup 中被获取。 setup 选项是一个接收 props 和 context 的函数我们将在之后进行讨论。此外我们将 setup 返回的所有内容都暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。
它是 Vue3 的一个新语法糖在 setup 函数中。所有 ES 模块导出都被认为是暴露给上下文的值并包含在 setup() 返回对象中。相对于之前的写法使用后语法也变得更简单。 在添加了setup的script标签中我们不必声明和方法这种写法会自动将所有顶级变量、函数均会自动暴露给模板template使用 这里强调一句 “暴露给模板跟暴露给外部不是一回事” 使用方式极其简单仅需要在 script 标签加上 setup 关键字即可。示例
script setup/script该setup功能是新的组件选项。它是组件内部暴露出所有的属性和方法的统一API。 使用后意味着script标签内的内容相当于原本组件声明中setup()的函数体不过也有一定的区别。 使用 script setup 语法糖组件只需引入不用注册属性和方法也不用返回也不用写setup函数也不用写export default 甚至是自定义指令也可以在我们的template中自动获得。
调用时机
创建组件实例然后初始化 props 紧接着就调用setup 函数。从生命周期钩子的视角来看它会在 beforeCreate 钩子之前被调用.
模板中使用
如果 setup 返回一个对象则对象的属性将会被合并到组件模板的渲染上下文
templatediv{{ count }} {{ object.foo }}/div
/templatesetup 参数
「props」 第一个参数接受一个响应式的props这个props指向的是外部的props。如果你没有定义props选项setup中的第一个参数将为undifined。props和vue2.x并无什么不同,仍然遵循以前的原则
不要在子组件中修改props如果你尝试修改将会给你警告甚至报错。不要结构props。结构的props会失去响应性。
「context」 第二个参数提供了一个上下文对象从原来 2.x 中 this 选择性地暴露了一些 property。
script setupprops, context langtscontext.attrscontext.slotscontext.emit
script像这样只要在setup处声明即可自动导入同时也支持解构语法
script setupprops, { emit } langtsscript组件自动注册
导入 component 或 directive 直接import即可无需额外声明
import { MyButton } from /components
import { directive as clickOutside } from v-click-outside与原先一样模板中也支持使用kabab-case来创建组件如 在 script setup 中引入的组件可以直接使用无需再通过components进行注册并且无法指定当前组件的名字它会自动以文件名为主也就是不用再写name属性了。示例
templateHelloWorld /
/templatescript setup
import HelloWorld from ./components/HelloWorld.vue; //此处使用 Vetur 插件会报红
/script如果需要定义类似 name 的属性可以再加个平级的 script 标签在里面实现即可。
组件核心 API 的使用
定义组件的 props
通过defineProps指定当前 props 类型获得上下文的props对象。示例
script setup langts
import { defineProps } from vue;const props defineProps([title]);
/script
!-- 或者 --
script setupimport { defineProps } from vue;const props defineProps({title: String, // 可以设置传来值的类型})
/script
!-- 或者 --
script setupimport { defineProps } from vue;const props defineProps({// 可以设置传来值的类型和默认值title: {type:String,default: }})
/script
!-- 或者 --
script setupimport { defineProps } from vue;const props defineProps({title: [String,Number] // 可以设置传来值的多种类型})
/script
!-- 或者 --
script setup langts import { ref,defineProps } from vue;type Props{ title:string }definePropsProps();
/script定义 emit
使用defineEmit定义当前组件含有的事件并通过返回的上下文去执行 emit。示例
script setupimport { defineEmits } from vue// 定义两个方法 change 和 deleteconst emit defineEmits([change, delete])const handleClick(){emit(change, 5); // 传给父组件的值的方法}const handleClickDel(){emit(delete, 8); // 传给父组件的值的方法}
/script父子组件通信
在Vue3中父子组件传值、方法是通过defineProps, defineEmits实现的。defineProps 和 defineEmits 都是只在
defineProps 用来接收父组件传来的 props ; defineEmits 用来声明触发的事件。
//父组件
templatemy-son foo childClickchildClick /
/templatescript langts setup
import MySon from ./MySon.vue;let childClick (e: any):void {console.log(from son,e); //
};
/script//子组件
templatespan clicksonToFather信息:{{ props.foo }}/span
/templatescript langts setup
import { defineEmits, defineProps} from vue;const emit defineEmits([childClick]); // 声明触发事件 childClick
const props defineProps({ foo: String }); // 获取propsconst sonToFather () {emit(childClick , props.foo)
}
/script子组件通过 defineProps 接收父组件传过来的数据子组件通过 defineEmits 定义事件发送信息给父组件 增强的props类型定义
const props defineProps{foo: stringbar?: number
}()const emit defineEmit(e: update | delete, id: number) void()不过注意采用这种方法将无法使用props默认值。
父组件调用子组件事件
父组件
!-- 父组件 app.vue --
templatediv classpar!-- 使用 ref 指令关联子组件 --child refchildRef/button clickhandleClick提交/button/div
/template
script setup
import { reactive, ref } from vue;
import child from ./child.vue;
//定义子组件实例名称要和上面的ref相同
const childRef ref(null);//访问demo组件的方法或对象
const handleClick () {//获取到子组件的 title 数据 let title childRef.value.state.title;//调用子组件的 play方法childRef.value.submit();
};
/script子组件 子组件通过defineExpose暴露对象和方法
!--子组件名称 child.vue --
templatediv classchild{{ state.title }}/div
/template
script setup
import { ref, reactive } from vue;
//定义一个变量
const state reactive({title: 标题,
});
//定义一个方法
const submit () {state.title 你调用了子组件的方法;
};//暴露state和play方法
defineExpose({state,submit
});
/script定义响应变量、函数、监听、计算属性computed
script setup langts
import { ref,computed,watchEffect } from vue;const count ref(0); //不用 return 直接在 templete 中使用const addCount(){ //定义函数使用同上 count.value;
} //定义计算属性使用同上
const howCountcomputed(()现在count值为count.value);//定义监听使用同上 //...some code else
watchEffect(()console.log(count.value));
/scriptwatchEffect 用于有副作用的操作会自动收集依赖。 和watch区别 无需区分deepimmediate只要依赖的数据发生变化就会调用
reactive
此时name只会在初次创建的时候进行赋值如果中间想要改变name的值那么需要借助composition api 中的reactive。
script setup langts
import { reactive, onUnmounted } from vueconst state reactive({counter: 0
})
// 定时器 每秒都会更新数据
const timer setInterval(() {state.counter
}, 1000);onUnmounted(() {clearInterval(timer);
})
/script
templatediv{{state.counter}}/div
/template使用ref也能达到我们预期的’counter’,并且在模板中,vue进行了处理我们可以直接使用counter而不用写counter.value.
ref和reactive的关系: ref是一个{value:‘xxxx’}的结构value是一个reactive对象
ref 暴露变量到模板
曾经的提案中如果需要暴露变量到模板需要在变量前加入export声明 js复制代码export const count ref(0)
不过在新版的提案中无需export声明编译器会自动寻找模板中使用的变量只需像下面这样简单的声明即可在模板中使用该变量
script setup langts
import { ref } from vueconst counter ref(0);//不用 return 直接在 templete 中使用const timer setInterval(() {counter.value
}, 1000)onUnmounted(() {clearInterval(timer);
})
/script
templatediv{{counter}}/div
/template生命周期方法
因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的所以不需要显式地定义它们。换句话说在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。
可以通过在生命周期钩子前面加上 “on” 来访问组件的生命周期钩子。官网生命周期钩子
script setup langts
import { onMounted } from vue;onMounted(() { console.log(mounted!); });/script获取 slots 和 attrs 注useContext API 被弃用取而代之的是更加细分的 api。 可以通过useContext从上下文中获取 slots 和 attrs。不过提案在正式通过后废除了这个语法被拆分成了useAttrs和useSlots。
useAttrs见名知意这是用来获取 attrs 数据但是这和 vue2 不同里面包含了 class、属性、方法。
templatecomponent v-bindattrs/component
/template
srcipt setup langtsconst attrs useAttrs();
scriptuseSlots: 顾名思义获取插槽数据。
使用示例
// 旧
script setupimport { useContext } from vueconst { slots, attrs } useContext()
/script// 新
script setupimport { useAttrs, useSlots } from vueconst attrs useAttrs()const slots useSlots()
/script其他 Hook Api
useCSSModuleCSS Modules 是一种 CSS 的模块化和组合系统。vue-loader 集成 CSS Modules可以作为模拟 scoped CSS。允许在单个文件组件的setup中访问CSS模块。此 api 本人用的比较少不过多做介绍。useCssVars: 此 api 暂时资料比较少。介绍v-bind in styles时提到过。useTransitionState: 此 api 暂时资料比较少。useSSRContext: 此 api 暂时资料比较少。
defineExpose API
传统的写法我们可以在父组件中通过 ref 实例的方式去访问子组件的内容但在 script setup 中该方法就不能用了setup 相当于是一个闭包除了内部的 template模板谁都不能访问内部的数据和方法。 如果需要对外暴露 setup 中的数据和方法需要使用 defineExpose API。示例
const a 1
const b ref(2)
defineExpose({ a, b, })注意目前发现defineExpose暴露出去的属性以及方法都是 unknown 类型如果有修正类型的方法欢迎评论区补充。 //父组件templateDaughter refdaughter /
/templatescript langts setup
import { ref } from vue;
import Daughter from ./Daughter.vue;const daughter ref(null)
console.log(~daughter,daughter)
/script//子组件templatediv妾身{{ msg }}/div
/templatescript langts setup
import { ref ,defineExpose} from vue;
const msg ref(貂蝉)
defineExpose({msg
})
/script一、父组件调用子组件方法 子组件需要使用defineExpose对外暴露方法父组件才可以调用。 子组件
templatediv子组件/div
/templatescript setup langts// 第一步定义子组件的方法const handleSubmit (str: string) {console.log(子组件的hello方法执行了-- str)}// 第二部暴露方法defineExpose({handleSubmit})
/script父组件
templatebutton clickhandleChild触发子组件方法/button!-- 一定义 ref --Child refchildRef/Child
/templatescript langts setupimport { ref } from vue;import Child from ../../components/child.vue;// 二定义与 ref 同名变量const childRef ref any ()// 三、函数const handleChild () {// 调用子组件的方法或者变量通过valuechildRef.value.hello(hello world);}
/script参考网址cn.vuejs.org/api/sfc-scr…
属性和方法无需返回直接使用
这可能是带来的较大便利之一在以往的写法中定义数据和方法都需要在结尾 return 出去才能在模板中使用。在 script setup 中定义的属性和方法无需返回可以直接使用示例
templatedivpMy name is {{name}}/p/div
/templatescript setup
import { ref } from vue;const name ref(Sam)
/script支持 async await 异步
注意在vue3的源代码中setup执行完毕函数 getCurrentInstance 内部的有个值会释放对 currentInstance 的引用await 语句会导致后续代码进入异步执行的情况。所以上述例子中最后一个 getCurrentInstance() 会返回 null建议使用变量保存第一个 getCurrentInstance() 返回的引用.
script setupconst post await fetch(/api/post/1).then((r) r.json())
/script另外await 的表达式会自动编译成在 await 之后保留当前组件实例上下文的格式。注意async setup() 必须与 Suspense 组合使用Suspense 目前还是处于实验阶段的特性。我们打算在将来的某个发布版本中开发完成并提供文档 - 如果你现在感兴趣可以参照 tests 看它是如何工作的。## 定义组件其他配置
配置项的缺失有时候我们需要更改组件选项在setup中我们目前是无法做到的。我们需要在上方再引入一个 script在上方写入对应的 export即可需要单开一个 script。
script setup 可以和普通的 script 一起使用。普通的 script 在有这些需要的情况下或许会被使用到- 无法在 script setup 声明的选项例如 inheritAttrs 或通过插件启用的自定义的选项。
- 声明命名导出。
- 运行副作用或者创建只需要执行一次的对象。在script setup 外使用export default其内容会被处理后放入原组件声明字段。注意Vue 3 SFC 一般会自动从组件的文件名推断出组件的 name。在大多数情况下不需要明确的 name 声明。唯一需要的情况是当你需要 包含或排除或直接检查组件的选项时你需要这个名字。
