初识vue及vue响应式原理

前端框架和Vue简介

为什么要有框架？

C/S架构软件 → B/S架构软件

大约2012年之前，client 客户端 / server软件，安装exe软件

大约2012年之后，browser 浏览器 / server软件

所以前端框架应运而生。

Vue这样的框架，最最擅长的就是B端的开发，生而为开发B/S架构软件。

框架发展历史

2009年，Angular诞生，Google开发的，国内用的非常非常少；

2012年，React诞生，Facebook开发的，国内20%市场份额；

2014年，Vue诞生，尤雨溪开发的，国内80%市场份额。

Vue简介

Vue作者：尤雨溪
Vue官网：http://cn.vuejs.org

Vue是一个渐进式的前端开发框架。

• 渐进式（Progressive）：循序渐进，可大可小，可繁可简，随意取用。

• 框架（framework）：有自己的世界观、方法论，独特的API、语法、使用技巧。基于javascript脚本语言，进行一系列的封装，制定了一系列的规范，开发人员遵循规范，帮助我们提高开发效率。框架更大，Angular是框架、React是框架、Vue是框架。库、包（library）更小，jQuery是库、swiper是库。

Vue框架编程风格：

• 数据驱动：数据变化了，视图自动变化。我们必须要花精力操作DOM，不需要花精力考虑视图如何更改，只需要关注数据。数据变化了，Vue会帮我们完成视图的变化。比如有一个数组，我们写了循环创建了li标签，当数组中多了一项，新的li标签自动创建。

• 声明式：

  原来的DOM编程叫做命令式：

  **.起立()
  

  Vue叫做声明式：

  <** 起立="a==5" 睡觉="a % 2 == 1" />
  <button @click="a=5">让**起立</button>
  

​ 声明式就是把这个HTML元素对数据有什么反应，明明白白的声明到HTML标签身上，一目了然。

• 组件化：分页条、日期范围条、弹出层等等都可以被大量复用，所以就要封装为组件。

Vue版本

• Vue2（目前主流，2023年年底就不维护了）
• Vue3（2023年开始会逐步取代Vue2，它的语法兼容Vue2）

初体验vue

最震撼人心的不是语法，而是声明式、数据驱动的编程风格。

数据驱动指的是：只关心数据，不关心视图。Vue帮我们自动更新视图。

Vue学习的五个模块

Vue从设计角度来讲，虽然能够涵盖这张图上所有的东西，但是你并不需要一上手就把所有东西全用上，都是可选的。

声明式渲染和组件系统是Vue的核心库所包含内容。

而路由（Vue-Router）、状态管理（Vuex或者pinia）、构建工具（webpack/vite）都有专门解决方案。这些解决方案相互独立，我们可以在核心的基础上任意选用其他的部件（以插件形势使用），不一定要全部整合在一起。

Vue全家桶：Vue、Vue-Router、Vuex（或者pinia）、webpack（或者vite）、vue-lazyload……

MVVM模式

• Model：数据模型，指的是后端传递的数据。

• View：视图，将Model的数据以某种方式展示出来。

• ViewModel：视图模型，数据的双向绑定（当Model中的数据发生改变时View就感知到，当View中的数据发生变化时Model也能感知到），是MVVM模式的核心。ViewModel 层把 Model 层和 View 层的数据同步自动化了，解决了 MVP 框架中数据同步比较麻烦的问题，不仅减轻了 ViewModel 层的压力，同时使得数据处理更加方便——只需告诉 View 层展示的数据是 Model 层中的哪一部分即可。

响应式原理

vue2的defineProperty

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。

这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。

// 如何知道一个对象的属性值发生变化了？
// JavaScript提供了原生的能力，数据劫持
// 方法1：Object.defineProperty()。就是Vue2的底层原理。
// 方法2：Proxy代理，ES6新增的技术。就是Vue3的底层原理。

// 现在演示方法1：Object.defineProperty()
let obj = {
    a: 123
};

// 让a变为响应式的
defineReactive(obj, 'a');

// 让数据变为响应式
function defineReactive(obj, keyname) {
    let temp = obj[keyname];
    // 数据劫持
    Object.defineProperty(obj, 'a', {
        // getter
        get: function() {
            console.log('试图读取');
            return temp;
        },
        // setter
        set: function(v){
            console.log('试图设置');
            temp = v;
        }
    });
}

vue3的Proxy

vue 3是通过proxy直接代理整个对象来实现的，而不是像Object.defineProperty针对某个属性。所以，只需做一层代理就可以监听同级结构下的所有属性变化，包括新增属性和删除属性。

// 现在演示Proxy代理，是Vue3的底层
let obj = {
    a: 123
};

obj2 = new Proxy(obj, {
    // getter
    get(target, keyname) {
        console.log('getter');
        return target[keyname];
    },
    // setter
    set(target, keyname, v) {
        console.log('setter');
        target[keyname] = v;
    }
});

Proxy非常好用，可以直接侦测到对象的所有属性、属性的属性变化。但是Object.defineProperty()是不行的。小思考题：递归实现Object.defineProperty()。能够检测所有属性变化、属性的属性的变化。