Vue基础知识

Vue基础知识

  何为Vue?
  度娘的解释是，Vue是构建用户界面的渐进式JavaScript框架，而这个渐进式，网上有着很多中的解释，个人的理解是：Vue的核心功能，是一个视图模板引擎，因此其渐进性的含义：主张最少。所以他只是一个轻量视图而已，只做了自己该做的事情，没有做不该做的事情，仅此而已。

Vue的优点

   轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十KB；
   组件化: 保留了react的优点，实现了对html的封装和重用，在构建单界面的应用方面有着独特的优势；
   视图、数据、结构分离： 使数据的更改变得更加简单，不需要去进行逻辑层面的代码修改，只需要操作数据就能完成对应的操作；
   虚拟DOM： 在Vue中写html时，可以使用变量、循环的指令来编写，因为在Vue中有模板解析的函数，可以对html代码进行解析编译，从而转变成渲染的函数，渲染函数执行后变成了虚拟DOM树。当节点准备渲染带视图上面时，会和上一次的虚拟DOM节点树进行比较，只会渲染不同的部分，无需改动其他的节点状态，极大的提高了性能。

Vue的组件化

  Vue的组件提供了一种抽象的，让我们可以独立可复用的小组件来构建一些大型的应用。
   在Vue组件中，设计到组件间的传值和数据交互分为两种情况，父组件向子组件传递：父组件在标签中使用自定义的属性向子组件传值，子组件中使用prors对象来接受 （props是只读的对象，只能去读取属性的值，不能修改对象）； 子组件向父组件传递： 在子组件中不能修改传递过来的属性，必须通过this.$emit(父组件中的方法， 参数)方法来进行修改

常见指令

   v-model——双向数据绑定，其本质就是一个语法糖，内部有两个操作，v-bind绑定了一个value属性；v-on绑定了当前元素的input事件；
   v-on（@）——基础事件绑定 ， 事件处理程序放在methods里面；也可以一次绑定多个事件；

<button v-on="{mouseenter:onenter,mouseleave:leave}">click</button>

   v-once——绑定一次，通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新；

   v-bind（:）——响应式更新HTML特征， 需要动态决定标签的属性的时候 可以使用到v-bind；

   v-for——遍历data中存放的数组数据，实现列表的渲染，v-for指令除了可以迭代数组，还可以迭代对象和整数；

   v-if、v-else、v-show——控制元素的显示和隐藏

v-show和v-if指令的共同点和不同点

   共同点：都能控制元素的显示和隐藏；
   不同点：二者底层方法不同，v-show是通过样式中的display来设置，只会编译一次，v-if是动态的想DOM树中添加或者删除元素来实现，若初始值为false，则不会编译。
   总结：若果要频繁的切换某个节点，使用v-show，否则使用v-if。（初始渲染的开销较小，而频繁切换的开销大）

vue-loader

  Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件；它可以将template/js/style转换成js模块。实际用途： 在JS中可以写es6、style样式可以scss或less、template可以加jade等；

Vue中的key

   Vue中的key是用于管理一些可复用的元素，在2.2.0+的版本里，但组件元素中使用v-for循环时，必须为该元素包含一个key属性，实际的意义是为了给节点添加一个唯一的标识，更高效更新虚拟DOM;

vue组件中data为什么必须是一个函数?

   一方面是受到avaScript的特性限制，在组件中，data必须以函数的形式存在，不能是一个对象；
   另一方面是为了不引起数据混乱，在组件中数据已函数返回值的形式定义，这样每次去复用组件的时候都会返回一份新的data，就相当于每个组件的实例都会有自己私有的数据空间，他们只用负责各自维护的数据即可，不会造成混乱；

Vue中双向数据绑定是如何实现的？

   vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式 的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；
   核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法。

Vue中的MVVM

   MVVM就是Model-View-ViewModel
  Model就是数据模型（亦指数据层）可以是我们固定死的数据，也可以是来自服务器请求来的数据。
  View就是页面DOM（亦指视图层）主要就是向用户展示信息的。
  ViewModel 在vue中就是指vue实例（亦指数据模型层）充当View与Model之间通信的桥梁。

• 首先ViewModel通过Data Bindings让Model中的数据实时的在View(DOM)中显示。

• 其次ViewModel通过DOMListener来监听DOM事件(点击，滚动等)，并且通过methods中的操作，来改变Model中的数据。

   简单来说Model 是数据, data；View 是模板、DOM元素；VM 是 vm = new Vue();

assets和static的区别

   相同点：assets和static两个都是存放静态资源文件。项目中所需要的资源文件图片，字体图标，样式文件等都可以放在这两个文件下，这是相同点
   不相同点：assets中存放的静态资源文件在项目打包时，也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传，所谓打包简单点可以理解为压缩体积，代码格式化。而压缩后的静态资源文件最终也都会放置在static文件中跟着index.html一同上传至服务器。static中放置的静态资源文件就不会要走打包压缩格式化等流程，而是直接进入打包好的目录，直接上传至服务器。因为避免了压缩直接进行上传，在打包时会提高一定的效率，但是static中的资源文件由于没有进行压缩等操作，所以文件的体积也就相对于assets中打包后的文件提交较大点。在服务器中就会占据更大的空间。
   建议：将项目中template需要的样式文件js文件等都可以放置在assets中，走打包这一流程。减少体积。而项目中引入的第三方的资源文件如iconfoont.css等文件可以放置在static中，因为这些引入的第三方文件已经经过处理，我们不再需要处理，直接上传。

vue常用的修饰符

• .stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡；
• .prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）；
• .capture：与事件冒泡的方向相反，事件捕获由外到内；
• .self：只会触发自己范围内的事件，不包含子元素；
• .once：只会触发一次。

vue初始化页面闪动问题

   使用vue开发时，在vue初始化之前，由于div是不归vue管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于{{message}}的字样，虽然一般情况下这个时间很短暂，但是我们还是有必要让解决这个问题的。
   只需在css里加上 [v-cloak] {display: none;}
   如果没有彻底解决问题，则在根元素加上style=“display: none;” :style="{display: ‘block’}"