defineProps() 和 defineEmits()内置函数，无需import导入，直接使用。传入到 defineProps 和 defineEmits 的选项会从 setup 中提升到模块的范围。因此，传入的选项不能引用在 setup 范围中声明的局部变量(比如设置默认值时)，但是，它可以引用导入（import）的变量，因为它们也在模块范围内。就是说props设置默认值的时候不能直接用setup里的变量，可以用import引入的数据 defineExpose()内置函数，无需import导入，直接使用。Vue3中的setup默认是封闭的，如果想要使用ref或者 $parent 获取到的组件的的变量或函数，被访问的组件须使用defineExpose将属性和方法暴露出去。使用方式参考获取DOM 获取DOM官网ApiVue3中，移除了 $children 属性 ref$parent$root 注意： 如果ref在v-for里,将会是一个数组，这里和vue2一样。使用childRef.value[0].msg //子组件child.vue useAttrs()包含了父组件传递过来的所有属性(子组件内没有被defineProps和defineEmits声明的)，包括 和 style 以及事件（相当于vue2中相当于listeners）。在vue2中，listeners）。在vue2中，listeners）。在vue2中，attrs 是接到不到 和 style 的， //parent.vue //child.vue 全局注册//vue2中Vue.prototype.$axios = xxx//使用this.$axios ## 扩展全局属性 //main.tsimport { createApp } from 'vue'import App from './App.vue'const app = createApp(App)app.config.globalProperties.name = '猪八戒'app.mount('#app') 异步组件## 异步组件，路由懒加载 设置组件名称zhuanlan.zhihu.com/p/481640259 在 3.2.34 或以上的版本中，使用 3.defineOptions这个宏可以用来直接在 4.利用插件 vite-plugin-vue-setup-extend-plusvite-plugin-vue-setup-extend（断点调试存在问题，未修复sourcemap is brokenunplugin-vue-define-options error in production：defineOptions is not defined//会报错[vueSetupExtend不是一个函数]，删掉package.json 中的 type： module即可//vite.config.tsimport { defineConfig, Plugin } from 'vite'import vue from '@vitejs/plugin-vue'import vueSetupExtend from 'vite-plugin-vue-setup-extend-plus'export default defineConfig({ plugins: [vue(), vueSetupExtend()],}) //SFC hello world {{ a }} watch的使用官网当我们需要在数据变化时执行一些“副作用”：如更改 DOM、执行异步操作(发起网络请求等)，我们可以使用 watch 函数： 监听基本数据类型const name = ref('猪八戒')// 监听 ref 属性 watch(name, (newValue, oldValue) => { })监听对象const obj = reactive({ a: 1, b: 2, c: { d: 1, e: 2 }, f: []})//法一：深层次，当直接侦听一个响应式对象时，侦听器会自动启用深层模式：//可以监听到obj.f = [1]和obj.c.d ++watch(obj, (newValue, oldValue) => {})//法二：深层次，必须写deep: true，不然浅层的也监听不到watch(() => obj, (newValue, oldValue) => {}, { deep: true })//法三：浅层, 监听不到obj.f = [1]和obj.c.d ++watch(() => { ...obj }, (newValue, oldValue) => {})监听对象的某个属性watch(() => obj.a, (newValue, oldValue) => {})//如果是对象的属性是引用数据类型，必须加deep: true才能监听到watch(() => obj.f, (newValue, oldValue) => {}, { deep: true })监听多个数据//法一：watch([() => obj.a, name], ([newA, newName], [oldA, oldName]) => {});//法二:watch(() => [obj.a, obj.b], (newValue, oldValue) => {})watchEffect官网 watch 默认是懒执行的：仅当数据源变化时，才会执行回调。可以传入immediate: true 选项来强制侦听器的回调立即执行watchEffect的回调会立即执行（依赖收集），不需要指定 immediate: true。在执行期间，它会在同步执行过程中，自动追踪所有能访问到的响应式属性。watch：手动指定依赖watchEffect：自动收集依赖（注意: 依赖太多各种坑）watchEffect 无法访问侦听数据的新值和旧值//侦听器的回调使用与源完全相同的响应式状态是很常见的。例如下面的代码，在每当 `todoId` 的引用发生变化时使用侦听器来加载一个远程资源const todoId = ref(1)const data = ref(null)watch(todoId, async () => { const response = await fetch( `https://jsonplaceholder.typicode.com/todos/${todoId.value}` ) data.value = await response.json()}, { immediate: true })//使用watchEffect简化代码，我们不再需要明确传递 `todoId` 作为源值.watchEffect(async () => { const response = await fetch( `https://jsonplaceholder.typicode.com/todos/${todoId.value}`); data.value = await response.json() }) 使用哪种随你喜欢，如果不需要使用先前值(oldValue)并且希望立即执行就用watchEffect，可以少写一点代码。watch的自由度更高，watchEffect相当于封装了一层推荐在大部分时候用 watch 显式的指定依赖以避免不必要的重复触发，也避免在后续代码修改或重构时不小心引入新的依赖。watchEffect 适用于一些逻辑相对简单，依赖源和逻辑强相关的场景停止监听器一个关键点是，侦听器必须用同步语句创建，这时它会在宿主组件卸载时自动停止。如果用异步回调创建一个侦听器，那么它不会绑定到当前组件上，你必须手动停止它，以防内存泄漏。// 它会自动停止 watchEffect(() => {}) // ...这个则不会！ setTimeout(() => { watchEffect(() => {}) }, 100)//停止监听器const unwatch = watchEffect(() => {}) // ...当该侦听器不再需要时 unwatch()//第二个参数是在发生变化时要调用的回调函数。这个回调函数接受三个参数：新值、旧值，以及一个用于注册副作用清理的回调函数。//该回调函数会在副作用下一次重新执行前调用，可以用来清除无效的副作用，例如等待中的异步请求。watch(id, async (newId, oldId, onCleanup) => { const { response, cancel } = doAsyncWork(newId) // 当 `id` 变化时，`cancel` 将被调用， // 取消之前的未完成的请求 onCleanup(cancel) data.value = await response})computed官网 //创建一个只读的计算属性 ref：const count = ref(1) const plusOne = computed(() => count.value + 1) console.log(plusOne.value) // 2 plusOne.value++ // 错误//创建一个可写的计算属性onst count = ref(1) const plusOne = computed({ get: () => count.value + 1, set: (val) => { count.value = val - 1 } }) plusOne.value = 1 console.log(count.value) // 0 计算属性的 getter 应只做计算而没有任何其他的副作用，这一点非常重要，请务必牢记。举例来说，不要在 getter 中做异步请求或者更改 DOM！CSS样式穿透：Vue3 中不支持 /deep/ 或者 >>>写法， 支持:deep(.class)css绑定js变量（v-bind）：单文件组件的 provie和inject//父级const name = ref('猪八戒'); const changeName = (newName: string) => { name.value = newName;};provide('name', name);provide('changeName', changeName); //更改name的方法//子级孙级const name = inject('name') as string; //使用类型断言，不然会有红色波浪线const changeName = inject('changeName') as Fn; 作者：岩苍美津未链接：https://juejin.cn/post/7282972975933505571