Vue.js 3.x前端开发技术与实战 课件 第4章Vue 3新特性应用.pptx

教学目标1.学会使用ref和reactive函数来创建响应式对象。2.学会使用toRefs将响应式对象转换为普通对象。3.学会使用computed、watch和watchEffect定义和监听响应式数据。4.学会使用ref引用DOM元素和组件实例。5.理解Vue3生命周期钩子并学会定义钩子函数1第4章Vue3新特性应用(2学时)

24.1响应式基础4.1.1组件选项setup()setup()钩子是在组件中使用组合式API的入口，通常只在以下情况下使用：需要在非单文件组件中使用组合式API时。需要在基于选项式API的组件中集成基于组合式API的代码时。其他情况下，都应优先使用<scriptsetup>语法。setup()函数是一个新的组件选项，它是组件内部暴露出所有的属性和方法的统一API，也作为在组件内使用CompositionAPI的入口点。从生命周期钩子的视角来看，setup()函数的执行时间会在beforeCreate()、created()之前被调用，可以返回一个对象，这个对象的属性被合并到渲染上下文（context），并可以在模板中直接使用。//在Vue3.0的组件中定义book.vue??export?default?{??????setup(props,?context)?{?????????//?Attributes?(Non-reactive?object)????????console.log(context.attrs)????????//?Slots?(Non-reactive?object)????????console.log(context.slots)???????//?Emit?Events?(Method)????????console.log(context.emit)??????}???}?props是响应式对象，不能使用ES6（ECMAScript6.0）解构，因为它会删除props的响应性。context对象是普通的JavaScript对象，即它不是响应式对象，这意味着可以在其上安全地使用ES6解构context。

4.1.1组件选项setup()在Vue3.x中,可以使用context替代了this。例如使用context.attrs、//Vue3.0中组件定义方法import{ref}from"vue"export?default?{????setup(props,?{?attrs,?slots,?emit?})?{constcount=ref(0)constadd=()=>{count.value++}//使用箭头函数定义return{count,add}//返回所有属性和方法???}????}????注意：props要先声明才能取值，context.attrs不用先声明。在props声明过的属性，context.attrs里不会再出现。在props中不可以声明方法，即props不包含事件，但context.attrs可以包含事件。在Vue3.2.x中，在非组件中使用setup()函数时，可以使用下列两种方法使用响应式API。代码如下：const{ref,reactive}=Vue//1-解构，Vue首字母必须大写constcount=Vue.ref(0)//2-使用全局函数//在Vue3.2中组件定义，不使用exportdefault{}暴露属性和方法，也不使用return<script?setup>??import?{?ref?}?from?"vue";??//导入APIconst?count?=?ref(0);??function?add1()?{??//方法使用function来定义??count.value++;??}??</script>??

4.1.1组件选项setup()//Vue3.2中，在非组件中定义（HTML）<script>constApp={setup(){constcount=Vue.ref(0);//也可以先const{ref}=Vue解构，再使用reffunctionadd1(){count.value++;}return{//需要返回所有属性及方法count,add1}}}</script>案例演示：【例4-1】条件渲染综合应用<d