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的由来有一个重要原因,就是防止文本插值中逻辑过重,导致不易维护