Vue原理学习

1jQuery和Vue和区别

（1）数据和视图的分离（解耦，软件的开放封闭原则）

注：开闭原则：软件实体（模块、类、函数等）应该可以扩展，但是不可以修改。也就是说软件对扩展开放，对修改关闭。需要说明的是，对修改关闭不是说软件设计不能做修改，只是尽量不要做不必要的修改。怎么才能做到呢？那就是有相应的扩展性。其实，软件有相应的扩展性是好处，但是不能说每个地方都有扩展。反而造成了代码的臃肿。所以这里的扩展与修改关闭是有限制的。

（2）以数据驱动视图，只关心数据变化，dom操作被封装

2如何理解MVVM

MVC,MVVM

ViewModel 是连接view和model的桥梁，view通过事件绑定修改model，model通过数据绑定修改view。MVVM是对MVC的微创新，MVC是后端常用的架构模式。controllor变成了viewmodel

3MVVM的实现

（1）响应式：Vue如何监听到data中每个属性的变化的

（2）模板引擎:vue的模板如何被解析，指令如何被处理

（3）渲染：Vue的模板如何被渲染成HTML

4响应式的实现

将data属性代理到VM上，并且在获取与改变属性的时候，可以加上监听代码

5vue如何解析模板

模板本质：字符串。

有逻辑，比如v-if，v-show

最终要转化成js代码，通过render函数，HTML来显示

keep-alive

有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就可以用到keep-alive组件。

Watch概述

 watch: {
            num(newVal, oldVal) {
            // 监听 num 属性的数据变化
            // 作用 : 只要 num 的值发生变化,这个方法就会被调用
            // 第一个参数 : 新值
            // 第二个参数 : 旧值,之前的值
                console.log('oldVal:',oldVal)
                console.log('newVal:',newVal)
            }
        }

immediate（立即处理 进入页面就触发）

deep（深度监听）,对象和数组都是引用类型，引用类型变量存的是地址，地址没有变，所以不会触发watch。这时我们需要进行深度监听，就需要加上一个属性 deep，值为 true