- Vite工具和Vue都可以创建Vu3项目，Vite运行编译更快，几乎瞬间可以完成。
- Vue3.0的.vue文件可以不用根标签包裹。
ref数据响应式和Ref对象
- ref响应需要用到.value赋值，不可直接赋值
{{ msg }}
isRef用于判断是否为Ref对象
{{ msg }}
shallowRef包装对象,节省性能，对应对象的属性
{{ msg }}
triggerRef强制更新dom
自定义customRef
{{ msg }}
shallowRef和triggerRef结合使用
{{ msg }}
想要让视图同步更新，需要用到triggerRef强制更新数据
{{ msg }}
reactive响应式对象
- 传基础数据类型会报错，字符串等，基础数据类型使用ref
- 可传复杂数据类型，数组和对象等，复杂数据类型使用reactive
- reactive响应对象时不需要用.value赋值，可直接赋值
{{msg}}
{{obj}}
- 异步赋值数组（请求接口的时候）
{{msg}}
另外一种数组赋值方式
{{msg}}
readonly会将proxy对象进行拷贝一份，设置只读模式，不可以操作数据
shallowReactive只对浅层数据发生响应，对于深层数据只会改变值，但不会更新视图
- 浅层，数据可响应，视图同步更新
- 深层，数据可响应，但视图不更新
{{msg}}
toRef是引用，修改响应式数据会影响以前的数据,数据发生变化，界面就会自动更新.
ref、toRef、toRefs 都可以将某个对象中的属性变成响应式数据
ref的本质是拷贝，修改响应式数据，不会影响到原始数据，视图会更新
toRef、toRefs的本质是引用，修改响应式数据，会影响到原始数据，视图不会更新
toRef 一次仅能设置一个数据，接收两个参数，第一个参数是哪个对象，第二个参数是对象的哪个属性
toRefs接收一个对象作为参数，它会遍历对象身上的所有属性，然后挨个调用toRef执行
{{state}}
toRefs接收一个对象，toRef 一次仅能设置一个数据
>>>{{foo}}
>>>{{bar}}
toRaw将响应式代理对象变为普通对象
计算属性 computed的使用
{{ firstName }} - {{ lastName }}
另外一种书写方式
{{ name }}
另外一种处理方式
{{ name }}
购物车案例
名称
数量
单价
操作
{{ item.name }}
{{ item.num }}
{{ item.price }}
总价: {{$total}}￥
用computed计算属性
名称
数量
单价
操作
{{ item.name }}
{{ item.num }}
{{ item.price }}
总价: {{$total}}￥
watch侦听器，可侦听数据变化，以及侦听多个数据源
如果需要监听深层对象，则需要开启第三个参数 deep:true
bug:监听到的新值和旧值一样
页面刷新，侦听默认不会执行，只有当变化的时候才会去侦听
但我们可以让页面刷新的时候立马去监听，配置immediate:true属性，立即触发侦听器
- 对于reacative对象使用侦听器，深层对象可以不用配置 deep:true, immediate:true
监听reactive对象的多个属性
单一监听reactive对象的某个属性，采用函数返回的形式
认识watchEffect高级监听器
watch是只有数据发生改变的时候才去监听，而且需要立即触发监听的话，需要额外配置immediate，watchEffect则不需要配置immediate则可实现立即监听的效果。
对于watch监听多个属性时，则需要作为参数传进去，watchEffect是高效的，不需要传参。
- watchEffect可接收一个callback作为回调，它可以在侦听之前操作一些东西（比如在侦听之前做一些防抖和节流的操作）
- 停止监听，watchEffect可实现停止监听，当停止监听后，数据发生改变，将不会对其进行监听
组件使用
对比vue2组件的使用,在vue3中,组件的使用省略了在options中配置components该选项
组件的生命周期
- setup最新被执行
- onBeforeMount 在该生命周期内，不能获取dom相关操作
- onMounted 在该生命周期内，组件已经创建完成，可进行获取dom操作
- onBeforeUpdate 和 onUpdated 数据更新前后使用
- onBeforeUnmount 和 onUnmounted 是组件卸载前后调用
Com.vue子组件
Hello!
{{count}}
app.vue根组件
scoped组件间的样式隔离
-
实现Layout布局的拼装
-
目录层次规范
App.vue
/views/Layout/index.vue
/views/Layout/Content/index.vue
{{item}}
/views/Layout/Menu/index.vue
/views/Layout/Header/index.vue
头部区域
页面展示
父子组件传参
子接用defineProps ，子发用defineEmits
子组件直接使用defineProps()接收，不需引入，前提是搭配setup和TS语法糖使用
父组件传字符串，非复杂数据类型不需要v-bind指令进行绑定
子组件接收
父组件传数组（复杂数据类型）
子组件接收
效果：
子组件给父组件传值：defineEmits
子组件派发
父组件
子组件派发的时候可以携带多个值给父组件
父组件接收
子组件定义多个派发事件
父子组件获取实例，子组件需要defineExpose暴露给父组件
在vue3中父组件通过ref获取子组件的实例是无法获取的
子组件必须同通过defineExpose暴露给父组件
父子组件通讯，子组件设置默认值 withDefaults
父组件
子组件设置默认值