1.Vue中computed和watch的区别Computational属性computed：1.支持缓存，只有依赖的数据发生变化才会重新计算。2.不支持异步，当computed中有异步操作时3.computed属性值默认会被缓存，computed属性是根据其响应依赖来缓存的，即根据声明在props中的数据计算dataorpassedbyparentcomponent4.如果一个属性是从其他属性计算出来的，这个属性依赖于其他属性，是多对一或者一对一的，一般使用computed5。如果计算属性的值是一个函数，那么默认使用get方法；函数的返回值是属性的属性值；在computed中，属性有一个get和一个set方法，当数据发生变化时，调用set方法。监听属性watch：1.不支持缓存，数据变化，直接触发相应操作；2.watch支持异步；3、监控函数接收两个参数，第一个参数为最新值；第二个参数是输入前的值；4.当一个属性发生变化时，需要进行相应的操作；一对多；5.监控数据必须是data中声明的props中的数据或者父组件传递过来的数据。当数据发生变化时，触发其他操作，该函数有两个参数， immediate：组件加载立即触发回调函数的执行， deep：深度监控，以发现内部值的变化对象的，当数据类型复杂时使用，例如在数组中对象的内容发生变化。注意不需要监听数组的变化。注意：deep无法监控数组的变化和对象的添加。参考vue数组mutation，响应式触发才会监听。监控对象也可以写成字符串的形式。2.vue-router路由钩子路由钩子主要用于拦截导航。在钩子中可以跳转到指定页面或者取消跳转。更改路由参数或查询不会触发导航守卫！.*可以通过watch观察$route对象来处理这些变化，或者使用beforeRouteUpdate组件来守卫。1.全局pre-guards1.1beforeEachrouter.beforeEach((to,from,next)=>{})当一个导航被触发时，全局pre-guards按照创建的顺序被调用。守卫异步执行，导航*等待*直到所有守卫解决。每个守卫方法接收三个参数：to：要去哪里（即将进入的路线）；from：从哪里来（即将离开的路线）；next：如果是next()，则完成跳转到to指令Routing；如果参数为false，导航将被取消；如果参数是地址或路由对象，则传递给指定的地址或对象。确保调用next方法，否则钩子将无法解析。*2.独享路由钩子2.1beforeEnterconstrouter=newVueRouter({routes:[{path:'/foo',component:Foo,beforeEnter:(to,from,next)=>{}}]})3.ComponentsRoutinghook3.1beforeRouteEnter,beforeRouteUpdate,beforeRouteLeavedata(){return{}},beforeRouteEnter(to,from,next){//在渲染组件的对应路由确定之前调用，无法获取组件示例，因为之前守卫已执行，组件的实例尚未创建。},beforeRouteUpdate(to,from,next){//路由改变时调用，但组件被复用。也就是说，当路由参数或查询发生变化时。//例子：对于一个动态参数路径/foo/:id，从/foo/1跳转到/foo/2时调用。由于将渲染相同的组件，因此组件实例将被重用。所以这个钩子会在这种情况下被调用。//可以访问组件this},beforeRouteLeave(to,from,next){//离开组件对应的路由时调用。//可以访问组件this}beforeRouteEnter不能访问this，但是可以通过给next传递一个回调函数来访问组件实例，回调会在确认导航时执行。并使用组件实例作为回调方法的参数。beforeRouteEnter(to,from,next){next(vm=>{//通过vm访问组件实例})}beforeRouteLeave通常用于防止用户在保存修改之前突然离开。next(false)可以取消导航。3、vue-router实现路由延迟加载在打包构建应用时，Javascript包会变得很大，影响页面加载。如果我们能把不同路由对应的组件分成不同的代码块，然后在路由访问时加载相应的组件，效率会更高。结合Vue的异步组件和Webpack的代码拆分功能，很容易实现路由组件的懒加载。1.定义 也叫懒加载，即需要的时候加载，需要的时候加载2.为什么需要 对于vue这样的单页应用，如果没有懒加载，打包的文件webpack会特别大，导致进入首页加载的内容太多，时间过长，会出现很长时间的白色。屏幕，即使加载完成，也不利于用户体验，而使用延迟加载可以分页，需要的时候加载页面，可以有效分担首页的加载压力，减少加载的时间主页，一次不加载就直接进入主页Toomanyresourcesaretakentoolonger.3、如何实现？(1)第一种写法：使用AMD风格的require，所以更简单：例子：constFoo=resolve=>require(['./Foo.vue'],resolve)constrouters=[{path:'/',name:'index',component:(resolve)=>require(['./views/index.vue'],resolve)}]（2）第二种写法：（使用import）例子：component:()=>import('@/components/Two')constIndex=()=>import(/*webpackChunkName:"group-home"*/'@/views/index')constrouters=[{路径：'/',name:'index',component:Index}](3)第三种写法：利用webpack独有的require.ensure()。注意：require.ensure是Webpack的一种特殊语法，用于设置代码分割点示例：components:r=>require.ensure([],()=>r(require('@/components/Three')),'group-home')constIndex=r=>require.ensure([],()=>r(require('./views/index')),'group-home');constrouters=[{path:'/',name:'index',component:Index}]4.Chunkcomponentsintogroups有时我们希望将路由下的所有组件打包在同一个异步chunk中。只需使用命名块，一种特殊的注释语法来提供块名称（需要Webpack>2.4）。constFoo=r=>require.ensure([],()=>r(require('./Foo.vue')),'group-foo')constBar=r=>require.ensure([],()=>r(require('./Bar.vue')),'group-foo')constBaz=r=>require.ensure([],()=>r(require('./Baz.vue')),'group-foo')constFoo=()=>import(/*webpackChunkName:"group-foo"*/'./Foo.vue')constBar=()=>import(/*webpackChunkName:"group-foo"*/'./Bar.vue')constBaz=()=>import(/*webpackChunkName:"group-foo"*/'./Baz.vue')Webpack将导入任何异步模块被分组到具有相同块名称的相同异步块中。5.注意第二种缩写形式是第三种常用的，'group-home'是按照groupblocks来打包组件，可以把多个组件放到这个group里。打包时，Webpack会将同一个chunk下的组件打包，所有的异步模块都打包到一个异步块中。Vuex总结--它是什么？它是什么？如何使用它？=====================================四、Vuex总结——它是什么？还有什么？如何使用？首先，Vuex是Statemanager1.为什么要用；首先，我们的vue是单向数据流；1、当我们处理大量数据时，传递参数的方式对于多层嵌套的组件来说非常繁琐，兄弟状态传递无能为力；2、我们经常使用父子组件直接引用或者使用事件来改变和同步多份状态；而且以上模式都非常脆弱，会造成代码不可维护；所以我们把组件的共享状态拿出来，用全局单例的方式管理。2.那里有什么；state：数据源存放位置，对应一般Vue对象中的数据；getter：相当于一个计算属性；因此，getter的返回值会根据它的依赖关系被缓存起来，只有当它的依赖关系的值改变时才会重新计算；mutation：只用于修改数据；action：多用于处理异步操作；模块：有时候我们应用的所有状态可能会集中到一个比较大的对象中。当应用复杂时，store会非常臃肿，所以我们将store分成模块，就像我们在文件夹中创建子文件夹一样；目的是方便管理。3、数据传递过程：当组件修改数据时，我们需要CallDispatch来触发actions中的方法。actions中的每个方法都有一个commit方法。方法执行时，commit会触发mutations中的方法修改数据。突变中的每个函数都有一个状态参数，以便可以在突变中修改状态数据。当数据被修改时，将要呈现给页面的数据也会发生变化。流程图（来自官网）：4.什么时候用？对于一些大型的SPA应用，当我们使用大量的数据处理，考虑如何在组件外部更好的管理状态时，可以考虑使用Vuex；
