前端基础知识与常见面试题(三)

### **为什么要初始化CSS样式**

因为浏览器兼容性，不同的浏览器对有些标签有默认样式，所以需要重置

推荐normalize.css

### **移动端怎么自适应**

rem适配，vw适配

由于直接写rem和vw不太服务大部分程序员的编程习惯

插件：

​    amfe-flexible ： 给html设置font-size，值为设备宽度的1/10

​    postcss-pxtorem : 可以把写的px单位转换为rem

​    postcss-px-viewport ： 可以把写的px单位转换为vw

### **vue-router实现路由懒加载（ 动态加载路由 ）**

**@vue/cli@5.0 ->router/index.js**

```js
const routes = [
  ...
  {
    path: '/about',
    name: 'about',
    /*  webpackChunkName js文件打包时的文件名 */  
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]
```

**@vue/cli@4.5->router/index.js**

```js
const routes = [
  ...
  {
    path: '/about',
    name: 'about',
    /*  webpackChunkName js文件打包时的文件名 */  
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]
```

由于@vue/cli@4.5中自带预加载，所以需要去掉

**vue.config.js**

```js
module.exports = {
    chainWebpack: config => {
        config.plugins.delete('prefetch')
    }
}
```

ps : 想测试可以使用npx临时切换脚手架版本：npx @vue/cli@4.5 create app

nodejs 14以上版本 npx无法指定包的版本

### **vue初始化页面闪动问题**

可以在#app的div上加  style="display: none" :style="{ display: 'block' }"

### **Vue中的常用指令**

v-show、v-if、v-else、v-for、v-model、v-bind、v-on....

### **Vue中 v-for key 值的作用**

特殊的属性，主要用于在vue中虚拟dom算法中，用于vue方便dom操作
———————————————————————————————————————————
### **请解释一下同源策略**

同源策略：浏览器的安全策略，URL有三个基本组成部分：协议+ip/域名+端口号，三者必须完全相同称之为同源

协议+ip/域名+端口号

| URL                            | URL                                  | 对比                |
| ---------------------   | ----------------------       | ------------------- |
| http://127.0.0.1:8080 | https://127.0.0.1:8080    | 不同源:协议不同     |
| http://127.0.0.1:8080 | http://localhost:8080     | 不同源:域名或ip不同 |
| http://127.0.0.1:8080 | http://127.0.0.1:8081     | 不同源:端口不同     |
| http://127.0.0.1:8080 | http://127.0.0.1:8080     | 同源                |
| http://localhost:8080 | http://localhost:8080     | 同源                |

注意：同源策略是浏览器的行为

### **什么是跨域**

不满足同源策略就是跨域

### vue如何处理跨域

@vue/cli@5.0  配置vue.config.js

```js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    // 配置代理服务器
    proxy: {
      // 自定义请求头,指定是有 /demo 开头的请求都是用代理服务器
      '/demo': {
        // 往哪个服务器请求
        target: 'http://localhost:3000/',
        pathRewrite: {
          // 去掉请求路径中的 /demo
          "^/demo": ""
        }
      },
    }
  }
})
```

注意：在启动脚手架的时候会启动一个内置的web服务器，同源策略是浏览器的行为，而服务器和服务器之间发请求不存在跨域，所以我们配置代理实际由内置的web服务器中转了请求，此种方式仅局限于开发阶段

@vue/cli@4.5 默认没有vue.config.js,需要手动创建

```js
module.exports = {
  devServer: {
    proxy: {
      '/demo': {
        target: 'http://localhost:3000/',
        pathRewrite: {
          "^/demo": ""
        }
      },
    }
  }
}
```

### **v-if和v-for的优先级**

v-for比v-if优先级高，如果一起用会造成if重复运行，所以不建议一起使用

### **v-if 和 v-show 区别**

v-if是dom操作，对性能消耗大

v-show是css的display属性控制，对性能消耗小

有些情况不能用v-show，只能用v-if

​    情况一：一些复杂组件

​    情况二 : 插槽，因为slot不是html元素，所以没有display属性

### **watch，computed，methods的区别？**

computed： 计算属性，实际是一个函数调用时不需要加小括号，显示的是函数的返回结果，这个结果会被缓存下来，调用多次不会重新执行函数，只有当结果所依赖的变量发生变化的时候才会重新执行

methods：方法，通过js调用，或者事件触发

watch：监听器，当watch监听的变量值发生变化的时候才会执行

### **watch深度监听**

监听器/监视函数/侦听器

deep可以监听对象内部的变化，默认值是false，true是开启

```js
watch: {
    user: {
        handler(newVal) {
            console.log(newVal.uname);
        },
        // 开启深度监听
        deep: true,
    },
},
```