Vue与Angular对比及实战知识点总结

"vue实战项目里常用知识点归纳-2023" 在Vue.js的实战项目中，开发者会遇到各种核心概念和技术，以下是其中的一些关键点： 1. **Vue与Angular的区别**： - Vue是一个轻量级的MVVM库，专注于视图层，而Angular是一个完整的框架，包含了更多内置功能和服务。 - Vue使用ES5的getter/setter实现双向数据绑定，性能高效，但不支持IE9以下的浏览器；Angular则依赖自己的模板编译规则和脏检查机制。 - Vue实例化时需指定`el`，作用域限制在该元素内，可以创建多个实例；Angular通常处理整个HTML页面。 - Vue的学习曲线较平缓，文档简洁，但深入学习可能需要研究源码。 2. **Angular的脏检查**： - Angular的脏检查机制是在无法直接检测数据变化时，通过遍历所有数据并比较新旧状态来识别变化。 - 这种方法效率较低，可能会导致不必要的计算，尤其当应用复杂时。 3. **vue-router的组件属性和嵌套路由**： - `active-class`是vue-router的`router-link`组件的属性，用于指定激活状态时链接的样式类。 - 嵌套路由通过在VueRouter的配置中使用`children`属性实现，允许路由层次结构的扩展。 4. **路由配置**： - 在`index.html`中，路由出口定义了一个入口点。 - 在`main.js`中，使用`redirect`可以指定页面加载时默认显示的组件。 - 子路由通过`children`数组配置，子路由的出口应放在其父组件的模板内。 5. **动态路由和参数获取**： - 动态路由通过在`path`属性上添加`:id`定义，如`/users/:userId`。 - 使用`this.$route.params.id`来访问传递的动态参数。 6. **vue-router的导航钩子**： - 全局导航钩子包括`beforeEach`, `afterEach`和`beforeRouteUpdate`，它们分别在路由改变前、后以及更新组件实例前执行。 - `beforeEach`用于在每个路由跳转前执行，可以进行权限验证或数据预加载。 - `afterEach`在每次路由切换后执行，适合做全局的页面更新操作。 - `beforeRouteUpdate`在当前路由组件被复用时（如父路由切换子路由）执行，可避免重复的数据请求。 这些知识点是Vue.js开发者在实际项目中常见的关注点，理解和掌握它们能有效提升项目开发效率和代码质量。在准备Vue面试时，这些也是重要的讨论点。