vue3 基础自查

vite 与webpack  对比

 

main.js    不在兼容  vue2  的挂着方法

setup 是一个新的配置项，值为一个函数 ，数据，方法，都要在其中

你可以直接全用vue2 的写法，配置，它向下兼容

h('h1','xxx')    参数一 标签名  参数二  标签体   

 

响应式：

ref    一般除了基本数据类型    调用加 value

reactive   一般处理引用数据类型    更加方便

 

 vue2 对比响应式原理

直接删除对象属性，vue监测不到  this.$delete(this.p, 'name') 

删除对象同上追加一个参数

注意

const a = ref([])   a.value = [1,2,3]

const b = reactive({ac: [] })  b.ac = [1,2,3]

这2个是基本一样

 

 vue3 响应式原理

 

setup 注意点 

 

计算属性 

 

vue3 中自定义事件 

父组件 自定义方法

 

watch    vue3.0 之后的版本有待验证

1》如果监听的是对象，那么旧的值拿不到，可以摘出去用ref 包裹

2》深度监听默认开启，无法关闭

 如果数据使用ref包裹

 

watchEffect 

 vue2 vue3 声明周期对比

 

hook  自定义

 toRef

 

toRefs   批量转换       ...toRefs(obj)      将对象第一层的属性结构出来

---

性能优化 

数据保护    p=readonly(p)   

 toRaw    将数据变为非响应式的  toRaw(ojb)

markRaw(obj)        

customRef    指定要的ref   本案例为防抖

• 节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效
• 防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时

provide    inject    组件直接通讯，类型vue2 中事件总线  消息订阅与发布

 判断是否为响应式数据

注意：ref修饰的基本数据类型 数据类型为 RefImpl,reactive修饰的引用形数据类型是proxy类型的，2个都是响应式数据，但是实现的方式不同

组合式api  优势在于hook函数  可以将功能拆分

内置Fragment组件   可以不用包裹根组件，少写一层嵌套，用scoped实现样式样式独有，

如果你有公共样式，临时有要加的通用样式就不太好了， 

teleport    传送 区别自定义模态框，自定义的显示都是在当前页面，teleport   直接指定div显示的位置

 异步组件Suspense

 配合异步组件，可以返回一个promise对象的实例

 vue3 api变化

 

自定义一个comfirm