CedricD的博客

组件通信组件通信一般分为以下几种情况：父子组件通信兄弟组件通信任意组件父子通信父组件通过 props 传递数据给子组件，子组件通过 emit 发送事件传递数据给父组件，这两种方式是最常用的父子通信实现办法。这种父子通信方式也就是典型的单向数据流，父组件通过 props 传递数据，子组件不能直接修改 props， 而是必须通过发送事件的方式告知父组件修改数据。另外这两种方式还可以使用语法糖 v-model 来直接实现，因为 v-model 默认会解析成名为 value 的 prop 和名为

涉及面试题：前端路由原理？两种实现方式有什么区别？前端路由实现起来其实很简单，本质就是监听 URL 的变化，然后匹配路由规则，显示相应的页面，并且无须刷新页面。目前前端使用的路由就只有两种实现方式Hash 模式History 模式Hash 模式www.test.com/#/ 就是 Hash URL，当 # 后面的哈希值发生变化时，可以通过 hashchange 事件来监听到 URL 的变化，从而进行跳转页面，并且无论哈希值如何变化，服务端接收到的 URL 请求永远是 www.test.com。

Virtual DOM什么是 Virtual DOM？为什么 Virtual DOM 比原生 DOM 快？那么相较于 DOM 来说，操作 JS 对象会快很多，并且我们也可以通过 JS 来模拟 DOMconst ul = { tag: 'ul', props: { class: 'list' }, children: { tag: 'li', children: '1' }}上述代码对应的 DOM 就是<ul class='list'>

MVVM涉及面试题：什么是 MVVM？比之 MVC 有什么区别？首先先申明一点，不管是 React 还是 Vue，它们都不是 MVVM 框架，只是有借鉴 MVVM 的思路。文中拿 Vue 举例也是为了更好地理解 MVVM 的概念。接下来先说下 View 和 Model：View 很简单，就是用户看到的视图Model 同样很简单，一般就是本地数据和数据库中的数据基本上，我们写的产品就是通过接口从数据库中读取数据，然后将数据经过处理展现到用户看到的视图上。当然我们还可以从视图上读取用户的输入，然

computedcomputed 是计算属性，依赖其他属性计算值，并且 computed 的值有缓存，只有当计算值变化才会返回内容。watchwatch 监听到值的变化就会执行回调，在回调中可以进行一些逻辑操作。所以一般来说需要依赖别的属性来动态获得值的时候可以使用 computed，对于监听到值的变化需要做一些复杂业务逻辑的情况可以使用 watch。另外 computed 和 watch 还都支持对象的写法，这种方式知道的人并不多。vm.$watch('obj', { // 深

v-showv-show 只是在 display: none 和 display: block 之间切换。无论初始条件是什么都会被渲染出来，后面只需要切换 CSS，DOM 还是一直保留着的。所以总的来说 v-show 在初始渲染时有更高的开销，但是切换开销很小，更适合于频繁切换的场景。v-ifv-if 的话就得说到 Vue 底层的编译了。当属性初始为 false 时，组件就不会被渲染，直到条件为 true，并且切换条件时会触发销毁/挂载组件，所以总的来说在切换时开销更高，更适合不经常切换的场景。

vue的生命周期生命周期：vue实例从创建到销毁的过程，称其为vue生命周期。通过上图可以看到Vue的生命周期共8个钩子在该过程当中所暴露（当执行到某个阶段时自动运行）出来的函数，称为钩子函数。生命周期钩子函数创建前/创建后beforeCreate:创建实例前触发created:创建实例后触发在 beforeCreate 钩子函数调用的时候，是获取不到 props 或者 data 中的数据的，因为这些数据的初始化都在 initState 中。然后会执行 created 钩子函数，