Vue基础知识点(持续更新...)

1. v-model 的修饰符
        
        (1) lazy
        
                当用户使用v-model之后，用户每次修改输入内容，都会将后台的数据同时绑定，为了避 免这种情况的发生，使用lazy修饰符来进行限定只有当用户的input中失去焦点或者用点击回车按钮时，才会将后台的数据进行修改
                
        (2) number
                
                当用户在input中输入数字时，浏览器会默认将输入的数字转化为string类型，使number修饰符来将输入的数字转为number类型
                
        (3) trim
        
                用户可能输入的字符串中含有空格，这样系统在处理时可能会出现错误。使用trim修饰符 来去掉字符串首部或者尾部的所有空格

2. v-model表单数据双向绑定的实现原理

        v-model实际上是一个语法糖写法，其内部是v-bind 与 input 事件结合从而实现双向绑定，如 图所示：

3. v-if 和 v-show 的区别与适合的场景
    
        根据官网的解释：
            
            v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当 地被销毁和重建
            
            v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时才会开始渲染条件块
            
            相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简 单地基于 CSS 进行切换
            
            一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非 常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好
            
            注意，v-show 不支持 <template> 元素，也不支持 v-else

4. vue组件的data为什么必须是一个函数？

        vue的组件是高度复用的，所以保证自身数据（data）的独立性是必要的。

        对象是引用类型，如果将data写成对象，那么复用的组件的data都指向同一个地址，也就是说 同享一份data，这样带来的问题是当其中一个组件改变其data的时候，其他的组件的data也会发生变化，而这种情况显然是不可接受的。

        如果data是个函数，每次调用的时候都会返回新的一份数据，这样每个复用的组件都保持了数据的独立空间，互相不影响。

5. computed 与 methods 的比较

        computed是属性调用，methods是函数调用
        computed具有缓存功能，methods不具有

        computed是基于它们的依赖进行缓存的,只有在它的相关依赖发生改变时才会重新求值，所以 需要重复使用大量的数据时，显然computed性能高的多。computed的由来有一个重要原因，就是防止文本插值中逻辑过重，导致不易维护