####1，vue的路由实现原理有哪几种
答案：Vue的路由实现：hash模式 和 history模式
hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取；
特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。
hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。
history模式：history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。
history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”
知识点链接：
https://blog.csdn.net/Benjamin920813/article/details/82764664
2，说说对keep-alive的了解
答案：keep-alive 可以缓存其它组件及其的组件的状态，避免了组件的频繁创建和销毁。
它有三个特性：
1.用于缓存组件，一般结合路由和动态组件一起使用。
2.提供 include 和 exclude 属性。两者都支持字符串或正则表达式， include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存 ，其中 exclude 的优先级比 include 高；
3.对应两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated。
3，说说实现数据双向绑定的原理
答案：vue的数据双向绑定是通过数据劫持和发布-订阅者功能来实现的
实现步骤：1.实现一个监听者Oberver来劫持并监听所有的属性，一旦有属性发生变化就通知订阅者
2.实现一个订阅者watcher来接受属性变化的通知并执行相应的方法，从而更新视图
3.实现一个解析器compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相对应的订阅者
知识点链接:https://blog.csdn.net/zhousenshan/article/details/81838748
4，简述父组件与子组件传值方式
答案：1、路由传参
①定义路由时加上参数props: true，在定义路由路径时要留有参数占位符: name『用法: to="'路径/'＋value"』
②在跳转到的页面加上参数props:['name']
③在跳转到的页面就获取到了name『用法: js中直接this. name；html中直接插值{{ name}}』
2、父组件向子组件传值
①父组件内设置要传的数据『data(){ id: value}』
②在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上『< myBtn :atrid='id'></ mybtn>』
③在子组件添加参数props:['atrid'],即可
3、子组件向父组件传值
①由于父组件需要参数，所以在父组件中的标签上定义自定义事件，在事件内部获取参数；『@myEvent=" callback"在callback函数中接收参数』
②在子组件中触发自定义事件，并传参。『this.$ emit('父组件中的自定义事件',参数)』
4、组件之间传值
(1)方法一、
①建立一个公共的通信组件( Vue)，需要传值的组件里引入该通信组件
②在一个中绑定一个事件this.on('eventname', this. id)
③在另一个组件中触发事件this.$ emit('eventname',( options)=>{})
(2)方法二、
在本地存储中添加公共数据，可以在两个页面中获取
知识点链接：https://www.jianshu.com/p/d79f7b0eaf33
5，v-show和v-if指令的共同点和不同点
答案：一、v-if和v-show的异同点
1.相同点 ：v-if和v-show都可以动态控制DOM元素的显示隐藏。
2.不同点：v-if是动态地向DOM树中添加或删除DOM元素节点；v-show是通过向DOM元素设置样式display属性值控制显示隐藏。
知识点链接：https://blog.csdn.net/sxjit/article/details/104299801
6，为什么避免v-if和v-for一起使用
答案：v-if和v-for一起使用，v-for的优先级要高于v-if
为了过滤一个列表中的项目（比如v-for = "user in users" v-if = "user.isActive"）。在这种情况下，请将users替换为一个计算属性（比如activeUsers），让其返回过滤后的列表。
为了避免渲染本应该被隐藏的列表（比如v-for = "user in users" v-if = "shouldShowUsers"）。这种情况下，请将v-if移动至容器元素上（比如ul，ol）
知识点链接：https://www.jianshu.com/p/676d025fa8a9
7，scss是什么？安装使用的步骤是什么？有那几大特性
答案：
css的预编译；
使用步骤：
第一步：用npm下三个loader(sass-loader、css-loader、node-sass)；
第二步：在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展.scss；
第三步：还是在同一个文件，配置一个module属性；
第四步：然后在组件的style标签加上lang属性，例如：lang="scss"；
有哪几大特性：
1、可以用变量，例如（$变量名称=值）；
2、可以用混合器；
3、可以嵌套；
8，如何获取路由参数，如何编程式导航
知识点链接：https://www.cnblogs.com/sauronblog/p/11565704.html
9，vue如何响应路由参数的变化
答案：方法一：
// 监听,当路由发生变化的时候执行
watch:{
$route(to,from){
console.log(to.path);
// 对路由变化作出响应...
}
},
方法二：
在父组件的router-view上加个key
<router-view :key="$route.fullPath"></router-view>
知识点链接：https://blog.csdn.net/weixin_40013817/article/details/102799023
10，简述vuex五大核心属性
答案：State 定义状态(变量)
Getter 获取状态(变量的值)
Mutation 修改状态(修改变量的值)
Action 触发 mutation 函数,从而修改状态
Module 当状态很多时,把状态分开来管理
知识点链接：https://www.cnblogs.com/y896926473/p/6709733.html
11，npm install --save 和 npm install --save-dev的区别是什么
答案：
npm install --save：
1. 安装模块到项目node_modules目录下。
2. 会将模块依赖写入dependencies 节点。
3. 运行 npm install 初始化项目时，会将模块下载到项目目录下。
4. 运行npm install --production或者注明NODE_ENV变量值为production时，会自动下载模块到node_modules目录中
--save-dev：
1. 安装模块到项目node_modules目录下。
2. 会将模块依赖写入devDependencies 节点。
3. 运行 npm install 初始化项目时，会将模块下载到项目目录下。
4. 运行npm install --production或者注明NODE_ENV变量值为production时，不会自动下载模块到node_modules目录中。
网友评论