一、概述

1.轻量级
2.易学易用
3.灵活且高效

Vue2
1.@vue/cli
2.vue2
3.vuex3
4.vue-router3
5.ElementUI、Antd of Vue 1
6.vant2

Vue3：
1.@vue/cli
2.vue3
3.vuex4
4.vue-router4
5.ElementPlus、Antd of Vue3
6.vant3

基础知识扎实、核心原理清楚、综合实战多练

传统基于JS开发项目：直接操作DOM（获取需要操作的DOM元素、对DOM进行操作）

vue：放弃直接操作DOM，转而去操作数据

基于computed创建计算属性（依赖于某些值计算出新的值）

在vue中如何指定视图
1.基于el配置项指定
2.基于template配置项指定
3.基于vm.$mount指定
4.基于render配置项指定（基于JSX语法构建视图）

在data中构建的数据会直接挂载到实例上
所有在实例上挂载的属性都可以直接在视图中使用

在data编写的数据是经过数据劫持的，它是响应式的数据，修改数据值视图会自动更新，直接给实例设置的键值对，如vm.xxx = yyy，不是响应式的

set劫持：当我们修改数据值的时候，会触发其set函数执行，在函数中不仅修改了数据，而且还会通知视图重新渲染

小胡子语法中嵌入的是JS表达式
原始值
1.null/undefined渲染为空
2.Symbol类型的值，不能直接写Symbol()函数，但是可以把其赋值给一个状态进行渲染
3.剩下的情况都转换为字符串：String(value)
对象类型值
1.普通对象/数组对象，基于JSON.stringify()变为JSON字符串进行渲染
2.其余的对象，基于String(value)变为字符串渲染

二、Object.defineProperty

Object.getOwnPropertyDescriptor(obj, prop)：查看对象某个私有成员的描述
1.configurable：是否可删除
2.enumerable：是否可枚举（可枚举：可以被for...in循环或Object.keys迭代到的属性）
3.writable：是否可修改
4.value：成员的值

const obj = {
    name: 'osoLife',
    age: 35
}
// 基于常规手段给对象设置的成员其规则一般都是：可删除、可枚举、可修改
console.log(Object.getOwnPropertyDescriptor(obj, 'name'))
// configurable: true
// enumerable: true
// value: "osoLife"
// writable: true

console.log(Object.getOwnPropertyDescriptor(obj, 'toString')) // undefined
// 浏览器内置的属性其规则一般都是：可删除、可修改，不可枚举
console.log(Object.getOwnPropertyDescriptor(Object.prototype, 'toString'))

Object.getOwnPropertyDescriptors(obj)：查看对象所有私有成员的规则描述
console.log(Object.getOwnPropertyDescriptors(Object.prototype))

Object.defineProperty(obj, prop, descriptor)

const obj = {
    x: 100
}
// 如果成员存在，则为成员修改规则
Object.defineProperty(obj, 'x', {
    configurable: false,
    enumerable: false,
    writable: false,
    value: 200
})
// 如果成员不存在，则为新增成员并设置规则
Object.defineProperty(obj, 'y', {
    value: 300
})
console.log(Object.getOwnPropertyDescriptors(obj))

关于规则的默认值
1.成员之前不存在，我们新增一个成员，则规则的默认值都是false
2.成员之前存在，我们打算修改规则，没有改之前，成员之前的规则是啥还是啥

const define = (obj, key, value) => {
    Object.defineProperty(obj, key, {
        configurable: true,
        writable: true,
        enumerable: false,
        value
    })
}
define(Object.prototype, 'unique', function () { })

const obj = {
    x: 1,
    y: 2
}
const proxy = {...obj} 
// 数据劫持（一旦被劫持之后，和规则中的value & writeable属性相互冲突）
Object.defineProperty(obj, 'x', {
    get() { // 当访问x的时候会触发get函数，函数的返回值就是成员访问的结果
        return proxy.x
    },
    set(val) { // 当设置x的时候会触发set函数
        proxy.x = val
    }
})

Object.freeze(obj)：冻结一个对象（不能新增成员；现有成员：不能删、不能改，成员的枚举属性是不变的）

Object.isFrozen(obj)：验证是否为冻结的

Vue内部会基于递归的方式，对data中的数据进行深度的监听和劫持，只处理对象（普通对象）和数组

如果对象被冻结了，那么其内部的每一个成员将不再进行属性劫持

对于对象，vue会依次迭代其内部可枚举、非Symbol类型的私有属性，因为其内部是基于Object.keys来获取对象的属性，对每一个属性进行get/set劫持

对于属性名是Symbol类型的属性，不会进行任何的处理，包括不挂载到实例上

vm.$set([object], [key], [value])：不能基于$set给vm实例对象设置属性，对象新增成员的同时给成员进行了get/set劫持，让其成为响应式数据

vm.$forceUpdate()：强制视图更新

三、SPA和MPA的区别

SPA
1.组成结构：一个主页面+许多组件
2.地址模式：www.xxx.com/#/login、www.xxx.com/#/home
3.跳转方式：主页面不刷新，只是组件之间的切换，一个组件渲染/显示，一个组件销毁/隐藏
4.内容更新：只是相关组件的切换，即局部更新
5.公共资源：公共资源只需要加载一次
6.数据传递：方式很多（本地存储、全局变量、组件通信）
7.开发成本：需要基于特定的框架开发，维护起来非常方便
8.搜索引擎：不利于SEO优化
9.适用场景：目前主流模式，对体验度和流畅度要求较高的应用，例如：移动端开发、PC端管理系统

MPA
1.组成结构：许多完整的页面
2.地址模式：www.xxx.com/login.html、www.xxx.com/index.html
3.跳转方式：从一个页面跳转到另外一个页面
4.内容更新：整体HTML页面的切换，即全局刷新
5.公共资源：公共资源需要重新加载
6.数据传递：方法有限（可基于本地存储、URL问号传参）
7.开发成本：直接开发即可，但后期维护很麻烦
8.搜索引擎：可以直接做SEO优化
9.适用场景：非主流模式，适用于对SEO要求较高的应用，例如：传统PC官网

注

@珠（zxt22）[24]【b-bhcv】