vue相关知识总结

1.组件的data为什么必须是函数？

组件中的 data 写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的 data ，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个组件的值发生改变，全部组件都会变的结果。

这样的好处就是每各个组件可以维护各自的数据，如果 data 是一个对象则会影响到其他组件。

2. v-if 和 v-show
   相同点：v-if与v-show都可以动态控制dom元素显示隐藏
   不同点：v-if隐藏是将dom元素整个删除，而v-show隐藏则是为该元素添加css–display:none，dom元素还在。

3. vue几种常用的指令

v-text:元素的innerText属性（不带标签）
v-html:元素的innerHTML属性（带标签）
v-bind:绑定属性
v-on:绑定事件，绑定的事件从methods中获取

事件修饰符
.stop:阻止冒泡，调用 event.stopPropagation()
.prevent:阻止默认事件，调用 event.preventDefault()
.capture:添加事件侦听器时使用事件捕获模式

v-model
作用：在表单元素上创建双向数据绑定
说明：监听用户的输入事件以更新数据

所谓的双向绑定，就是你在view视图层里面改变了值，vue里面对应的值也会改变。只能给具备value属性的元素进行双向数据绑定。

v-if 和 v-show
条件渲染
v-if：根据表达式的值的真假条件，销毁或重建DOM元素
v-show：根据表达式之真假值，切换元素的 display: block/none 属性

v-for
作用：基于源数据多次渲染元素或模板块，使用 v-for 的时候提供 key 属性，可以提高列表渲染的效率，提高页面的性能。

v-once 提升性能
说明：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

4. 对于Vue是一套渐进式框架的理解

Vue.js是一个渐进式框架，只需要具备基本的HTML/CSS/JavaScript基础就可以快速上手。在用Vue.js构建大型应用时推荐使用NPM安装，但是需要注意npm的版本需要大于3.0。

在通过npm安装项目后，我们需要对其目录进行解析：
（1） build：项目构建（webpack）相关代码;
（2） config：配置目录，包括端口号等。
（3） node_modules：npm加载的项目依赖模块
（4） src：这个目录当中的内容包含了我们基本上要做的事情，这里包含了几个文件：
（一）assets：存放图片
（二）components：存放组件文件
（三）App.vue：项目入口文件，组件也可以直接写在这里不适用components
（四）main.js：核心文件
（5） static：静态资源目录
（6） test：初始测试目录
（7） .xxxx：配置文件，包括git配置和语法配置等
（8） index.html：首页
（9） package.json：项目配置文件
（10） README.md：说明文档

Vue的mvvm框架给了前端一种思路：完全基于数据驱动，帮助你从繁杂的dom操作中解脱出来

使用Vue的过程就是定义MVVM各个组成部分过程的过程：
（1） 定义View
（2） 定义Model
（3） 创建一个Vue实例或“ViewModel”

在创建Vue实例的时候，需要传入选项对象，可以包含挂载元素、数据等。

Vue实例被创建前会经过初始化，然后在数据变化时更新DOM，在这个期间也会调用一些生命周期钩子，从而我们可以自定义逻辑。总共可以分为8个段：

（1） beforeCreate 初始化实例后 数据观测和事件配置之前调用
（2） created 实例创建完成后调用
（3） beforeMount 挂载开始前被用
（4） mounted el被新建vm.$el替换并挂在到实例上之后调用
（5） beforeUpdate 数据更新时调用
（6） updated 数据更改导致的DOM重新渲染后调用
（7） beforeDestory 实例被销毁前调用
（8） destoryed 实例销毁后调用

需要注意的是created和mounted的区别，created是实例已经创建但未挂载，所以一些dom操作要放在mounted中。

Vue组件的API来自props（允许外部环境传递数据给组件）、events（允许组件触发外部环境副作用）和slots（允许外部环境将额外的内容组合在组件中）三个部分，组件的data属性必须是函数。

渐进的理解：vue只是个轻量视图而已，只做自己该做的事，不做不该做的事。

5. vue中使用 v-for 绑定key可以提高列表渲染的效率，提升页面的性能。

6. v-for 与 v-if 的优先级

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中，所以，不推荐v-if和v-for同时使用。