day04

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 的简写