目录
vue3中 $children 无法再获取 子组件内容了，可以使用属性 ref 标记之后，用 this.$refs.[name]获取
vite构建大致流程：
vite(optimize) => package.json(depenencies)=>rollup打包=>写入.vue_opt_cache （rollup是打包工具）
以前的 webpack 打包会递归生成一个依赖关系图，然后把所有模块打包成 一个或多个 bundle.js；
防抖和节流
1. 使用 Lodash 等库来实现
Vue 没有内置支持防抖和节流，但可以使用 Lodash 等库来实现。
如果某个组件仅使用一次，可以在 methods 中直接应用防抖：
<script src="https://unpkg.com/lodash@4.17.20/lodash.min.js"></script>
<script>
Vue.createApp({
methods: {
// 用 Lodash 的防抖函数
click: _.debounce(function() {
// ... 响应点击 ...
}, 500)
}
}).mount('#app')
</script>
但是，这种方法对于可复用组件有潜在的问题，因为它们都共享相同的防抖函数。为了使组件实例彼此独立，可以在生命周期钩子的 created 里添加该防抖函数:
app.component('save-button', {
created() {
// 使用 Lodash 实现防抖
this.debouncedClick = _.debounce(this.click, 500)
},
unmounted() {
// 移除组件时，取消定时器
this.debouncedClick.cancel()
},
methods: {
click() {
// ... 响应点击 ...
}
},
template: `
<button @click="debouncedClick">
Save
</button>
`
})2. 手写防抖（这个是大佬分享的）：
3. 把防抖写到vue原型方法prototype中
复制文本到剪切板
v-model数据双向绑定
在组件中实现 v-model 的另一种方法是使用 computed property 的功能来定义 getter 和 setter。get 方法应返回 modelValue property，set 方法应该触发相应的事件。
app.component('custom-input', {
props: ['modelValue'],
emits: ['update:modelValue'],
template: `
<input v-model="value">
`,
computed: {
value: {
get() {
return this.modelValue
},
set(value) {
this.$emit('update:modelValue', value)
}
}
}
})vue3 新特性
1. this.$children，
vue3中 $children 无法再获取 子组件内容了，可以使用属性 ref 标记之后，用 this.$refs.[name]获取
2. 插槽,
多了一个v-slot:[name], (v-slot:) 替换为字符 # , v-slot:header 可以被重写为 #header
<header>
<slot name="header"></slot>
</header>
<template v-slot:header>
<div>Here might be a page title</div>
</template>3. 数据劫持
vue2 双向数据绑定，没有对数组[下标] = value 这一更改 不是响应式的
vue中是通过Object.defineProperty 实现对对象属性的监听，Object.defineProperty对数组已有元素也是实现监听的。但是vue2没有支持 对 数组[下标] 的监听。【因为性能问题吧，没有支持】
但是还是可以使用 set方法解决 对数据的监听没有响应式的问题。
vue3 完善了这一点，vue3 直接使用 Proxy代理实现双向数据绑定监听
4.