Vue.js知识点梳理(三)

如何理解Vue的响应式系统的?

响应式系统简述:

• 任何一个 Vue Component 都有一个与之对应的 Watcher 实例。

• Vue 的 data 上的属性会被添加 getter 和 setter 属性。

• 当 Vue Component render 函数被执行的时候, data 上会被 触碰(touch), 即被读, getter 方法会被调用, 此时 Vue 会去记录此 Vue component 所依赖的所有 data。(这一过程被称为依赖收集)

• data 被改动时（主要是用户操作）, 即被写, setter 方法会被调用, 此时 Vue 会去通知所有依赖于此 data 的组件去调用他们的 render 函数进行更新。

Proxy与Object.defineProperty的优劣对比?

Proxy的优势如下:

Proxy可以直接监听数组，对象而非属性，返回的是一个新对象,我们可以只操作新的对象达到目的,而Object.defineProperty只能遍历对象属性直接修改
Object.defineProperty的优势如下:
兼容性好,支持IE9

computed和watch有什么区别?

• computed不需要在data中定义数据，watch监听在data中定义好的数据
• computed具有缓存性，依赖的数据变化才触发，watch无缓存性，页面重载，即使数据无变化，watch也会执行
  小结:
当我们要进行数值计算,而且依赖于其他数据，那么把这个数据设计为computed 如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化

MVVM,MVC,MVP

• MVC 模式modle和view直接通讯
• MVP模式modle和view不直接通讯，通过中间的Presenter
• MVVM模式，和MVP类似，多了双向绑定

虚拟DOM实现原理?

虚拟DOM本质上是JavaScript对象,是对真实DOM的抽象
状态变更时，记录新树和旧树的差异
最后把差异更新到真正的dom中

Vue2中注册在router-link上事件⽆效解决⽅法

使⽤ @click.native 。原因：router-link会阻⽌click事件，.native指直接监听⼀个原⽣事
件。

说下封装 vue 组件的过程？

1. 建⽴组件的模板，先把架⼦搭起来，写写样式，考虑好组件的基本逻辑。

2. 准备好组件的数据输⼊。即分析好逻辑，定好 props ⾥⾯的数据、类型。

3. 准备好组件的数据输出。即根据组件逻辑，做好要暴露出来的⽅法。

4. 封装完毕了，直接调⽤即可

params和query的区别

• ⽤法： query要⽤path来引⼊，params要⽤name来引⼊，接收参数都是类似的，分别是
  this. $route.query.name 和 this.$route.params.name 。
• url地址显⽰：query更加类 似于我们ajax中get传参，params则类似于post，说的再简单⼀点，前者在浏览器地址栏中显⽰参 数，后者则不显⽰ 注意点：query刷新不会丢失query⾥⾯的数据 params刷新 会 丢失 params⾥⾯的数据。