东营市城市和建设管理局网站,怎么用vps的linux做网站,为什么辽宁省城乡建设厅网站打不开,电子商务网站建设调查报告1、什么是组合式API
Vue 3.0 中新增了组合式 API 的功能#xff0c;它是一组附加的、基于函数的 API#xff0c;可以更加灵活地组织组件代码。通过组合式 API 可以使用函数而不是声明选项的方式来编写 Vue 组件。因此#xff0c;使用组合式 API 可以将组件代码编写为多个函…1、什么是组合式API
Vue 3.0 中新增了组合式 API 的功能它是一组附加的、基于函数的 API可以更加灵活地组织组件代码。通过组合式 API 可以使用函数而不是声明选项的方式来编写 Vue 组件。因此使用组合式 API 可以将组件代码编写为多个函数每个函数处理一个特定的功能不再需要按选项组织代码。
组合式 API 可以更好地和 TypeScript 集成同时组合式 API 可以和现有的基于选项的 API 一起使用。需要注意的是组合式 API 是在选项data、methods 和 computed之前进行解析因此组合式 API 无法访问这些选项中定义的属性。 2、setup()函数的基本用法
setup() 函数是一个新的组件选项它是组件内部使用组合式 API 的入口。setup() 函数在组件实例创建之前初始化 Prop 之后调用而且 setup() 函数是在 beforeCreate 钩子函数之前调用。
setup() 函数可以返回一个对象或函数对象的属性会合并到组件模板渲染的上下文中。
【实例】创建一个组件使用 setup() 函数实现一个计数器功能。
templatedivh3{{ blogInfo.name }}/h3h3{{ blogInfo.url }}/h3p计数结果{{ count }}/pbutton clickcounter计数器/button/div
/templatescript
import { ref, reactive, onMounted, onUnmounted } from vue;export default {setup() {// 使用 ref 创建响应式的基本类型const count ref(0);// 使用 reactive 创建响应式的复杂类型const blogInfo reactive({name: 您好欢迎访问 pan_junbiao的博客,url: https://blog.csdn.net/pan_junbiao});// 挂载时的操作onMounted(() {console.log(组件已挂载);});// 卸载时的操作onUnmounted(() {console.log(组件已卸载);});// 增加计数的方法function counter() {count.value;}// 返回需要在模板中使用的数据和方法return {blogInfo,count,counter};}
};
/script
执行结果 上述代码中setup() 函数返回的是一个对象在对象有三个属性其中两个响应式对象和一个函数。在组件的模板仲可以直接使用这些属性。 注意 setup() 函数中不能使用 this。但是当和现有的基于选项的 API 一起使用时在选项中可以通过 this 访问 setup() 函数返回的实现。 3、setup()函数的参数
setup() 函数可以接收两个可选的参数。第一个参数是响应式的 props 对象第二个参数是一个上下文context对象。
3.1 第一个参数响应式的 props 对象
第一个参数是响应式的 props 对象通过该参数可以访问 props 选项中定义的 Prop。
【实例】使用setup()函数中的第一个参数响应式的 props 对象。
1创建 ParentComponent.vue 父组件
templatefieldsetlegend父组件/legendh3使用Prop实现父组件向子组件传递数据/h3!-- 第三步使用组件并向子组件传递数据 --ChildComponent :blogNameblogInfo.blogName :blogUrlblogInfo.blogUrl //fieldset
/templatescript
import { reactive } from vue;//第一步引用组件
import ChildComponent from /components/ChildComponent.vueexport default {//第二步注册组件components: {ChildComponent,},setup() {// 使用 reactive 创建响应式的对象const blogInfo reactive({blogName: 您好欢迎访问 pan_junbiao的博客,blogUrl: https://blog.csdn.net/pan_junbiao});//返回return {blogInfo}}
}
/script
2创建 ChildComponent.vue 子组件
templatefieldsetlegend子组件/legendp博客信息{{ props.blogName }}/pp博客地址{{ props.blogUrl }}/p/fieldset
/templatescript
export default {// 使用 props 属性接收父组件传递过来的数据props: [blogName, blogUrl],//setup()函数的第一个参数是响应式的 props 对象。setup(props) {return {props};}
}
/scriptstyle scoped
fieldset {font-size: 18px;color: blue;
}
/style
3在 App.vue 根组件中引入父组件
template!-- 第三步使用组件 --ParentComponent /
/templatescript
//第一步引用组件
import ParentComponent from /components/ParentComponent.vueexport default {//第二步注册组件components: {ParentComponent,}
}
/script
执行结果 3.2 第二个参数上下文context对象
第二个参数是一个上下文context对象该对象是一个 JavaScript 对象它暴露了 attrs、slots 和 emit 三个属性。其中attrs 和 slots 是有状态的对象它们会随着组件的更新而发生变化但是这两个对象本身并不是响应式的因此不能对它们进行解构。
【实例】使用setup()函数中的第二个参数上下文context对象。
export default {//setup()函数的第一个参数响应式的 props 对象。//setup()函数的第二个参数上下文context对象setup(props, context) {//属性非响应式对象console.log(属性, context.attrs);//插槽非响应式对象console.log(插槽, context.slots);//发生的事件方法console.log(事件, context.emit);}
} 4、使用 script setup 语法糖
script setup 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。在 Vue3.2 中只需要在 script 标签上加上 setup 属性无需 returntemplate 便可直接使用。相比于普通的 script 语法它具有更多优势
更少的样板内容更简洁的代码。能够使用纯 TypeScript 声明 props 和自定义事件。更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数避免了渲染上下文代理对象)。更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。
【实例】使用 script setup 语法糖重构上述的计数器功能。
templatedivh3{{ blogInfo.name }}/h3h3{{ blogInfo.url }}/h3p计数结果{{ count }}/pbutton clickcounter计数器/button/div
/template!-- 使用 script setup 语法糖 --
script setup
import { ref, reactive, onMounted, onUnmounted } from vue;// 使用 ref 创建响应式的基本类型
const count ref(0);// 使用 reactive 创建响应式的复杂类型
const blogInfo reactive({name: 您好欢迎访问 pan_junbiao的博客,url: https://blog.csdn.net/pan_junbiao
});// 挂载时的操作
onMounted(() {console.log(组件已挂载);
});// 卸载时的操作
onUnmounted(() {console.log(组件已卸载);
});// 增加计数的方法
function counter() {count.value;
}/script
执行结果
