vue总结

vue路由守卫

router.beforeEach((to, from, next) => {
   next();
});
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子

vue实现双向绑定原理

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，
           第fa   趴破题
通过Object.defineProperty（）来劫持各个属性,在数据变动时发布消息给订阅者，触发相应监听回调

Vue生命周期：

beforeCreate:组件实例刚被创建，组件属性计算之前，如data属性等。
          A特
create:组件实例创建完成，属性已经绑定，但dom还未生成，$el属性还不存在

beforeMount：开始挂载变异生成的HTML到对应位置时触发的钩子函数(模板编译/挂载之前)
        
mounted:模板编译/挂载之后(不保证组件已在document中)此时可以进行发送ajax请求获取数据的操作，
进行数据初始化(mounted在整个实例生命内只执行一次)

BeforeUpdate：将编译好的html替换掉el属性所指向的dom对象或替换对应html标签里面的内容(组件更新之前)

Update:组件更新之后

BeforeDestroy：组件销毁前调用
       帝私掘
Destroyed:组件销毁后调用

vue跨域方式

               praksi     梅了未儿
使用http-proxy-middleware 代理解决
打开config/index.js,在proxyTable中添写如下代码：

proxyTable: { 
  '/api': { 
    target: '填写请求源地址', //源地址 
    changeOrigin: true, //是否跨域
    pathRewrite: { 
      '^/api': '' //路径重写 
      } 
  } 
}

vue-router实现原理

Hash模式:hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，
因此改变 hash 不会重新加载页面,后面会携带#号

History模式: 提供了2个API   history.pushState与history.replaceState

vue-router 生命周期

beforeRoute Enter开始(to, from, next) { }  to从....  from 到....   next必须的使用的回调函数
beforeRoute Update更新 (to, from, next){ }
beforeRoute Leave离开 里屋 (to, from, next){ }
三个参数：

to: Route: 即将要进入的目标 路由对象

from: Route: 当前导航正要离开的路由

next: Function: 一定要调用该方法来 resolve 这个钩子

MVC和MVVM区别

MVVM定义: MVVM是Model-View-ViewModel的简写。模型-视图-视图模型。
【Model-】指的是模型。
【View】指的是视图也就是所看到的页面。
【ViewModel】mvvm模式的核心，监听模型数据的改变和控制视图行为
 简单理解就是一个同步View 和 Model的对象，连接Model和View

MVC定义:  MVC是Model View Controller，是模型(Model)－视图(View)－控制器(controller)的简写，
【Model-】指的是模型。
【View】指的是视图也就是所看到的页面。
【controller】接受用户的输入并调用模型和视图去完成用户的需求，
控制器不做任何处理。它只是接收请求并决定调用哪个模型去处理请求，然后再确定用哪个视图来显示返回的数据

MVC.PNG

MVC定义:  MVC是Model View Controller，是模型(model)－视图(view)－控制器(controller)的简写，

MVVM.PNG

什么是<keep-alive>

<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
<keep-alive> 与 <transition>相似，只是一个抽象组件，
它不会在DOM树中渲染(真实或者虚拟都不会),也不在父组件链中存在比如：你永远在 this.$parent 中找不到 keep-alive 

结合router，缓存部分页面 使用$route.meta的keepAlive属性

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive"></router-view>

在router页面meta判断
export default new Router({
  routes: [
    {
      path: '/Hello',
      name: 'Hello',
      component: Hello,
      meta: {
        keepAlive: false // 不需要缓存
      }
    },
    {
      path: '/page1',
      name: 'Page1',
      component: Page1,
      meta: {
        keepAlive: true // 需要被缓存
      }
    }
  ]
})

   (1) 在Page1页面输入框输入“asd”，然后手动跳转到Hello页面；

　　(2) 回到Page1页面发现之前输入的"asd"依然保留，说明页面信息成功保存在内存中；

　　当然，也可以通过动态设置route.meta的keepAlive属性来实现其他需求，
  
*   首页是A页面
*   B页面跳转到A，A页面需要缓存
*   C页面跳转到A，A页面不需要被缓存

　　思路是在每个路由的`beforeRouteLeave(to, from, next)`钩子中设置`to.meta.keepAlive`：

　　A的路由：


  {
    path: '/A页面',
    name: 'A页面',
    component: 'A页面,
    meta: {
        keepAlive: true // 需要被缓存
  }
}


  {
    data() {
        return {   };
    },
    methods: { },
    beforeRouteLeave(to, from, next) { // 设置下一个路由的 meta
        to.meta.keepAlive = true;  // B 跳转到 A 时，让 A 缓存，即不刷新
 next();
    }
}


export default {
    data() {
          return {
             };
      },
    methods: {},
    beforeRouteLeave(to, from, next) { // 设置下一个路由的 meta
        to.meta.keepAlive = false; // C 跳转到 A 时让 A 不缓存，即刷新
 next();
    }
};

vue登录怎么做
用户输入账号
密码
我们会再

vue 自定义指令

// 自定义全局指令
Vue.directive('tack', { 自定义属性名称
    inserted: function (el) {  el来获取当前元素的标签
        el.style.position='fixed'   设置样式
    }
});

根据这个指令HTML就是这样的：
<p v-tack>This element has a directive on it</p>

*   `bind`：只调用一次，指令第一次绑定到元素时调用。
*   `insert`：被绑定元素插入父节点时调用。
*   `update`：所在组件的 VNode 更新时调用，但是可能发生在其子元素的 VNode 更新之前。
*   `componentUpdated`：所在组件的 VNode 及其子元素的 VNode 全部更新时调用。
*   `unbind`：只调用一次，指令与元素解绑时调用。

webpack配置

vue计算属性computed

vue 过滤器 filter

VueX
rem 元素高度 HTML的font-size * rem

cookie

项目遇到的问题

300毫秒延迟
移动端1PX

首页加载过慢用什么解决

通过路由的懒加载 component: () => import('@/views/film/children/list'),

前端的安全