Vue2.0知识点收集

在 Vue.js 2 中，自定义修饰符并不是官方直接支持的语法特性，但可以通过在组件内部解析 v-model 的修饰符（Modifiers）并结合事件处理逻辑，实现类似自定义修饰符的功能。以下是详细实

v-model 是一个用于实现表单元素和组件双向数据绑定的指令。 核心作用是将表单输入的值与 Vue 实例的数据属性进行动态绑定，当用户修改输入时，数据会自动更新，反之亦然。 一、基本用法 v-mod

46 watch 在 Vue.js 2 中，watch 是一个用于监听数据变化并执行自定义逻辑的核心功能。它特别适合处理异步操作或复杂的数据响应场景。以下是 watch 的详细解析： 1. 基本用法

作用：修饰符可以更精细地控制 DOM 事件的行为。 1. .stop：阻止事件冒泡 作用：停止事件冒泡（阻止事件向上级元素传播）。 示例：点击按钮时，不会触发外层 div 的点击事件。 等价原生 JS

作用 延迟回调执行 在 Vue 中，数据变化触发的 DOM 更新是异步的（例如修改 data 后视图不会立即更新）。this.$nextTick() 会将回调函数推迟到 DOM 更新完成后执行， 确保

Vue 2 父子组件生命周期流程 Vue 3 父子组件生命周期流程 总结 顺序一致：Vue 2 和 Vue 3 的父子组件生命周期执行顺序逻辑相同。 差异在细节：Vue 3 通过组合式 API 提供更

作用 keep-alive 是 Vue 提供的一个内置组件，用来对组件进行缓存，在组件切换过程中将状态保留在内存中，防止重复渲染 DOM。 1. 常规生命周期钩子的变化 首次加载（组件被创建并缓存）：

Vue2生命周期 1.初始化阶段 实例创建 beforeCreate() 实例创建前：数据和模板都未获取到 created() 实例创建后：获取到数据，模板还未获取到 数据挂载 beforeMount

1.核心架构差异 MVC模式 模型（Model）：主要负责处理数据以及相关的业务逻辑，就像是一个数据管家，管理着应用程序的核心数据和规则。 视图（View）：其作用是将数据呈现给用户，是用户直接看到和

父子组件 props / $emit provide / inject : 父组件向深层子组件传递 缺点：数据流向不透明 $attrs/$listeners ref v-model 兄弟组件 父组件中

vuev初始化data是我们常用的，特别在使用组件的时候很频繁，因为关闭组件再重新打开组件会有缓存数据，这时候徐需要再关闭的时候同时初始化一下组件data初始状态； 不过这个方法会存在一个坑点：如果这

--- highlight: a11y-dark --- 子组件中定义插槽位置： ```js ``` 父组件中实际使用插入： ```js 实际渲染 数据{{data.loading}} ```

场景：很多时候点击一个按钮弹出一个弹层组件，涉及到组件的开启关闭； 涉及知识点：visible.sync，可以直接利用('update:visible', false)的方式进行更新同步状态 涉及逻辑

为何和Object对象监听方式不一样？ 思路：数据获取时收集依赖，数据变化更新时通知更新； 1.数组收集依赖； 2.数组的通知依赖：重写操作数据的方法（pop/push/shift/unshift/s

核心属性方法：Object.defineProperty； 大致流程： Data通过observer转换成了getter/setter的形式来追踪变化。 当外界通过Watcher读取数据时，会触发ge

语法：在模版中使用{{参数一 | 处理函数}}； 串联过滤器: 2.接收参数：语法：在模版中使用{{参数一 | 处理函数}}； 串联过滤器: 2.接收参数：

指令是作为标签属性写在模板中的HTML标签上的； 自定义指令的钩子函数： bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 inserted：被绑定元素插入父节点时

使用场景： 未使用keep-alive: 使用keep-alive包裹缓存情况： 属性： include - 字符串或正则表达式。只有名称匹配的组件会被缓存。 exclude - 字符串或正则表达式。