Vue2与Vue3关键知识点总结

"Vue2和Vue3的笔记涵盖了框架的核心概念、组件化、数据绑定、通信机制、插槽、路由传参以及一些实用技巧。" 在Vue2中，有几个关键的知识点需要理解。首先，`mounted`和`updated`生命周期钩子在不同场景下发挥作用。`mounted`在组件实例挂载到DOM后调用，而`updated`则在数据变化导致的DOM重新渲染完成后触发。`updated`不会因为仅数据改变但未影响到视图而执行。其次，`data`的声明方式有两种，函数式和对象式。函数式创建的数据对象是独立的，而对象式则会导致数据共享。此外，`vue.extend`创建组件时会返回一个新的`VueComponent`实例，即使组件相同也会产生多个实例。 `ref`属性允许我们在组件外部引用内部元素，可以应用于任何标签。对于`props`，它们是父组件向子组件传递数据的方式，接收的数据不会存储在组件的`_data`对象中，而是直接存在于组件实例。尽管可以直接修改`props`，但这是不推荐的，因为这可能导致预期外的行为，正确的做法是通过子组件的事件触发器通知父组件来更新数据。 `scope`原理在于为元素添加特定标识，以便实现作用域隔离和样式控制。组件间通信可以通过`props`和自定义事件（包括`.native`修饰符的原生事件）进行，也可以使用全局事件总线或消息订阅发布模式。此外，插槽机制允许父组件的内容插入到子组件的特定位置，而作用域插槽允许子组件向父组件传递数据。 在Vue的开发中，为了在控制台方便地查看变量，可以将其附加到`window`对象上。路由传参分为`Query`和`Params`两种方式，前者在URL查询字符串中传递，后者在路由名称中传递，并且`Params`的接收通常需要在路由配置文件中处理。通过`props`简化接收路由参数可以更方便地在组件内部使用这些参数。 至于Vue3，虽然具体内容没有在摘要中提及，但Vue3引入了Composition API，提供了更好的代码组织和重用，以及更好的类型支持。它还优化了性能，如Teleport、Suspense和Fragment等新特性，提升了开发体验和应用性能。Vue3的`ref`和`reactive`函数使得响应式数据管理更为灵活，而`setup`函数是新引入的生命周期入口，用于组合API的使用。 Vue2和Vue3的笔记内容深入浅出地讲解了框架的核心概念，对开发者理解和应用Vue有极大的帮助。