Vue常用知识点总结

Vue基础笔记

第一单元

1.简述MVVM和MVC的区别
MVC是后台的中框架模式 将程序分成三部分 M(model模型) V（view 视图） C（controller控制器）
model 和数据库的操作相关功能
view *****（前端关心的 页面）
contoller 就是协调model和view的

MVVM 是MVC中的view细分成了三部分 M model（数据） v（html）视图 vm(view-model)
前端的框架模式

2.简述虚拟DOM
将dom元素映射为js对象

3.怎么创建VUE实例
var vm=new Vue({
el:"",data:{},methods(){}
})

4.举例常用指令及作用
1、v-html 给元素绑定数据 可以解析html标签
2、v-text 给元素绑定数据 不解析标签
3、v-bind 给元素绑定属性
4、v-on 绑定事件
5、v-model 双向数据绑定 （一定是针对于表单和变量之间）
6、v-for 数据的遍历
7、v-if v-show 条件输出

5.例举常用修饰符
.stop .prevent .capture .self

6.v-if与v-show的区别
v-if有更高的切换成本 频繁的切换不适合用v-if
v-show有更高的渲染成本，有些数据永远不会显示的时候就不要用v-show
场景：v-if根据条件渲染数据， v-show把所有数据全部渲染出来

7.vue怎么绑定事件？以及常用修饰符
<input type=“button” @click="" />
.stop .prevent .capture .self

第二单元

1.method computed watch 的区别
watch 也可以响应数据的变化，当需要在数据变化时执行异步或开销较大的操作时使用watch
methods 每次渲染的时候都会被重新调用
computed 它既有属性的特点，也可以写复杂的逻辑，但是它是基于属性的缓存的，只有缓存属性的依赖发生改变的时候才会被调用，否则不会被调用

2.vue中怎么动态绑定class样式
：class="{ ‘active’:isActive }"

3.什么是过滤器？怎么定义全局和局部过滤器

• 定义全局过滤器:

 Vue.filter("big",function(val){        //全局过滤器
       return val.charAt(0).toUpperCase()+val.slice(1)                //逻辑处理
   })

• 定义局部过滤器: filters:{ //局部过滤器

  big:function(val){
             return val.charAt(0).toUpperCase()+val.slice(1)
         },
         change:function(val){
            return val.split("").join("-")
         }
        }

4.自定义指令语法是什么？请举例说明一个带参数的自定义指令怎么定义
directives：{
名（不带v-）:{
//指令钩子
bind 操作样式
inserted 操作行为 inserted
}
}

5.渐进式框架的理解
主张最少，没有多做职责之外的事情，渐进式框架就是对项目的参与性小，在这个项目中还可以使用其他插件

6.vue中双向数据如何实现的
{{ aa }}
Vue 实现 双向数据绑定 主要采用：数据劫持结合“发布-订阅”模式的方式，通过Object.defineProperty（）的 set 和 get，
在数据变动时发布消息给订阅者触发监听。

7.单页应用和多页应用的区别和优缺点
单页应用：只有一个html页面，跳转的方式是通过路由来切换不同组件
优点：跳转流畅，组件开发复用率高 缺点：首屏加载过慢
多页应用：有多个html页面跳转方式是通过多页面。整页刷新
优点：首屏加载快 缺点：跳转过缓慢

8.自定义指令有哪些钩子函数，及自定义指令的使用场景（面试真题）

• bind 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作

• inserted 被绑定元素插入到父节点时调用(父节点存在即可调用，不必存在于document中)

• update 所在组件的VNode更新时调用，可能会触发多次。
  但是可能发生在其孩子的VNode更新之前。指令的值可能发生了改变也可能没有，但是你可以通过比较更新前后的值来忽略不必要的模板更新

• componentUpdated 所在组件的VNode及其孩子的VNode全部更新时调用
  unbind 只调用一次，指令与元素解绑时调用-

• v-clock有什么用？ 解决差值表达式闪铄的问题

第四天

1.组件特性和好处
特性：组件功能必须是完整的
好处：提高开发率，方便重复使用

2.组件的基本组成
样式及结构 行为逻辑 数据

3.父传递子如何传递

1. 在父组件中给子组件的标签绑定自定义属性 挂载要传输的数据 :suibian=“obj”
2. 在子组件中通过 props选项来接收数据 记住props是一个数组 props:[ “suibian” ] {{
   suibian }}
3. 使用 接的什么就是使用什么

4.子传父如何传递

1. 在父组件中定义方法***
2. 在父组件中的子组件的标签上自定义事件挂载1中的方法
3. 在子组件的某个方法中通过this.$emit()来调用父组件的方法如果需要传输数据那么就从$emit的第二个参数开始写就行
   this.$emit(“add”,this.list)

5.兄弟组件如何传递

1. 先传给共同的父组件 再由父组件向下传递

2. bus总线传值

   bus总线其实是一个空5\\ \\\\\\\\\的vue实例
   1、做一个bus总线
   2、在要发送数据的方引入总线 通过Bus.$emit来派发事件Bus.$emit(“事件名”,数据)
   3、在接受数据的组件中，在created()构造函数中通过Bus.$on来监听事件，来获取数据Bus.$on(“事件名”,(data)=>{
   this.属性名=data
   })

6.props验证类型有哪些？
string number boolean array object

第五单元

1.keep-alive是什么？
保留组件状态

2.生命周期共有几个，分别在什么时候使用？
一共8个阶段
1、beforeCreate（创建前）
2、created（创建后）
3、beforeMount（载入前）
4、mounted（载入后）
5、beforeUpdate（更新前）
6、updated（更新后）
7、beforeDestroy（销毁前）
8、destroyed（销毁后）

3.created和mounted区别？
created是最早可以使用data和methods的生命周期函数
Mounted页面和内存中都是最新的数据 这个钩子函数是最早可以操作dom节点的方法

第六天

1.安装脚手架步骤
1.安装webpack npm install webpack -q
2.新建文件夹打开cmd vue init webpack aa
3.cd aa 然后运行 npm run dev

2.为什么要用脚手架
快速开始一个项目，不用手动搭配各种东西

3.vue中如和使用sass
1、安装
cnpm install --save-dev sass-loader
cnpm install --save-dev node-sass
2、配置
bulid->webpack.base.config.js中添加规则
{
test: /.sass$/,
loaders: [‘style’, ‘css’, ‘sass’]
}
3、<style lang="scss“>

4.vue-cli打包指令是什么？打包后会导致路径问题怎么解决
npm run build
在config文件下的index.js中，将原来/改成./

5.vue-router共有几种模式？默认是哪种？
2种
nash # 默认
istory /

6.params和query区别？

• 1.params传参，用name属性对应跳转路径，类似于post提交，参数不会出现在跳转路径里。
• 2.query传参，用path属性对应跳转路径，类似于get提交，参数是在路径里显示的。

7.重定向用哪个指令
redirect:" /goods "

第七天

1.请写出嵌套路由的配置规则
children:
{
path:"/‘good"，name:“Good”,component:“Good”
}
2.由列表页到详情页的思路
1.可以通过自身components引用Vue.extend构造,通过自身data向构造传参
2.可以通过自身components引用组件模板，通过自身data向组件传参

3.钩子路由共有几种？分别是什么？参数to，from，next分别是什么意思
beforeRouteEnter(to,from,next){}
beforeRouteLeave(to,from,next){}
beforeRouteUpdate(to,from,next){}

to(路由对象)即将要进入的目标
from 当前导航要离开的路由
next方法 resolve 钩子函数 必须要用的方法

第八单元 Vuex

1.vuex是什么？
是一个专门为vue.js应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相同的规则保证状态以一种可预测的方式发生变化

2.Vuex有什么好处？以及使用场景
是state中定义了一个数据之后，可以在项目中的任何地方一个组件里进行，获取进行修改。并且你的修改可以得到全局的相应变化
使用场景：一个数据在多个组件中使用的场景，假如你需要 数据 和 组件 分离，分别处理，那么使用 Vuex 是非常合适的
缺点：如果硬要说缺点的话，我觉得是vuex没有持久化存储的手段，每次刷新都会重置所有的数据

3.介绍Vuex核心概念及作用
state：{} 定义初始数据
mutation:{} 操作初始数据的方法
getter：{} 深加工初始数据
actions：{} 异步的操作初始数据，其实就是调用mutations里的方法
model:
4.详述vuex运行机制
vuex是提供数据来驱动视图通过dispath派发actions，在其中可以做一些异步的操作，然后通过commit来提交mutations，最后mutations来更改state

5.vuex中如何异步修改数据
在vuex中如果要要异步的操作数据需要在选项中actions中进行操作。actions的方法去调用mutations的方法，在vue组件通过this.$stor.dispath(方法名)来调用

第九天 Axios

1、axios安装步骤
cnpm install axios --save

2、Axios常用的请求方式有哪些？
axios()、axios.request()、axios.get()、axios.post()
axios.delete()、axios.head()、axios.put()、axios.patch()

3、简述axios并发请求
axios.all([,])返回的结果是一个数组
使用axios.spread可将数组展开

4、Axios创建实例
Var x = axios.create({
baseURL:””,
timeout:60000,headers:{}
})

5、简述拦截器是什么，共有几个拦截点，分别是什么
拦截器：动态拦截action调动的对象
拦截点：共有四个拦截点：
1、request（发送一个请求）
（1）success （成功）
（2）fall （失败）
2、response（服务器响应）
（1）success （成功）
（2）fall （失败）
6.element-ui完整步骤引入

1、element-ui是饿了吗团队基于vue2.0开发的一个ui框架
2、使用
安装
cnpm install element-ui -S

引入全部的组件（main.js）
import ElementUI from ‘element-ui’;
import ‘element-ui/lib/theme-chalk/index.css’
Vue.use(ElementUI);