1、响应性丟失
考察的点：1、 reactive 数据结构后丢失响应式 2、toRefs 函数使用
<template>
{{ count }}
</template>
<script setup>
const state = reactive({
count:0
})
const { count } = toRefs(state)
</script>
2、可写的计算属性
考察：computed 还可以设置get和set函数
computed({
get:()=> count.value,
set:(val)=> count.value++,
})
3、reative 解构出的属性如果是Object类型 vue 会自动转成Reactive类型
const state = reactive({
a: {
count:1
},
b:1
})
watch(state,(a)=>{
console.log('state',a)
})
let { a , b} = state
setTimeout(()=>{
a.count = 9
console.log('1',isProxy(a))
console.log('2',isReactive(a))
},1000)
4、watch 全家桶，
考察 ： watch 副作用清理能力
const state = ref(0)
watch(state,(val,old, onCleanup)=>{
onCleanup(()=> conselo.log('只能打印一次哦'))
})
state.value = 1
state.value++
知识点 ： watch 监听ref ，只能监听到第一层，也就是 .value ,如果需要监听的ref 是个对象，需要写deep才能正确监听到
5、shallowRef
浅层 ref 的内部值将会原样存储和暴露，并且不会被深层递归地转为响应式。只有对
.value的访问是响应式的。
如果需要shallowRef 能够深层响应，通过triggerRef函数
triggerRef函数用来触发 shallowRef 相关的副作用函数，shallowRef 的性质不会改变
6、v-model 的监听
vModelText 监听input v-model绑定的元素，但是实验下来只有input组件绑定的v-model能够监听得到
7、Prop验证
1、prop 高级用法：validator
2、PropType<T> ： vue3提供的一个定义prop的类型函数 用于在用运行时 props 声明时给一个 prop 标注更复杂的类型定义。3、利用withDefaults api绑定默认值
defineProps({
type: {
type: String,
validator : (val : string)=> ['primary', 'ghost', 'dashed', 'link' , 'text' , 'default'].includes(val)
},
})
// 以上代码实现限制 type只能接受数组内的值
// PropType<T> 使用
interfase IBooke{
name : string,
age: number
}
defineProps({
booke:{
type : Object as PropType<IBooke>,
}
})
学习到的新知识点：Object.freeze() 创造一个冻结对象，对象内属性不可编辑
8、 v-once
优化性能， 组件只会执行一次并且以后内容更新了也不会更新
9、自定义指令
10、h 函数实现 函数式组件
h 函数 接收 三个参数 分别是
组件名 ： string
props ： Object
组件内容：any
h('li',{
style : 'color:red',
onclick : ()=> click()
},'li组件')
function click(){
// 点击li
}
// 完整示例
// MyButton.ts
import { defineComponent,h } from "vue"
export default defineComponent({
name: 'MyButton',
props:['disabled'],
emits:['custom-click'],
render($emit,$slots,$props) {
return h('button',{
disabled: this.disabled,
onclick:()=>{
this.$emit('custom-click')
},
},$slots.default?.())
}
})
// app.vue
<script setup lang="ts">
import MyButton from "./MyButton"
const onClick = () => {
console.log("onClick")
}
</script>
<template>
<MyButton :disabled="false" @custom-click="onClick">
my button
</MyButton>
</template>
11、vue3 自定义函数组件
<template>
<list-component
:list="[]"
value="张三"
@toggle="toggle"
>
<template #slots1>
<!--插槽1-->
</template>
</list-component>
</template>
<list-component
:list="[]"
value="张三"
@toggle="toggle"
>
<template #slots1>
// 插槽1
</template>
</list-component>
<script setup>
function toggle(){}
const listComponent = (props , { slots, emit, attrs })=>{
console.log('props',props)
console.log('slots',slots)
console.log('emit',emit)
console.log('attrs',attrs)
}
</script>
11、 markRaw 和 toRaw
// toRaw : 返回代理的原始对象， 将Proxy 代理的原始对象返回回来
const state = ref({conut:0})
console.log(isProxy(state)) // true
const state1 = toRaw(ref({conut:0}))
console.log(isProxy(state)) // false
// markRaw ： 标记对象不可转换成代理对象，也是返回对象本身
const state = { conut: 0 };
const reactive(state) // 这种情况。reactive会将state转换成为reactive对象，需要
12、 实现自定义函数 defineCustomElement
defineCustomElement 与defineElement写法是一样的参数也是一样的
分两步：
1、通过defineCustomElement 创建好元素
2、customElements.define 注册函数
<script setup lang='ts'>
import { h, onMounted, defineCustomElement } from "vue"
/**
* Implement the code to create a custom element.
* Make the output of page show "Hello Vue.js".
*/
const VueJs = defineCustomElement({
props: ['message'],
render(){
return h('div',null, this.message)
}
})
customElements.define('vue-js', VueJs)
onMounted(() => {
document.getElementById("app")!.innerHTML = "<vue-js message=\"Hello Vue.js\"></vue-js>"
})
</script>
<template>
<div id="app"></div>
</template>
或是
<script setup lang='ts'>
import { h, onMounted, defineCustomElement } from "vue"
/**
* Implement the code to create a custom element.
* Make the output of page show "Hello Vue.js".
*/
const VueJs = defineCustomElement(() => {
return (el) => {
return h('div', null, el.$attrs?.message)
}
},)
customElements.define('vue-js', VueJs)
onMounted(() => {
document.getElementById("app")!.innerHTML = "<vue-js message=\"Hello Vue.js\"></vue-js>"
})
</script>
<template>
<div id="app"></div>
</template>
问题集合：
shallowRef 有什么用？
watch 中的副作用清理函数有什么用？
