Vue - 面试题持续更新（重点在理清答题思路，更详细知识点另外查阅）

1 Vue原理相关

1.1 Vue双向数据绑定原理

双向绑定 - MVVM
数据就是简单的javascript对象，需要将数据绑定到模板上
监听视图的变化，视图变化后通知数据更新，数据更新会再次导致视图的变化！

当输入框内容变化时，Model中的数据同步变化。即 View => Model 的变化。
Model 中的数据变化时，文本节点的内容同步变化。即 Model => View 的变化。

双向绑定是通过 数据劫持 结合 发布订阅者 的方式来实现的，其核心是object.defineProperty()方法。

首先，Vue 使用了一个名为「Observer」的类来实现数据劫持，
当创建 Vue 实例时，Vue 会遍历传入的数据对象，对其进行递归遍历并使用 Object.defineProperty 方法为对象的属性(某个数据变量)添加访问器属性，通过get和set方法来实现数据的劫持（比如给某个data数据赋值，就会触发setter）也就是转化为「响应式」属性。
其次，发布订阅模式也被称为观察者模式，当监听到数据变化发布消息给订阅者(观察者)，触发相应的监听回调，更新视图。

1.2 Vue2和Vue3双向数据绑定原理区别

vue3中使用了ES6的Proxy这个API来对数据代理，Proxy对象代理原始数据对象实现对数据的劫持和监听。
Proxy对象的代理机制是通过使用get和set方法来实现的。当我们读取数据对象的属性时，Proxy会调用get方法，并返回属性的值。而当我们修改数据对象的属性时，Proxy会调用set方法，并更新属性的值。

Object.definePropert 和 Proxy的区别：
Object.defineProperty() 只能监听对象的现有属性，不能全对象监听（ Object.defineProperty 对现有property 执行 getter/setter 转化，无法检测 property 的添加或移除）。
而Proxy代理监听整个对象，对于data里面的对象，可以检测到其新增/删除的属性；同时因为不用遍历数据对象去添加访问器属性可以省去for in、Object.keys()等操作，提升了效率/性能；Proxy也可以监听数组，不用再去单独的对数组做特异性操作(如Vue2 的$set)，它可以检测到数组内部数据的变化。

/** Vue2 */
// 遍历对象 实现对对象的属性进行劫持
 Object.keys(data).forEach(key => {//这里也可以用for in
     Object.defineProperty(data, key, {
         // 当且仅当该属性的enumerable为true时，该属性才能够出现在对象的枚举属性中
         enumerable: true,
         // 当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除
         configurable: true,
         // 一个给属性提供 getter 的方法
         get: () => {
             return val;
         },
         // 一个给属性提供 setter 的方法
         set: (newVal) => {
             // 当属性值发生变化时我们可以进行额外操作 如调用监听器
             if (newVal === val) { // 如果未发生变化 不做其他操作
                 return;
             }
             outVue2.innerHTML = newVal
             console.log(`vue2触发视图更新函数${newVal}`);
         },
     })
 })

/** Vue3 */
let proxy = new Proxy(obj, {
    get: (target, prop, receiver) => {
            return prop in target ? target[prop] : 0
    },
    // input事件触发进行劫持，触发update方法
    set: (target, prop, value, receiver) => {
            target[prop] = value
            console.log(`vue3触发视图更新函数${value}`);
            update(value)
    }
})

2 Vue零散知识点

2.1 Vue路由模式

总共有Hash和History两种模式

Hash模式：
URL 中会带有 # 符号，"#"后面的字符称之为Hash，用window.location.hash读取。

• 特点： 通过 window.onhashchange 的方式，来监听 hash 的改变，借此实现无刷新跳转的功能。hash是和浏览器对话的，和服务器没有关系，hash值不会作为url的一部分发送给服务器。
• 优点：兼容性好，可以在不同浏览器和服务器环境下正常工作。
• 缺点： URL 中带有 # 符号，不够美观，且可能影响 SEO。

http://localhost:8080/#/
http://localhost:8080/#/about
http://localhost:8080/#/home

History模式：
history采用HTML5的新特性，使页面更美观，并且提供了两种新方法window.history.pushState()，window.history.replaceState()可以对浏览器的历史栈进行修改(来实现无刷新跳转的功能)，以及window.onpopstate事件的监听到状态变更。

• 特点：history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致。
• 优点：URL 更加美观，不带有 # 符号，更符合传统网站的 URL 结构，有利于 SEO
• 缺点：需要服务器端配置支持，以处理在浏览器中直接访问 history 模式下的 URL

http://localhost:8080/
http://localhost:8080/about
http://localhost:8080/home

在 Vue Router 中，默认使用的是 hash 模式。你可以通过在创建 Router 实例时传入 mode: 'history' 来启用 history 模式，如下所示：

const router = new VueRouter({
  mode: 'history',
  routes: [
    // 定义路由
  ]
});

启用 history 模式后，你还需要在服务器端配置，以确保在直接访问 history 模式下的 URL 时，能正确返回对应的页面。具体的服务器配置方式取决于你使用的服务器环境，通常需要配置将所有路由都指向你的 Vue 应用的入口文件。