Vue3入门

Vue3的优势

更容易维护
更快的速度
更小的体积
更优的数据响应式

组合式API

Vue 3 引入了组合 API，它允许开发者以更灵活和可复用的方式组织代码。使用 setup() 函数可以让开发者在同一地方定义响应式数据、计算属性和生命周期钩子。
组合 API 使得逻辑复用和组织变得更加清晰，尤其在复杂组件中。

setup

1.执行实际比beforecreate还要早，

2.setup函数中，获取不到this，是undefined

3.数据和函数，需要在setup最后return，才能在模板中应用

<script>export default {setup(){const message = 'this is message'const logMessage = ()=>{console.log(message)}// 必须return才可以return {message,logMessage}}}
</script>

4.可以通过steup语法糖简化代码

script标签添加 setup标记，不需要再写导出语句，默认会添加导出语句

<script setup>const message = 'this is message'const logMessage = ()=>{console.log(message)}
</script>

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'}
</script><template>{{ state.msg }}<button @click="setState">change msg</button>
</template>

2. ref

接收简单类型或者对象类型的数据传入并返回一个响应式的对象

<script setup>// 导入import { ref } from 'vue'// 执行函数 传入参数 变量接收const count = ref(0)const setCount = ()=>{// 修改数据更新视图必须加上.valuecount.value++}
</script><template><button @click="setCount">{{count}}</button>
</template>

详细信息

ref 对象是可更改的，也就是说你可以为 .value 赋予新的值。它也是响应式的，即所有对 .value 的操作都将被追踪，并且写操作会触发与之相关的副作用。

如果将一个对象赋值给 ref，那么这个对象将通过 reactive() 转为具有深层次响应式的对象。这也意味着如果对象中包含了嵌套的 ref，它们将被深层地解包。

对比：

都是用来生成响应式数据
不同点
1. reactive不能处理简单类型的数据
2. ref参数类型支持更好，但是必须通过.value做访问修改
3. ref函数内部的实现依赖于reactive函数

computed

接受一个 getter 函数，返回一个只读的响应式 ref对象。该 ref 通过 .value 暴露 getter 函数的返回值。它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。

创建一个只读的计算属性 ref：

const count = ref(1)
const plusOne = computed(() => count.value + 1)console.log(plusOne.value) // 2plusOne.value++ // 错误

创建一个可写的计算属性 ref：

const count = ref(1)
const plusOne = computed({get: () => count.value + 1,set: (val) => {count.value = val - 1}
})plusOne.value = 1
console.log(count.value) // 0

watch()

侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。

默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数。

第一个参数是侦听器的源。这个来源可以是以下几种：

一个函数，返回一个值
一个 ref
一个响应式对象
…或是由以上类型的值组成的数组

第二个参数是在发生变化时要调用的回调函数。这个回调函数接受三个参数：新值、旧值，以及一个用于注册副作用清理的回调函数。该回调函数会在副作用下一次重新执行前调用，可以用来清除无效的副作用，例如等待中的异步请求。

当侦听多个来源时，回调函数接受两个数组，分别对应来源数组中的新值和旧值。

第三个可选的参数是一个对象，支持以下这些选项：

immediate：在侦听器创建时立即触发回调。第一次调用时旧值是 undefined。
deep：如果源是对象，强制深度遍历，以便在深层级变更时触发回调。在 3.5+ 中，此参数还可以是指示最大遍历深度的数字。
flush：调整回调函数的刷新时机。
onTrack / onTrigger：调试侦听器的依赖。
once：(3.4+) 回调函数只会运行一次。侦听器将在回调函数首次运行后自动停止。

示例

侦听一个 getter 函数：

const state = reactive({ count: 0 })
watch(() => state.count,(count, prevCount) => {/* ... */}
)

侦听一个 ref：

const count = ref(0)
watch(count, (count, prevCount) => {/* ... */
})

当侦听多个来源时，回调函数接受两个数组，分别对应来源数组中的新值和旧值：

watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {/* ... */
})

当使用 getter 函数作为源时，回调只在此函数的返回值变化时才会触发。如果你想让回调在深层级变更时也能触发，你需要使用 { deep: true } 强制侦听器进入深层级模式。在深层级模式时，如果回调函数由于深层级的变更而被触发，那么新值和旧值将是同一个对象。

const state = reactive({ count: 0 })
watch(() => state,(newValue, oldValue) => {// newValue === oldValue},{ deep: true }
)

当直接侦听一个响应式对象时，侦听器会自动启用深层模式：

const state = reactive({ count: 0 })
watch(state, () => {/* 深层级变更状态所触发的回调 */
})

生命周期函数

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

基本使用

导入生命周期函数
执行生命周期函数，传入回调

<scirpt setup>
import { onMounted } from 'vue'
onMounted(()=>{// 自定义逻辑
})
</script>

执行多次

生命周期函数执行多次的时候，会按照顺序依次执行

<scirpt setup>
import { onMounted } from 'vue'
onMounted(()=>{// 自定义逻辑
})onMounted(()=>{// 自定义逻辑
})
</script>

组件通信

1. 父传子

基本思想

父组件中给子组件绑定属性
子组件内部通过props选项接收数据

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2. 子传父

基本思想

父组件中给子组件标签通过@绑定事件
子组件内部通过 emit 方法触发事件

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

模板引用-defineExpose

概念：通过 ref标识获取真实的 dom对象或者组件实例对象

1. 基本使用

实现步骤：

调用ref函数生成一个ref对象
通过ref标识绑定ref对象到标签

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2. defineExpose

默认情况下在<script setup>语法糖下组件内部的属性和方法是不开放给父组件访问的，可以通过defineExpose编译宏指定哪些属性和方法容许访问
说明：指定testMessage属性可以被访问到

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

依赖注入-provide和inject

provide()

提供一个值，可以被后代组件注入。

详细信息

provide() 接受两个参数：第一个参数是要注入的 key，可以是一个字符串或者一个 symbol，第二个参数是要注入的值。

与注册生命周期钩子的 API 类似，provide() 必须在组件的 setup() 阶段同步调用。

inject()

注入一个由祖先组件或整个应用 (通过 app.provide()) 提供的值。

详细信息

第一个参数是注入的 key。Vue 会遍历父组件链，通过匹配 key 来确定所提供的值。如果父组件链上多个组件对同一个 key 提供了值，那么离得更近的组件将会“覆盖”链上更远的组件所提供的值。如果没有能通过 key 匹配到值，inject() 将返回 undefined，除非提供了一个默认值。

第二个参数是可选的，即在没有匹配到 key 时使用的默认值。

第二个参数也可以是一个工厂函数，用来返回某些创建起来比较复杂的值。在这种情况下，你必须将 true 作为第三个参数传入，表明这个函数将作为工厂函数使用，而非值本身。

与注册生命周期钩子的 API 类似，inject() 必须在组件的 setup() 阶段同步调用。

示例：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传