12. 什么是 mvvm 模式?
vue 是一个 mvvm 模式的框架
m 就是模型 model 在 vue 中指数据
v 就是 view 视图
vm 是 view-model 控制器 在 vue 中就是 vue 实例
视图变了数据会变,数据变了视图会变,这中间就是 vm 在控制
除了 mvvm 模式之外 还有 mvp 和 mvc 模式
MVVM 模式的优点:
1、低耦合: 视图(View)可以独⽴于 Model 变化和修改,⼀个 ViewModel 可以绑定到不同的"View"上,当 View 变化的时候 Model可以不变,当 Model 变化的时候 View 也可以不变。
2、可重⽤性:你可以把⼀些视图逻辑放在⼀个 ViewModel ⾥⾯,让很多 view 重⽤这段视图逻辑。
3、独⽴开发:开发⼈员可以专注于业务逻辑和数据的开发(ViewModel),设计⼈员可以专注于⻚⾯设计。
4、可测试:界⾯素来是⽐较难于测试的,⽽现在测试可以针对 ViewModel 来写。
MVVM 和 MVC 的区别:
mvc 和 mvvm 其实区别并不⼤。都是⼀种设计思想。
主要区别
mvc 中 Controller 演变成 mvvm 中的 viewModel,
mvvm 通过数据来显示视图层⽽不是节点操作。
mvvm 主要解决了:
mvc 中⼤量的 DOM 操作使⻚⾯渲染性能降低,加载速度变慢,影响⽤户体验。
13. vue 双向数据绑定原理?
vue.js 是采⽤数据劫持结合 发布者-订阅者 模式的⽅式,通过 Object.defineProperty() 来劫持各个属性的 setter , getter ,在数据变动时发布消息给订阅者,触发相应的监听回调。这个时候就可以实现数据的双向绑定。
Object.defineProperty 是对象的一个方法,当添加或者修改属性的时候会触发,第一个参数是目标对象,第二个参数是要修改的属性,第三个参数是配置项,可以是 value 和 writeable 等选项,也可以是 get 和 set 函数
get 是获取值的时候触发 需要 return 一个值就是这个属性的值
set 是修改值的时候触发 有一个默认参数就是修改后的值
Object.defineProperty 的缺点是:对于新添加的属性检测不到
解决的方法 this.$set
14. vue 如何封装可复⽤的组件?以及请举例说明你封装过的组件?
1. 根据项目需求合理规划子组件(是封装一个页面还是一个页面多个子组件 具体情况具体分析)
2. 定义 components 文件夹,定义子组件
3. 引入、注册、作为标签使用
4. 合理使用插槽和组件通信,保证子组件的封闭性和开发性(有些东西是固定的,有些东西是动态的就需要插槽或者组件通信设置)
5. 举例:
封装头部子组件 标题部分用插槽
封装列表子组件 商品数据通过父传子传递
导航子组件 数据通过父传子传 点击事件通过子传父实现
15. vue 中 key 的作⽤是什么
在用 for 循环的时候用 key 值,为了避免元素重复渲染,在设置 key 值的时候一般设置为 id 等唯一的值。
比如说循环 1-5 在 3 的后面插入一个 a 如果没有 key 值,那么从 a 开始 a 4 5 都要重新渲染 如果有 key 值,只会渲染 a ,所以有 key 值能提高循环效率
16.说⼀下 vue 和 jquery 的区别?
⾸先呢 jquery 他是⽤ js 封装的⼀个类库,主要是为了⽅便操作 dom 元素,⽽ vue 他是⼀个框架,并且呢,他会从真实 dom 构建出⼀个虚拟的 dom 树,通过 diff 算法渲染只发⽣改变的 dom 元素,其他的相同的 dom 元素不⽤在重新渲染。⽽使⽤ jquery 去改变 dom 元素的时候,即使有相同的 dom 元素也会重新渲染,以上就是我对 vue 和 jquery 区别的理解.
17. vue 中 data 发⽣变化,视图不更新如何解决?
给对象或者数组新添加的属性不是响应式的,是因为 vue 的双向数据绑定的原理是 Object.defineProperty,由于这个方法的限制无法检测到属性的新增和删除,不会响应到视图上。解决方法就是用 Vue.set / this.$set ,在组件里就用this.$set ,在 js 文件里用 Vue.set
第一个参数是目标对象,第二个参数是要添加的属性,第三个是初始值
18. 为什么 vue 中 data 必须是⼀个函数?
如果 data 是⼀个函数的话,这样每复⽤⼀次组件,就会返回⼀份新的 data,类似于给每个组件实例创建⼀个私有的数据空间,让各个组件实例维护各⾃的数据。⽽单纯的写成对象形式,就使得所有组件实例共⽤了⼀份 data,就会造成⼀个变了全都会变的结果。
所以说 vue 组件的 data 必须是函数。这都是因为 js 的特性带来的,跟 vue 本身设计⽆关。
19.说⼀下什么是 vue 过滤器? 有⼏种?项⽬中如何使⽤,请举例说明?
所谓的 vue 过滤器就是将数据进⾏⼆次处理,得到我们想要的结果数据。
vue 的过滤器分为两种,第⼀种是全局过滤器,通过 vue.filter 来进⾏定义;第⼆种是局部过滤器,需要定义在组件内部
举例:项⽬中我们通过过滤器将后台返回的状态 0 和 1 ,转化为⽀付或者未⽀付。
20. 怎样理解 Vue 的单向数据流?
数据总是从⽗组件传到⼦组件,⼦组件没有权利修改⽗组件传过来的数据,只能请求⽗组件对原始数据进⾏修改。这样会防⽌从⼦组件意外改变⽗级组件的状态,从⽽导致应⽤的数据流向难以理解。
注意:在⼦组件直接⽤ v-model 绑定⽗组件传过来的 prop 这样是不规范的写法,开发环境会报警告。
如果实在要改变⽗组件的 prop 值,可以在 data ⾥⾯定义⼀个变量,并⽤ prop 的值初始化它,之后⽤$emit 通知⽗组件去修改
还有一个方法:修饰符sync可以在子组件里用emit 修改父组件传来的值,在父组件传值的时候加上这个修饰符就行了
这个修饰符其实是一个语法糖,就是:num @update:num 的简写