Vue2与Vue3学习精要：组件通信、插槽与路由传参

"Vue2+Vue3学习笔记，涵盖了Vue框架的关键知识点，包括生命周期、数据绑定、组件创建、属性传递、事件通信、插槽机制、路由传参等" Vue.js是前端开发中常用的JavaScript框架，本笔记主要关注Vue2和Vue3的共性和差异。以下是对这些关键知识点的详细说明： 1. **生命周期**： - `mounted`：当组件实例被挂载到DOM上后调用，意味着组件已经准备好了，但不保证所有的子组件也都已挂载。 - `updated`：在数据变化并导致视图重新渲染后调用，用于处理数据变化后的操作。如果数据改变但未影响到视图，`updated`不会被触发。 2. **data的声明方式**： - 函数式：每个实例都返回一个新的数据对象，确保组件之间数据独立，避免共享状态。 - 对象式：所有实例共享同一个数据对象，修改一处会影响其他实例。 3. **组件创建与复用**： - 使用`vue.extend`创建组件时，每次都会生成一个新的`VueComponent`，即使组件相同。 - 同一组件标签多次使用会创建多个独立的组件实例。 4. **ref属性**： - 可以添加到任何标签上，用于在Vue实例中引用DOM元素或子组件。 5. **props的使用**： - 用于父组件向子组件传递数据，实现数据的单向流动。 - 不应在子组件内直接修改props，而是通过事件通知父组件更新。 6. **scope的原理**： - 在CSS中，scope为组件添加特定的标签，使得样式只作用于该组件，防止样式冲突。 7. **组件间通信**： - 父向子：使用`props`传递数据。 - 子向父：通过自定义事件或父组件提供的回调函数。 - 任意组件间：全局事件总线（简单的事件中心）或消息订阅发布系统。 8. **插槽**： - 提供了一种将父组件的内容插入到子组件特定位置的方式。 - 作用域插槽允许子组件传递数据给父组件，使用`scope`或`slot-scope`接收。 9. **控制台打印**： - 将变量附加到`window`对象上，可以在控制台直接访问和打印。 10. **路由传参**： - `Query`传参：查询参数显示在URL中，可以通过`to`的字符串或对象形式设置，接收时无需通过路由配置。 - `Params`传参：隐藏在URL路径中，需在`index.js`中配置接收，使用`to`的对象形式且需指定`name`。 11. **通过props简化接收路由参数**： - Vue Router提供了通过props直接将路由参数传入组件的方法，简化了接收过程。 以上是Vue2和Vue3部分共同的核心概念，实际使用中还应注意Vue3引入的新特性，如Composition API、Suspense组件、 teleport 等，它们为开发带来了更高的灵活性和性能优化。