script setup 总结
【script setup 总结】
因为学习的时候,视频版本并没有一些新的语法糖,笔记是没有使用这些语法糖的,但是用法都会以补充的形式加进来。
在 setup() 函数中手动暴露大量的状态和方法非常繁琐。幸运的是,我们可以通过使用构建工具来简化该操作。当使用单文件组件(SFC)时,我们可以使用 <script setup> 来大幅度地简化代码。
<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的<script>语法,它具有更多优势:
更少的样板内容,更简洁的代码。
能够使用纯 Typescript 声明 props 和自定义事件。
更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数,避免了渲染上下文代理对象)。
更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。
基本语法
要启用该语法,需要在 <script> 代码块上添加 setup attribute:
123<script ...
其它组合式API
【其它组合式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 CSS功能】
内置组件 Teleport
什么是Teleport?——<Teleport> 是一个内置组件,它是一种能够将我们的模板渲染至指定DOM节点,不受父级style、v-show等属性影响,但data、prop数据依旧能够共用的技术;类似于 React 的 Portal。
主要解决的问题 因为Teleport节点挂载在其他指定的DOM节点下,完全不受父级style样式影响
teleport 是内置组件,可以直接在模板中使用,无需注册。
可以被打包工具 tree-shake。所以它们只会在被使用的时候被引入。
需要直接主动访问(获取)它们的场景,也可以将它们显性导入。
基本用法
有时我们可能会遇到这样的场景:一个组件模板的一部分在逻辑上从属于该组件,但从整个应用视图的角度来看,它在 DOM 中应该被渲染在整个 Vue 应用外部的其他地方。
这类场景最常见的例子就是全屏的模态框。理想情况下,我们希望触发模态框的按钮和模态框本身是在同一个组件中,因为它们都与组件的开关状态有关。但这意味着该模态框将与按钮一起渲染在应用 DOM 结构里很深的地方。这会 ...
异步组件 组合式函数(hooks)
【异步组件 组合式函数(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继承 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 声明#
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注意点
【响应式原理 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( ...