建设部网站信息系统,设计软件有哪几种,dw做网站 如何设置转动,百度助手下载目录 一、组合式API - setup选项1. setup选项的写法和执行时机2. setup中写代码的特点3. script setup语法糖 二、组合式API - reactive和ref函数1. reactive2. ref3. reactive 对比 ref 三、组合式API - computed四、组合式API - watch1. 侦听单个数据2. 侦听多个数据… 目录 一、组合式API - setup选项1. setup选项的写法和执行时机2. setup中写代码的特点3. script setup语法糖 二、组合式API - reactive和ref函数1. reactive2. ref3. reactive 对比 ref 三、组合式API - computed四、组合式API - watch1. 侦听单个数据2. 侦听多个数据3. immediate4. deep 五、组合式API - 生命周期函数1. 选项式对比组合式2. 生命周期函数基本使用3. 执行多次 六、总结 一、组合式API - setup选项
1. setup选项的写法和执行时机
写法
scriptexport default {setup(){},beforeCreate(){}}
/script执行时机 在beforeCreate钩子之前执行 2. setup中写代码的特点 在setup函数中写的数据和方法需要在末尾以对象的方式return才能给模版使用 scriptexport default {setup(){const message this is messageconst logMessage (){console.log(message)}// 必须return才可以return {message,logMessage}}}
/script3. script标签添加 setup标记不需要再写导出语句默认会添加导出语句 script setupconst message this is messageconst logMessage (){console.log(message)}
/script二、组合式API - reactive和ref函数
1. reactive 接受对象类型数据的参数传入并返回一个响应式的对象 script setup// 导入import { reactive } from vue// 执行函数 传入参数 变量接收const state reactive({msg:this is msg})const setSate (){// 修改数据更新视图state.msg this is new msg}
/scripttemplate{{ state.msg }}button clicksetStatechange msg/button
/template2. ref 接收简单类型或者对象类型的数据传入并返回一个响应式的对象 script setup// 导入import { ref } from vue// 执行函数 传入参数 变量接收const count ref(0)const setCount (){// 修改数据更新视图必须加上.valuecount.value}
/scripttemplatebutton clicksetCount{{count}}/button
/template3. reactive 对比 ref
都是用来生成响应式数据不同点 reactive不能处理简单类型的数据ref参数类型支持更好但是必须通过.value做访问修改ref函数内部的实现依赖于reactive函数 在实际工作中的推荐 推荐使用ref函数减少记忆负担小兔鲜项目都使用ref
三、组合式API - computed 计算属性基本思想和Vue2保持一致组合式API下的计算属性只是修改了API写法 script setup
// 导入
import {ref, computed } from vue
// 原始数据
const count ref(0)
// 计算属性
const doubleCount computed(()count.value * 2)// 原始数据
const list ref([1,2,3,4,5,6,7,8])
// 计算属性list
const filterList computed(itemitem 2)
/script四、组合式API - watch 侦听一个或者多个数据的变化数据变化时执行回调函数俩个额外参数 immediate控制立刻执行deep开启深度侦听 1. 侦听单个数据
script setup// 1. 导入watchimport { ref, watch } from vueconst count ref(0)// 2. 调用watch 侦听变化watch(count, (newValue, oldValue){console.log(count发生了变化老值为${oldValue},新值为${newValue})})
/script2. 侦听多个数据 侦听多个数据第一个参数可以改写成数组的写法 script setup// 1. 导入watchimport { ref, watch } from vueconst count ref(0)const name ref(cp)// 2. 调用watch 侦听变化watch([count, name], ([newCount, newName],[oldCount,oldName]){console.log(count或者name变化了[newCount, newName],[oldCount,oldName])})
/script3. immediate 在侦听器创建时立即出发回调响应式数据变化之后继续执行回调 script setup// 1. 导入watchimport { ref, watch } from vueconst count ref(0)// 2. 调用watch 侦听变化watch(count, (newValue, oldValue){console.log(count发生了变化老值为${oldValue},新值为${newValue})},{immediate: true})
/script4. deep 通过watch监听的ref对象默认是浅层侦听的直接修改嵌套的对象属性不会触发回调执行需要开启deep script setup// 1. 导入watchimport { ref, watch } from vueconst state ref({ count: 0 })// 2. 监听对象statewatch(state, (){console.log(数据变化了)})const changeStateByCount (){// 直接修改不会引发回调执行state.value.count}
/scriptscript setup// 1. 导入watchimport { ref, watch } from vueconst state ref({ count: 0 })// 2. 监听对象state 并开启deepwatch(state, (){console.log(数据变化了)},{deep:true})const changeStateByCount (){// 此时修改可以触发回调state.value.count}
/script
五、组合式API - 生命周期函数
1. 选项式对比组合式 2. 生命周期函数基本使用 导入生命周期函数执行生命周期函数传入回调 scirpt setup
import { onMounted } from vue
onMounted((){// 自定义逻辑
})
/script3. 执行多次 生命周期函数执行多次的时候会按照顺序依次执行 scirpt setup
import { onMounted } from vue
onMounted((){// 自定义逻辑
})onMounted((){// 自定义逻辑
})
/script六、总结
组合式API是Vue3中的新特性它允许我们以更灵活和可组合的方式编写组件逻辑。 setup函数setup函数是组合式API的入口它在组件实例创建之前调用。我们可以在setup函数中执行一些初始化逻辑并返回一个对象这个对象将会成为组件实例的属性。setup函数接收两个参数props和contextprops是组件的属性context提供了一些常用的API例如emit用于派发事件。 reactive和ref函数reactive函数接收一个普通对象并返回一个响应式代理对象。ref函数接收一个普通值并返回一个响应式引用对象。我们可以使用reactive和ref函数来创建响应式数据。响应式数据可以在模板中使用并能够自动追踪其依赖。 computed函数computed函数接收一个getter函数并返回一个计算属性。计算属性是一个响应式对象它会自动追踪其依赖并在依赖发生变化时重新计算。我们可以使用computed函数来处理一些复杂的数据逻辑例如对多个响应式数据进行运算得到一个新的值。 watch函数watch函数用于监听一个响应式数据的变化并在数据变化时执行一些副作用。watch函数接收两个参数要监听的响应式数据和回调函数。我们可以使用watch函数来处理一些异步操作例如发送网络请求或保存数据。 生命周期函数Vue3中的生命周期函数经过了一些改变。setup函数中可以使用onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount和onUnmounted等函数来代替Vue2中的生命周期钩子函数。这些函数分别在组件挂载前、挂载后、更新前、更新后、卸载前和卸载后调用。我们可以在这些函数中执行一些与组件生命周期相关的操作例如请求数据、添加事件监听器等。
综上所述Vue3的组合式API提供了更灵活和可组合的方式来编写组件逻辑使我们能够更好地组织和重用代码。它使用了一些新的函数和概念例如setup函数、reactive和ref函数、computed函数、watch函数以及新的生命周期函数。通过学习和掌握这些API我们可以更高效地开发Vue3应用。
