随笔content1
封装的form组件的配置项
js中的scrollintoview()方法 滑动到页面底部
1、js中的reduce () 方法
2、vue插件的使用
3、vue3中如何让一般数据具有响应性（ toRef() ）
4、组合函数 （hook的使用，mixins）
5、性能优化，如果你的主应用必须是 SPA，但还有其他的营销相关页面 (落地页、关于页、博客等)，请单独部署这些页面，首屏优化
6、 TypeScript 正确地推导出组件选项内的类型，使用 defineComponent()
7、泛型组件支持两种使用方式：
- 在单文件组件中：在 ’ <'script setup> 上使用 generic 属性
- 渲染函数 / JSX 组件：defineComponent() 的函数签名
8、 泛型参数的理解
defineProps() 的泛型类型参数仅限于类型文字或对本地接口的引用，由于类型到运行时转换仍然基于 AST，一些需要实际类型分析的复杂类型，例如条件类型，还未支持
9、Props 解构默认值，设置默认值withDefaults ，
10、 组合函数， VueUse
11、常见的响应式副作用（ watchEffect()）的用例是什么呢？自然是更新 DOM！我们可以像下面这样实现一个简单的“响应式渲染”：
12、reactive() 的局限性：当你将一个响应式对象的属性赋值或解构到一个本地变量时，访问或赋值该变量是非响应式的，因为它将不再触发源对象上的 get / set
代理。注意这种“断开”只影响变量绑定——如果变量指向一个对象之类的非原始值，那么对该对象的修改仍然是响应式的。从 reactive() 返回的代理尽管行为上表现得像原始对象，但我们通过使用 === 运算符还是能够比较出它们的不同。
//watchEffect
import { ref, watchEffect } from 'vue'
const count = ref(0)
watchEffect(() => {
document.body.innerHTML = `计数：${count.value}`
})
// 更新 DOM
count.value++
//withDefaults
export interface Props {
msg?: string
labels?: string[]
}
const props = withDefaults(defineProps<Props>(), {
msg: 'hello',
labels: () => ['one', 'two']
})
10、组件的类型推导
生产部署的操作
Ts的使用
vue3 相比 vue 2的优化
1、Vue3 新增了 Teleport 组件，允许将组件渲染到 DOM 树中的任何指定位置。
2、新增组合函数，类似于react中的 hook 函数
vue3 为事件处理函数标注类型
function handleChange(event: Event) {
console.log((event.target as HTMLInputElement).value)
}
模板引用需要通过一个显式指定的泛型参数和一个初始值 null 来创建：
<script setup lang="ts">
import { ref, onMounted } from 'vue'
const el = ref<HTMLInputElement | null>(null)
onMounted(() => {
el.value?.focus()
})
</script>
<template>
<input ref="el" />
</template>
为组件模板引用标注类型
为了获取 MyModal 的类型，我们首先需要通过 typeof 得到其类型，再使用 TypeScript 内置的 InstanceType 工具类型来获取其实例类型：
<!-- App.vue -->
<script setup lang="ts">
import MyModal from './MyModal.vue'
const modal = ref<InstanceType<typeof MyModal> | null>(null)
const openModal = () => {
modal.value?.open()
}
</script>
如果组件的具体类型无法获得，或者你并不关心组件的具体类型，那么可以使用 ComponentPublicInstance。这只会包含所有组件都共享的属性，比如 $el。
import { ref } from 'vue'
import type { ComponentPublicInstance } from 'vue'
const child = ref<ComponentPublicInstance | null>(null)
vue3
effectScope 可以有两个作用：
收集副作用
全局状态管理
.vue文件和 .ts 文件 之间的传值，以及一般是在 .vue文件 中取修改 .ts 文件中的一些样式
原文地址：https://blog.csdn.net/weixin_43799793/article/details/136022888
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！