组合是API
-
ref
-
computed
- 参数：getter 函数
- 返回 只读 ref对象
// 正常写法：
const b = ref('1')
const a = computed(()=> b.value) // 这样调用的其实是b的getter函数
// 可写set函数实现可修改
const a = computed({
get:()=>b.value,
set:(val)=>b.value+val
})
//
-
reactive
- 当参数内的变量是一个ref时，reactive会对ref进行自动解包，调用时不再需要用.value
- 当reactive是个数组或map或set类型是，不能进行解包
const count = ref({cuont : 0})
const state = reactive(state)
console.log(state.cuont) // 0
console.log(state === count) // true
-
readonly 获取到响应式对象的只读代理
-
watchEffect
- 参数二用于设置option
- 返回值：停止副作用的函数
- 回调函数的参数是 副作用清除函数 ，用于清除副作用
差异 watch watchEffect 追踪响应式依赖的方式 不会追踪回调中访问的东西， 在回调中追踪依赖项 watchEffect(async (onCleanup)=>{ })
工具函数
- isRef()
- unref()
- isRactive()
- isProxy()
- toRef() 当需要把非响应式对象转成响应式对象时就很有用
- toRefs()
- isReadonly()
- toValue()
function useFeatureX() {
const state = reactive({
foo: 1,
bar: 2
})
// ...基于状态的操作逻辑
// 在返回时都转为 ref
return toRefs(state)
}
// 可以解构而不会失去响应性
const { foo, bar } = useFeatureX()
内置指令
- v-text 更新文本内容
<span v-text="张三"> </span>
- v-html 更新元素的innerHTML
进阶API - TypeScript工具类型
- ExtractPropTypes ts工具类用于解构 出prop的类型，但仅面向组件内部 ,如果是boolean类型或有默认值的属性会默认为必需
const props = {
foo : String,
bar: Boolean
baz :{
type:Number
},
}
type TProps = ExtractPropTypes<typeof props>
// {foo?:string,bar:boolean,baz:number}
- ExtractPublicPropTypes 导出组件的类型给父组件用
- PropType 用于定义prop做类型声明
深度指南
模板语法
- 动态绑定多个值
const attr = {
id:'container',
class:'age'
}
<div v-bind="attr"></div>
- 在模板中绑定表达式或函数，模板每次更新都表达式或函数都会自动调用
- 动态绑定 【】中的值必须是个string类型
<button :[hre]="url"></button>
响应式基础
- 模板插值{{}}：
1、只会解构响应式的第一层
2、如果ref的值是最终输出值，也就是说ref在模板上没有任何计算，那么它是可以渲染的
<template>
{{ state.id }} // 能够输出
<input type="text" :value="state.id.value"> // 能够输出
<input type="text" :value="state.id"> // 不能输出
</template>
<script setup lang="ts">
const count = ref(0)
const state = {id: count}
setInterval(()=>{
state.id.value++
},1000)
</script>
- reactive对象对ref的解包
1、直接设置属性是其他ref，reactive会对他解包，当做一个普通属性设置，它两是联系起来的
2、当reactive的属性重新赋值成为另一个ref时，与原来ref的关联就会断开
3、reactive对数组和集合类型的元素不会解包
列表渲染
- v-for
v-for 是支持遍历对象的！
v-if 比v-for 的优先级更高，意味着v-if是获取不到for里面迭代的内容的
- v-model
可添加 .lazy 把更新时机改成change事件以后
知识点
为什么dom上依赖的多个值被更新了，但是dom最终只更新了一次
vue会在next tick更新周期中缓冲所有状态的修改，确保无论进行多少次修改，组件都只会被更新一次
在模板列表中也可以使用解构
<!-- 有 index 索引时 -->
<li v-for="({ message }, index) in items">
{{ message }} {{ index }}
</li>
