这是我学习整理的关于 Vue.js 系列文章的第一篇，另外还有两篇分别是关于优化和原理的。希望读完这3篇文章，你能对 Vue 有个更深入的认识。 组件通信是 Vue 的核心知识，掌握这几个知识点，面试开发一点问题都没有。 用于实现父子组件间通信。通过 props 可以把父组件的…

那怎么才能将属性传递到内部的 el-input 组件中呢，直接给 el-input 加一个 v-bind="$attrs" 即可。 虽然上面可以解决了大部分的问题了，但同事发现并不能满足场景，主要是他用了动态组件 component。他的想法是通过 JSON Schema 的方…

OK,兄弟们。前面一篇文章就说过要用指令的方式来实现图片的懒加载。其实，前端发展这么多年，要实现图片懒加载非常的简单，配合上Vue的指令，30行轻轻松松实现一个高复用的Vue指令。一起来看看吧。 这里我是用的IntersectionObserver API去实现的。 简单来说可…

我们先来看看 官方文档中keep-alive 的用法。 max: 最多可以缓存多少组件实例。(2.5.0 新增, 一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉) keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁他们。…

切换到仓库的第一个commit，自己运行运行，尝试着去看一看代码，自己先理解理解，断点调试调试。然后再来看这篇文章代码中写的注释，遇到不太理解的再来看看这篇文章，看看是不是能够更易于理解些。代码真的已经简化到不能再简化，总计才150行左右，仔细看你一定能理解。第一个commit…

1. 渲染项目列表时，“key” 属性的作用和重要性是什么？ 渲染项目列表时，key 属性允许 Vue 跟踪每个 Vnode。key 值必须是唯一的。 如果没有使用 key 属性，并且列表的内容发生了改变（例如对列表进行排序），则虚拟 DOM 宁愿使用更新的数据来修补节点，来反…

更新 prop 在业务中是很常见的需求，但在子组件中不允许直接修改 prop，因为这种做法不符合单向数据流的原则，在开发模式下还会报出警告。因此大多数人会通过 $emit 触发自定义事件，在父组件中接收该事件的传值来更新 prop。 这种做法没有问题，我也常用这种手段来更新 p…

在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。 函数式组件是无状态，它无法实例化，没有任何的生命周期和方法。创建函数式组件也很简单，只需要在模板添加 functional 声明即可。一般适合只依赖于外部数…