前端vue知识点总结

---

1. vue是单页面还是多页面，分别有哪些优缺点。

(1) vue是单页面
(2) 优点:
    ①良好的交互体验。因为是局部渲染，每个部分是单独的模块。避免了不必要的跳转和重复渲染；
    ②前后端分离。提高开发效率，而且架构清晰。
    ③减轻服务器的压力。服务器只需要提供数据，不需要管前端逻辑和页面渲染，提高了性能。
(3) 缺点:
     ①可能出现首屏加载时间过长的问题
             因首屏加载时间过长导致白屏，如何解决？
        1) 使用loading动画
             白屏时显示转圈的动画，数据请求完毕时隐藏动画，显示页面。
        2)可以利用骨架屏效果
             将最终需要显示的页面简化，编写出简化版的布局，数据请求完毕时隐藏骨架，显示页面。
        3)可以使用nuxt服务端渲染技术，减少浏览器压力。
     ②对SEO并不友好
        搜索引擎的爬虫的原理就是抓取的url，然后获取html源代码并解析。而对于vue来说，爬虫获取到的html是模型页面而不是最终数据的渲染页面。
        可以使用nuxt框架解决seo问题。

2. 谈谈你对MVVM开发模式的理解

首先MVVM可以表示Model、View、ViewModel。
      Model：表示数据模型层，其数据和业务逻辑都在Model层中定义；
      View：表示视图层，负责数据的展示；
      ViewModel：负责监听Model中数据的改变并且控制视图的更新，用于处理用户交互操作；
      其实M和V并无直接关联，而是通过VM来进行联系的，M和VM之间存在着双向数据绑定的联系。因此当M中的数据改变时会触发V层的刷新，V中由于用户交互操作而改变的数据也会在M中同步。

3. Vue常见指令有哪些？

1. v-html 解析html阶段，该指令后面往往会跟上一个string类型,会将string的html解析出来并且进行渲染。
2. v-if 与v-else 搭配使用，可以实现条件渲染，Vue会根据表达式的值的真假条件来渲染元素。
3. v-show 根据条件展示元素。
4. v-for 根据遍历数组来进行渲染。
   注意：当v-for和v-if同处于一个节点时，v-for的优先级比v-if更高，这意味着v-if将运行在每个v-for循环中。
5. v-bind 用来动态的绑定一个或者多个属性。在没有参数的情况下，可以绑定到一个包含键值对的对象。常用于动态绑定class、style和href。v-bind可以简写为":"。
6. v-model 用于表单上的双向数据绑定。他有三个修饰符：
   (1) .lazy：表示v-model由原来的input触发转成change事件触发；
   (2) .number：将当前输入框的输出值自动转成number类型；
   (3) .trim：将输出值前后的空格消除掉；
7. v-on主要用来监听dom事件。可以简写为"@"，搭配使用的事件修饰符。

4. v-show 与 v-if 的区别

1.v-show 不支持 v-else。
2.v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
3.v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
4.v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做；直到条件第一次变为真时，才会开始渲染条件块。
5.v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变(单一)，则使用 v-if 较好。
6.v-if对应的是元素的添加或者删除，满足条件添加元素，不满足条件删除当前的元素。
7.v-if的使用场景：条件单一，只想展示当前的一个元素。
8.v-show使用了v-show的元素对应的是css样式display,满足条件对应的是display中的block，不满足条件对应的是display中的none。
9.v-show的使用场景：用于频繁的切换CSS样式。

5. 简述Vue的响应式原理

        当一个Vue实例创建时，vue会遍历data选项的属性，用 Object.defineProperty 将它们转为getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。 每个组件实例都有相应的watcher程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。

6. 实现双向数据绑定

1. 什么是双向数据绑定：
           当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化，即视图修改 => viewModel => model修改数据，model数据改变 => viewModel => view视图更新

2. Vue实现数据双向绑定的原理：Object.defineProperty()
           vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

3. 总结：对于vue的数据双向绑定是将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令(vue中是用来解析 {undefined{}})，最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化(input)—>数据model变更双向绑定效果。双向数据绑定参考

7. 为什么在大型项目中data是一个函数而不是一个对象?

       组件是一个可复用的实例，当你引用一个组件的时候，组件里的data是一个普通的对象，所有用到这个组件的都引用的同一个data，就会造成数据污染。 而且不使用return包裹的数据会在项目的全局可见，会造成变量污染；使用return包裹后数据中变量只在当前组件或作用域内中生效，不会影响其他组件。
       当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。

//1、在简单的vue实例中看到的Vue实例中data属性，如下所示：
  <script>
	  let vm=new Vue({
	      el:'',
	      data:{},//数据可以直接挂在vue实例上
	      methods:{}
	  })
  </script>
//2、在使用组件化的项目中，如下所示：
//每一个vue文件中都对应一个vue实例
//该vue实例的构造函数参数由当前页面的export default提供
  <script>
	  export default{
	      data(){
	         return {}
	      },
	      methods:{}
	  }
  </script>

8. Vue中如何监听某个属性值的变化？

比如现在需要监听 data 中 obj.a 的变化。

1. 使用watch监听器：

	watch: {
	      obj: {
	      handler (newValue, oldValue) {
	        console.log('obj changed')
	      },
	      deep: true;
	      }
    }

       这里的 deep 属性表示深度监听，深度监听会监听到obj的所有属性的变化，这并不是我们想要的效果，所以需要做如下修改：

watch: {
   'obj.a': {
      handler (newName, oldName) {
        console.log('obj.a changed')
      }
   }
  }

2. 可以通过 computed 计算属性来实现，当依赖改变时，便会重新计算一个新值。

	computed: {
	    a1 () {
	      return this.obj.a
	    }
	}

9. computed和watch的区别

        computed主要用于对同步数据的处理，watch则主要用于观测某个值的变化去完成一段开销较大的复杂业务逻辑.
(1) computed：
    1.支持缓存，只有依赖数据发生改变，才会重新进行计算;
    2.不支持异步，当computed内有异步操作时无效，无法监听数据的变化;
    3.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过的数据通过计算得到的;
    4.如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed;
    5.如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。
(2) watch
    1.不支持缓存，数据变，直接会触发相应的操作；
    2.watch支持异步;监听值的变化，执行异步操作【axios请求】
    3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
    4.当一个属性发生变化时，需要执行对应的操作；一对多；
computed 和 watch 两者应用场景：
　当一个属性受多个属性影响的时候就需要用到computed，比如购物车商品结算。
　当一条数据影响多条数据的时候就需要用watch，比如搜索数据。

10. 路由的实现：hash路由和history路由的区别

1.hash路由在地址栏URL上有#，而history路由没有#，并且更精简;
2.进行回车刷新操作，hash路由会加载到地址栏对应的页面，而history路由一般就404报错了;(刷新是网络请求，history路由需要后端支持）。
3.hash路由支持低版本的浏览器，而history路由是HTML5新增的API。
4.hash的特点在于它虽然出现在了URL中，但是不包括在http请求中，所以对于后端是没有一点影响的，所以改变hash不会重新加载页面，所以这也是单页面应用的必备。
5.history运用了浏览器的历史记录栈，之前有back,forward,go方法，之后在HTML5中新增了pushState（）和replaceState（）方法（需要特定浏览器的支持），它们提供了对历史记录进行修改的功能，不过在进行修改时，虽然改变了当前的URL，但是浏览器不会马上向后端发送请求。

11. 事件冒泡以及如何阻止事件冒泡

         首先，以click点击事件为例。假如我们有一个多层结构的标签。比如说有4个div嵌套。每个div都有点击的监听事件，分别输出1234。当我们点击最里面的div时，点击事件开始传递，传递的全过程是1-2-3-4-4-3-2-1。对于前半部分，事件从最外面的父div依次传递到最里面的后代div，1-2-3-4这部分我们叫捕获过程。之后事件又从最里层的后代div逐层传出，4-3-2-1这部分我们叫冒泡过程。
         使用 event.stopPropagation() 起到阻止捕获和冒泡阶段中当前事件的进一步传播。使用 event.preventDefault() 可以取消默认事件。
     1. 当需要停止冒泡行为时，可以使用

	function stopBubble(event) { 
	//如果提供了事件对象，则这是一个非IE浏览器 
	if ( event && event.stopPropagation ) 
	    //因此它支持W3C的stopPropagation()方法 
	    event.stopPropagation(); 
	else 
	    //否则，我们需要使用IE的方式来取消事件冒泡 
	    window.event.cancelBubble = true; 
	}

     2. 当需要阻止默认行为时，可以使用

	//阻止浏览器的默认行为 
	function stopDefault( event ) { 
	    //阻止默认浏览器动作(W3C) 
	    if ( event && event.preventDefault ) 
	        event.preventDefault(); 
	    //IE中阻止函数器默认动作的方式 
	    else 
	        window.event.returnValue = false; 
	    return false; 
	}

        阻止事件冒泡参考

12. Vue组件之间如何传值 组件通信

        组件通信的三种方式：父传子、子传父、兄弟组件传值
   总结：
       父组件传给子组件：子组件通过props方法接受数据;
       子组件传给父组件：$emit方法传递参数
       兄弟组件传值：创建一个事件中心eventBus，类似于中转站，可以用它来传递事件和接收事件。

13. 简述keep-alive

        定义： keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。
        作用： 在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。
        被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated(在组件激活时调用) 与 deactivated(在组件停用时调用)。
        使用案例：

	<!-- 逗号分隔字符串，只有组件a与b被缓存。 -->
	<keep-alive include="a,b">
	  <component></component>
	</keep-alive>
	<!-- 正则表达式 (需要使用 v-bind，符合匹配规则的都会被缓存) -->
	<keep-alive :include="/a|b/">
	  <component></component>
	</keep-alive>
	<!-- Array (需要使用 v-bind，被包含的都会被缓存) -->
	<keep-alive :include="['a', 'b']">
	  <component></component>
	</keep-alive>

14. vue-loader是什么？

        定义： vue文件的一个加载器，将template /js /style转换成js模块。
        用途： js可以写es6、style样式可以scss或less、template可以加jade等

15. route和router 的区别

        router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。
        route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等

13.Vue打包

(一) 打包vue项目步骤：

1. 对当前vue项目进行打包的命令如下：npm run build；
2. 打包完成，会输出Build complete并且在vue项目中生成一个名字为dist的打包文件。

(二) 使用静态服务器工具包发布打包的vue项目

1. 首先安装全局的serve：npm install -g serve;
2. 在项目中输入运行命令：serve + 打包文件名，比如serve dist;
3. 使用浏览器访问上图中输出的地址。

14. Vue2和vue3区别

        vue3
        vue2和vue3的区别