海胆的博客

针对现有依赖的重复性计算值，可以设置成computed。它的缓存机制可以提高性能当依赖的响应式内容发生变化，会自动的去触发得到运算结果watch 只能监听单一的响应式变量Computed 返回 ref 对象computed 中 T 是返回结果 .value 的 类型。

使 获取到的 响应式对象的属性 也具有响应式也就是单独修改获取到的属性 原本响应式对象也会更新；反之亦然。toRefs 主要方便解构语法，底层也是调用 toRef。

两者都能构建响应式对象，但更新方式不同ref 只能对其值整体的替换，对象亦如此reactive 只能用.属性的方式，不能整体替换

事件修饰符只能对原生的 DOM 事件起作用的修饰符：.stop 组织事件冒泡传播.prevent 阻止浏览器默认行为如：a链接跳转页面，form submit会刷新页面，鼠标右键弹出菜单等.capture 事件捕获模式.self 当event.target是当前元素自身时触发.once 只会触发一次.passive 对应addEventListener 中的 passive 选项.passive 会告诉浏览器你不想阻止事件的默认行为按键修饰符常用的键别名：.enter.

参考博客直接绑定会变成拼接的字符串,需要用 v-bind 代替:value="'form.' + item.prop"注意：千万别把 from 写成 from，我是sb ????

在 created() 里使用 this.$nextTick() 可以等待 dom 生成以后再来获取 dom对象

由于element-ui 未对 Vue3 兼容，导致官方提供的构建版本不能使用下面手动进行迁移element-ui 换成 element-plus 处理两者不兼容的代码vue2 改为 vue3 相应的依赖和配置也需要做修改el-subMenu -》 el-sub-menuel-dialog 下 :visible.sync 替换成 v-modelel-date-picker 移除了 picker-options 转而将它们拆分成单个选项进行配置事件总线 替代品以上仅为我所遇到不兼容，详细请

官方说明强大的新特性：新增了 组合式 api --> setup<teleport to="selecter"></teleport> 保留原来层级关系的情况下，指定渲染的父节点模板支持多个根节点 需要指明属性继承的位置 v-bind="$attrs"增加 emit 选项单文件组件的组合式 API 语法糖<script setup> 极大降低组件代码量SFC 可以绑定样式变量<style scoped> v-deep v-slotted

修饰符修饰符可以简化代码事件修饰符在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。.stop 阻止事件继续传播.prevent.capture 用事件捕获模式.self 只当在 event.target 是当前元素自身时触发处理函数.once 事件将只会触发一次.passive内容很多···...

字符串模板: 对象中作为templet的属性值，是出现在js中的，DOM模板: 直接作用与HTML代码中，是出现在<templet>标签中的。因为HTML标签的属性名是大小写不敏感的，会被自动识别成小写因此无法在标签标签中使用驼峰命名，但js却可以使用驼峰命名为了解决这个冲突，Vue会在底层自动将短横线式等价为命名驼峰式，使用短横线命名在DOM模板中使用组件名、props等都会涉及到这个问题 DOM模板中只有短横线名名适用组件名 如果使用驼峰式，则为大驼峰（首字母大写）组件名.

watch 允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。watch 需要侦听特定的数据源，并在回调函数中执行 effect。watch 与用字符串确定监听对象，只能将顶层的或属性名作为字符串传递对于更复杂的表达式，需要用一个函数取代当侦听的值是一个对象或者数组时，对其属性或元素的任何更改都不会触发侦听器，因为引用的对象/数组并没有发生改变。

一处数据发生变化，与他相关的内容会同步发生变化。

常见的应用范围：添加全局方法或者 property。如：vue-custom-element加全局资源：指令/过滤器/过渡等。如：vue-touch）通过全局 mixin 来添加一些组件选项。(如vue-router)添加全局实例方法，通过把它们添加到 config.globalProperties 上实现。一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router在单文件中创建插件export default { install: (app, option

相较于模板，应用于更加灵活的场景预备知识实例 property 的 api

可以控制在 DOM 中哪个父节点下渲染了 HTML<teleport to="body"> <!-- 内部的 html 将在 body 下渲染 --></teleport>在同一目标（to='xxx'）上使用多个 teleport，顺序将是一个简单的追加——稍后挂载将位于目标元素中较早的挂载之后。...

directives选项中定义 指令使用时添加v-前缀

提高组件选项的复用相同选项会合并钩子函数会合并成数组，并在组件自身钩子函数之前执行当对象属性重名 保留组件自身属性

父组件通过 provide选项提供数据子组件通过 inject选项 注入数据可以跨越层级传递注：provide选项 要访问组件实例data，需要将 provide 转换为返回对象的函数默认情况下，provide/inject 绑定并不是响应式的。...

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：text 和 textarea 元素使用 value property 和 input 事件；checkbox 和 radio 使用 checked property 和 change 事件；select 字段将 value 作为 prop 并将 change 作为事件。...

参考教程事件名 会自动把 驼峰转kebab-case （HTML标签不区分大小写这个问题）props 自定义事件 组件 的命名都存在自动转化。如果你使用的是字符串模板，这个限制就不适用。emits 选项当在 emits 选项中定义了原生事件 (如 click) 时，将使用组件中的事件替代原生事件侦听器。设置验证与props类似，可以通过数组语法和对象语法 来定义自定义事件通过对象语法配置事件抛出验证：{ emits: { // 验证submit 事件 submit: ({

传入一个对象的所有 propertypost: { id: 1, title: 'My Journey with Vue'}<blog-post v-bind="post"></blog-post>等价于：<blog-post v-bind:id="post.id" v-bind:title="post.title"></blog-post>

全局注册 字符串注册全局注册app.component('component-name', { data() { return { count: 0 } }, props: ['title'], template: ` <h4>{{ title }}</h4> <button @click="count++"> You clicked me {{ count }} times. </.

Vue 的核心是 声明式渲染声明式的特点在于 通过改变声明来决定样式，而不是直接去操作 dom 改变vue通过mount挂载，将声明的数据与dom联系起来，并实现响应式变化（一处变化同步变化）Vue 提供了一些特殊的响应式v-bind: 绑定属性attribute 简写’:’ 让该属性与声明的数据保持一致v-on: 对事件监听创建Vue应用的对象参数Vue.createapp({}){ data() { return { xxx: xxx, xxxx: xx }

处于beforeCreate 和 created 生命周期 vue3生命周期=》setup函数中是无法 使用 data 和 methods 中的数据和方法=》setup函数中的this修改成了 undefined什么是组合式api?

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。可以在标签内设置插槽的默认内容。