### **为什么要初始化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,
},
},
```