小奏

【script setup 总结】 因为学习的时候，视频版本并没有一些新的语法糖，笔记是没有使用这些语法糖的，但是用法都会以补充的形式加进来。 在 setup() 函数中手动暴露大量的状态和方法非常繁琐。幸运的是，我们可以通过使用构建工具来简化该操作。当使用单文件组件（SFC）时，我们可以使用 <script setup> 来大幅度地简化代码。 <script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的<script>语法，它具有更多优势： 更少的样板内容，更简洁的代码。 能够使用纯 Typescript 声明 props 和自定义事件。 更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象)。 更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。 基本语法 要启用该语法，需要在 <script> 代码块上添加 setup attribute： 123<script ...

【其它组合式API】 ref、unref、toRef、toRefs、isRef、customRef、shallowRef、triggerRef refs api中的重点为：ref、toRefs、shallowRef、customRef，其次是 isRef 等。 toRef 与 toRefs toRef 作用：可以用来为源响应式对象上的某个 property 新创建一个 ref。然后，ref 可以被传递，它会保持对其源 property 的响应式连接。 语法 (源对象 , 源对象属性)````const name = toRef(person,‘name’)``` 应用: 源响应式对象(toRef的第一个参数) 上的某个 property 新创建一个 ref toRef示例 1234567891011121314const state = reactive({ foo: 1, bar: 2})const fooRef = toRef(state, 'foo')// 更改该 ref 会更新源属性fooRef.value++cons ...

【Teleport CSS功能】 内置组件 Teleport 什么是Teleport？——<Teleport> 是一个内置组件，它是一种能够将我们的模板渲染至指定DOM节点，不受父级style、v-show等属性影响，但data、prop数据依旧能够共用的技术；类似于 React 的 Portal。 主要解决的问题 因为Teleport节点挂载在其他指定的DOM节点下，完全不受父级style样式影响 teleport 是内置组件，可以直接在模板中使用，无需注册。 可以被打包工具 tree-shake。所以它们只会在被使用的时候被引入。 需要直接主动访问(获取)它们的场景，也可以将它们显性导入。 基本用法 有时我们可能会遇到这样的场景：一个组件模板的一部分在逻辑上从属于该组件，但从整个应用视图的角度来看，它在 DOM 中应该被渲染在整个 Vue 应用外部的其他地方。 这类场景最常见的例子就是全屏的模态框。理想情况下，我们希望触发模态框的按钮和模态框本身是在同一个组件中，因为它们都与组件的开关状态有关。但这意味着该模态框将与按钮一起渲染在应用 DOM 结构里很深的地方。这会 ...

【异步组件 组合式函数(hooks)】 异步组件 为什么要有异步组件 首先来看这样一段代码 父组件App.vue 12345678910111213141516<template> <div class="app"> <h3>我是App组件</h3> <Child></Child> </div></template><script>export default { name: 'App',};</script><script setup>import Child from './components/Child.vue';</script> 子组件Child.vue 12345678910111213141516<template> <div class="child"> <h3>我是 ...

【Attributes继承 provide与inject】 继承 Attributes Attributes 继承 Attributes 继承的基本概念 “透传 attribute”指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。最常见的例子就是 class、style 和 id。 当一个组件以单个元素为根作渲染时，透传的 attribute 会自动被添加到根元素上。举例来说，假如我们有一个 <MyButton> 的子组件，它的模板长这样： 12<!-- <MyButton> 的模板 --><button>click me</button> 一个父组件使用了这个组件，并且传入了 class： 1<MyButton class="large" /> 最后渲染出的 DOM 结果是： 1<button class="large">click me</button> 这里，<My ...

【Props 组件事件】 Props Props 声明# Props 是一种特别的 attributes，你可以在组件上声明注册。要传递给子组件内容，我们必须在组件的 props 列表上声明它。 12345678<!-- BlogPost.vue --><script setup>defineProps(['title'])</script><template> <h4>{{ title }}</h4></template> defineProps 是一个仅 <script setup> 中可用的编译宏命令，并不需要显式地导入。声明的 props 会自动暴露给模板。defineProps 会返回一个对象，其中包含了可以传递给组件的所有 props： 12const props = defineProps(['title'])console.log(props.title) TypeScript 用户请参考：为组 ...

【动态组件 组件注册】 动态组件 基本使用 composition api写法：只适用于vue3 在 <script setup> 中，组件被引用为变量而不是作为 字符串键 来注册 核心点 shallowRef() 虽然用 ref() 也能正常使用，但官方不推荐，会爆warn: “这可能会导致不必要的性能开销” （原因，组件不是动态数据，不需要转为proxy） :is 与 component > 设置动态组件的必要条件 :is 对应绑定的为字符串值即可，值对应引入的组件名 props 数据父传子 shallowRef > 声明 :is 绑定的值，值为 import 的组件名 1234567891011121314151617181920212223<template> <component :is='dynamic' :datas='{data1,data2}'></component> <button @click='change ...

【生命周期 模板引用】 生命周期 vue2 vue3 Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名： beforeDestroy改名为 beforeUnmount destroyed改名为 unmounted Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下： beforeCreate===>setup() created=======>setup() 在setup比beforeCreate还先执行 beforeMount ===>onBeforeMount mounted=======>onMounted beforeUpdate===>onBeforeUpdate updated =======>onUpdated beforeUnmount ==>onBeforeUnmount unmounted =====>onUnmounted 关于两个销毁生命周期，可以在组件实例上用v-if打成 所有罗列在下面的 API 都应该在组 ...

【计算属性 侦听器】 计算属性 有时我们需要依赖于其他状态(普通proxy响应式数据)的状态(computed响应式数据)： 在 Vue 中，这是用组件计算属性处理的，以直接创建计算值，我们可以使用 computed 函数：它接受 getter 函数并为 getter 返回的值返回一个不可变的响应式 ref 对象。 computed函数 与Vue2.x中computed配置功能一致 可以直接去看3.7.3完整写法 模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。比如说，我们有这样一个包含嵌套数组的对象： 12345678const author = reactive({ name: 'John Doe', books: [ 'Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide', 'Vue 4 - The Mystery' ]}) 我们想根据 author 是否已有一 ...

【响应式原理 ref和reactive总结 setup注意点】 Vue3.0中的响应式原理 vue2.x的响应式 实现原理： 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。 1234Object.defineProperty(data, 'count', { get () {}, set () {}}) 存在问题： 新增属性、删除属性, 界面不会更新。 直接通过下标修改数组, 界面不会自动更新。 1234567891011121314151617const person = { name: 'ds', age: 18,};// vue2 let p = {};Object.defineProperty(p, 'name', { get( ...