Vue面试题四 @酷酷的小航航

vue-router实现原理

前端路由分为俩种，一种是hash模式，一种是history模式

hash是异步数据请求交互允许在不刷新浏览器的情况下进行。而异步交互体验的更高级版本教师spa-单页应用，单页应用不仅仅实在页面交互是无刷新的，连页面跳转都是无刷新的

history模式
多了俩个APi pushstate 和replacestate通过这俩个APi可以改变url地址不会发送请求

• 单页路由的url就不会多出一个#，用户刷新页面浏览器会给服务器发送请求，为了避免出现这种情况所以实现需要服务器支持需要把所有路由重定向到根页面

简述Vue响应式原理

• 当一个Vue实例创建时，vue会遍历data选项的属性，用Object.defineProperty将他们转化为getter/setter并且在颞部追踪相关依赖，在属性被访问和修改时通知变化。
• 每个组件实例都有相应的watcher 程序实例，它会在组件渲染的过程中把记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。

SPA 路由history模式上线后刷新404

• 刷新404，因为本地路径中没有真实的资源重载，这些访问资源都是在js里渲染的，我们只需要在服务器配置如果URL 匹配不到任何静态资源，就跳转到默认的index.html

1.安装 IIS UrlRewrite

• 2.在你的网站根目录中创建一个 web.config 文件，内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
          <match url="(.*)" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

3.修改config下面的index.js文件

将assetsPublicPath: ‘/‘改为’./’