Vue中的经典问题1

【为什么在大型项目中data是一个函数而不是一个对象】  

组件是一个可复用的实例,当你引用一个组件的时候，组件里的data是一个普通的对象，所有用到这个组件的都引用的同一个data，就会造成数据污染。

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

【我们在使用v-for时，给对应的元素或组件添加上一个:key属性。

为什么需要这个key属性呢（了解）】

 Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做可以使 Vue 变得非常快。但是有些时候，我们却不希望vue复用，这时候Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key

比如：

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

如果想要删除2，vue通常不会直接删除2，会把2变成3，3变成4，最后剩余一个没有内容的li，再把li删除，这就是复用

因此：

因为vue会高效复用组件 很多时候我们不希望这样去做

所以会给节点添加一个唯一值 key

【 v-show 与 v-if 的区别】

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

 如何优化你得vue项目?提升项目性能? 

    1.较少控制台得打印
    2.减少异步请求
    3.较少dom操作 上层核心减少dom操作
    4.尽可能不去一起v-if v-for
    5.项目图片使用雪碧图/精灵图
    6.正确是用vue指令
    7.使用loading加载动画
    8.动态组件使用keep-alive缓存
    9.区分v-if和v-show使用场景
    10.不滥用定时器 尽可能使用别得方式处理
    11.不滥用得全局变量/全局资源.....
    12.使用得第三方框架/工具库 如果方法使用得少 我们自己封装
        lodash underscore js简化工具库
        防抖和节流
    13.组件库组件按需引入......
    14.谨慎使用全局混入