VUE知识点

1.Vue的生命周期

（1）什么是vue生命周期?

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

（2）vue生命周期的作用是什么?

Vue生命周期中有多个事件钩子，让我们在控制整个Vue实例过程时更容易形成好的逻辑。

（3）vue生命周期总共有几个阶段?

可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/后。
beforeCreate 、created、beforeMounte、mounted、beforeUpdate、updated、beforeDestroy、destroyed（创建、挂载、更新、卸载）

创建前/后： 在beforeCreate阶段，由于还未初始化，vue实例的挂载元素el和数据对象data都为undefined。在created阶段，vue实例的数据对象data有了，el还没有。

载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但挂载之前还是为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。

更新前/后：当data变化时，会触发beforeUpdate和updated方法。

销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。

（4）第一次页面加载会触发哪几个钩子?

第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

（5）DOM 渲染在 哪个周期中就已经完成?

DOM 渲染在 mounted 中就已经完成了。

2.methods、watch和computed的区别

https://segmentfault.com/a/1190000012948175

3.Vue的传参方法

第一种：属性传值

父组件调用子组件的时候，绑定动态属性 

在子组件里边通过props,接收父组件传过来的值

第二种：$refs

在父组件里面引用子组件

然后进行调用获取对应的属性或者方法
属性获取
this.$refs.header.msg
方法获取
this.$refs.header.msg()

第三种：$parent(子组件获取父组件数据)

子组件通过$parent获取父组件的数据和方法
这种传值方式实际上类似于上边的属性传值中父组件给子组件的传递了子类对象this,只不过Vue官方给封装好了。
在子组件里调用父组件
属性
this.$parent.fatherMsg
方法
this.$parent.fatherMsg()

第四种：子组件给父组件传值

this.$emit('名称','数据')

第五种：本地传值

存:

localStorage.setItem('tolist',JSON.stringify(this.tolist));

取:

localStorage.getItem('tolist')

第六种：vuex

（1）vuex是什么？怎么使用？哪种功能场景使用它？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
在main.js引入store注入。新建一个目录store 。
场景有：单页应用中，组件之间的状态，音乐播放、登录状态、加入购物车等。

（2）vuex有哪几种属性？

有五种，分别是 State、 Getter、Mutation 、Action、 Module。

（3） vuex的State特性

Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data。

state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新。

通过mapState把全局 state 和 getters 映射到当前组件的 computed 计算属性中。

（4）vuex的Getter特性

getters 可以对State进行计算操作，它就是Store的计算属性。

虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用。

如果一个状态只在一个组件内使用，可以不用getters。

（5）vuex的Mutation特性

Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作。

（6）不用Vuex会带来什么问题？

可维护性会下降，想修改数据要维护三个地方；

可读性会下降，因为一个组件里的数据，根本就看不出来是从哪来的；

增加耦合，大量的上传派发，会让耦合性大大增加，Vue用Component本意就是为了减少耦合，现在这么用，和组件化的初衷相背

2.1 src新建一个vuex文件夹
2.2 vuex文件夹里新建一个store.js
2.3 安装vuex cnpm install vuex --save
2.4 在刚才创建的store.js 中引入vue、vuex 引入vuex 并且use

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

2.5 定义数据 state在vuex中用于存储数据

var state = {  count:1,}

2.6 定义方法 mutations里边放的是方法,方法主要用于改变state里边的数据

var mutations = {
    incCount(){
            ++state.count;
   }
}
   //类似于计算属性  state里边的数据改变时候触发的方法。 可以做一些操作 并且可以有返回值
var getterfl={
         completedCountChange(state){
         return state.count * 2 +'位';
        }
    }

Action 类似于 mutation，不同在于： Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作

var actionfl = {
  asynIncCount(context){  
//因此你可以调用context.commit来提交一个mutation  使用action需要用dispatch
      context.commit('incCount');
  }
}

2.7 实例化 vuex

const store = new Vuex.Store({
            state,//state: state  简写
            mutations: mutations,//属性的简写是 mutations
    getters:getterfl,
       actions:actionfl,
})

2.8 对外暴露

export default  store;

2.9 在需要用的地方引入

import store from '../vuex/store.js'

2.10 注册store ，放在methods,data同级

export default {
    data(){
        return{}
    },
    store:store,
    methods:{
        incCount(){
            this.$store.commit('incCount');
        }
    }
}

2.11 使用vuex
使用数据：

this.$store.state.count

调用方法：

this.$store.commit('incCount');

第七种：路由传值

1 、动态路由传值

  1.1 配置动态路由
      routes:[
         //动态路由参数  以冒号开头
         {path:'/user/:id',conponent:User}
       ]

   1.2 传值
     第一种写法 :  传值
     第二种写法 : goToUser(id) {
                    this.$router.push( {path:'/user/'+id});
                  }
   1.3 在对应页面取值
       this.$route.params;  //结果:{id:123}

2、 Get传值(类似HTMLGet传值）

 2.1 配置路由
     const routes = [{path:'/user',component:User},]
 2.2 传值  
     第一种写法 : 传值
     第二种写法 : goToUser(id) {
                        //'user' 是路径名称
                      this.$router.push({path:'user',query:{ID:id}});
                  }
 2.3 在对应页面取值
     this.$route.query;  //结果 {id:123}

Tips：路径传递参数会拼接在URL路径后
3 、命名路由push传值

3.1 配置路由
   const routes = [{path:'/user',name: 'User',component:User},]
3.2 传值  
        goToUser(id) {
                //'User' 是路径重命名
              this.$router.push({name:'User',params:{ID:id}});
           }
3.3 在对应页面取值
       this.$route.params;  //结果:{id:123}

Tips：命名路由传递参数不在URL路径拼接显示

4.Vue 路由 导航守卫

一.全局守卫 main.js中设置全局守卫

回调函数中的参数，to：进入到哪个路由去，from：从哪个路由离开，next：函数，决定是否展示你要看到的路由页面。

router.beforeEach((to,from,next)=>{
  if(to.path == '/login' || to.path == '/register'){
    next();
  }else{
    alert('您还没有登录，请先登录');
    next('/login');
  }
})

全局后置钩子router.afterEach((to,from)=>{})

router.afterEach((to,from)=>{
  alert("after each");
})

二.组件内的守卫

页面跳转时 执行beforeRouteEnter函数

离开这个组件时执行beforeRouteLeave

beforeRouteLeave:(to,from,next)=>{
        if(confirm("确定离开此页面吗？") == true){
            next();
        }else{
            next(false);
        }
    }

三.路由独享的守卫

 routes: [
        {
            path: '/',
            component: Index,
            name: 'index',
            children: [
                {
                    path: 'AA',
                    component: AA,
                    name: 'aa',
                    beforeEnter: (to, from, next) => {
                        if (to.path == '/DD') {
                            next()
                        } else {
                            alert('请登入');
                            next('/DD')
                        }
                    }
                }
            ]
        }
    ]

5.Vuex

详见下面链接
https://www.cnblogs.com/qlongbg/p/12145019.html

7.v-show 与 v-if 区别

1.v-show是css切换，v-if是完整的销毁和重新创建。
使用
2.频繁切换时用v-show，运行时较少改变时用v-if

6.keep-alive

https://cn.vuejs.org/v2/guide/components-dynamic-async.html#%E5%9C%A8%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94%A8-keep-alive

https://www.jianshu.com/p/9523bb439950

7.怎样理解单向数据流

这个概念出现在组件通信。父组件是通过 prop 把数据传递到子组件的，但是这个 prop 只能由父组件修改，子组件不能修改，否则会报错。子组件想修改时，只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改。
一般来说，对于子组件想要更改父组件状态的场景，可以有两种方案：
在子组件的 data 中拷贝一份 prop，data 是可以修改的，但 prop 不能：

export default {
  props: {
    value: String
  },
  data () {
    return {
      currentValue: this.value
    }
  }
}

如果是对 prop 值的转换，可以使用计算属性：

export default {
  props: ['size'],
  computed: {
    normalizedSize: function () {
      return this.size.trim().toLowerCase();
    }
  }
}

7.双向绑定原理

这个问题几乎是面试必问的，回答也是有深有浅。基本上要知道核心的 API 是通过 Object.defineProperty() 来劫持各个属性的 setter / getter，在数据变动时发布消息给订阅者，触发相应的监听回调，这也是为什么 Vue.js 2.x 不支持 IE8 的原因（IE 8 不支持此 API，且无法通过 polyfill 实现）。
https://cn.vuejs.org/v2/guide/reactivity.html

7.什么是 MVVM，与 MVC 有什么区别

http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html

7.nextTick()

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后，立即使用这个回调函数，获取更新后的 DOM。

// 修改数据
vm.msg = 'Hello'
// DOM 还未更新
Vue.nextTick(function () {
  // DOM 更新
})

7.vue的原理

https://segmentfault.com/a/1190000016434836

8.其他内容

https://www.cnblogs.com/skywind/p/14653339.html#46-active-class%E6%98%AF%E5%93%AA%E4%B8%AA%E7%BB%84%E4%BB%B6%E7%9A%84%E5%B1%9E%E6%80%A7
https://www.jianshu.com/p/3c1139f70e92

9.js缓存笔记

cookie：大小不能超过4k,可以设置时间,关闭窗口在有效时间内还有效果

sessionStorage：大小5M,关闭窗口就删除了

localeStorage：永久,大小5M,关闭窗口-直存在,只能手动清理,或者人工删除