Vue.js前端开发实战（第2版） 课件 第3章 组件基础（上）.pptx

第3章组件基础（上）;学习目标/Target;学习目标/Target;章节概述/Summary;目录/Contents;目录/Contents;选项式API和组合式API;熟悉选项式API和组合式API，能够说出选项式API和组合式API的区别;Vue3支持选项式API和组合式API。其中，选项式API是从Vue2开始使用的一种写法，而Vue3新增了组合式API的写法。;script

exportdefault{

data(){

return{//定义数据}

},

methods:{//定义方法},

computed:{//定义计算属性},

watch:{//定义侦听器}

}

/script

;script

import{computed,watch}fromvue

exportdefault{

setup(){

const数据名=数据值

const方法名=()={}

const计算属性名=computed(()={})

watch(侦听器的来源,回调函数,可选参数)

return{数据名,方法名,计算属性名}

}

}

/script;scriptsetup

import{computed,watch}fromvue

//定义数据

const数据名=数据值

//定义方法

const方法名=()={}

//定义计算属性

const计算属性名=computed(()={})

//定义侦听器

watch(侦听器的来源,回调函数,可选参数)

/script

;;企业在开发大型项目时，随着业务复杂度的增加，代码量会不断增加。

如果使用选项式API，整个项目逻辑不易阅读和理解，而且查找对应功能的代码会存在一定难度。

如果使用组合式API，可以将项目的每个功能的数据、方法放到一起，这样不管项目的大小，都可以快速定位到功能区域的相关代码，便于阅读和维护。同时，组合式API可以通过函数来实现高效的逻辑复用，这种形式更加自由，需要开发者有较强的代码组织能力和拆分逻辑能力。;;;;;;保存上述代码后，在浏览器中访问:5173/，通过选项式API实现的初始页面效果如下图所示。;单击“+1”按钮后的页面效果如下图所示。;;步骤6;保存上述代码后，在浏览器中访问:5173/，初始页面效果与通过选项式API实现的初始页面效果相同。;生命周期函数;掌握生命周期函数的使用方法，能够灵活运用生命周期函数在特定时间执行特定的操作;什么是生命周期函数？;;函数;scriptsetup

import{onMounted}fromvue

onMounted(()={

//执行操作

})

/script

;;步骤1;保存上述代码后，在浏览器中访问:5173/并打开控制台，使用生命周期函数的页面效果和控制台如下图所示。;;script

exportdefault{

data(){return{value:HelloVue.js}},

beforeCreate(){

console.log(实例对象创建前:+this.value)

},

created(){

console.log(实例对象创建后:+this.value)

}

}

/script

;组件的注册和引用;掌握注册组件的方法，能够运用全局注册或者局部注册的方式完成组件的注册;3.3.1注册组件;3.3.1注册组件;component(组件名称,需要被注册的组件);import{createApp}fromvue;

import./style.css

importAppfrom./App.vue

importMyComponentfrom./components/MyComponent.vue

constapp=createApp(App)

ponent(MyComponent,MyComponent)

app.mount(#app)

;ponent(ComponentA,ComponentA)

.component(ComponentB,ComponentB)

.component(ComponentC,ComponentC)

;在实际开发中，如果某些组件只在特定的情况下被用到，推荐进行局部注册。局部注册即在某个组件中注册，被局部注册的组件只能在当前注册范围内使用。

局部注册组件的示例代码如下。;在使用setup语法糖时，导入的组