vue官网：cn.vuejs.org/
Vue是一套用于构建用户界面的渐进式的、基于MVVM架构模式的JavaScript框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助我们高效地开发用户界面。
1.什么是MVVM架构模式
M：model 数据模型（通俗理解为前端操作的数据）const list = []
V：view 视图（界面）<div></div>
VM：视图模型（连接数据模型与视图，实现数据变化，界面自动更新）
其他架构模式：
MVC(M：model 数据模型,V：view 视图,C:controller控制器，连接M、V层，还可以处理页面业务逻辑，它接收并处理来自用户的请求，并将Model返回给用户。)java开发
MVP(M：model 数据模型,V：view 视图,P:presenter表示器，连接M、V层，还可以处理页面业务逻辑。)安卓开发
2.vue的两个核心功能
声明式渲染：允许使用简洁的模板语法声明式地将数据渲染进dom系统。
响应性：自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。
3.响应式原理
vue2响应式原理:
采用数据劫持结合发布订阅者模式，通过“Object.defineProperty()”方法来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
Object.defineProperty()方法的作用：给对象动态添加属性，并且设置getter,setter方法，当属性值改变时，触发getter,setter方法。
弊端：只能单独给一个属性设置getter,setter，如果有多个属性，要循环遍历，如果对象里面还有嵌套，还要递归。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式原理</title>
</head>
<body>
<div id="app">
<p></p>
<button onclick="bindPlus()">加一</button>
</div>
<script>
const data = {
count: 0,
message: 'hello',
age: 20
}
const pEle = document.querySelector('p')
pEle.innerHTML = data.count
const vm = {}
// 将data对象中的所有属性动态绑定到vm对象上，并且设置getter,setter方法
for (var key in data) {
// console.log('key ', key);
Object.defineProperty(vm, key, {
get() {
console.log('get >>.');
return data[key]
},
set(newValue) {
console.log('set>>>')
data[key] = newValue
pEle.innerHTML = data[key]
}
})
}
//闭包
// Object.keys(data).forEach((key) => {
// Object.defineProperty(vm, key, {
// get() {
// console.log('get >>.');
// return data[key]
// },
// set(newValue) {
// console.log('set>>>')
// data[key] = newValue
// pEle.innerHTML = data[key]
// }
// })
// })
function bindPlus() {
vm.count++
}
</script>
</body>
</html>
vue3响应式原理:
通过proxy代理对象，代理目标对象，同时对数据进行劫持，当数据变化自动触发getter,setter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式原理</title>
</head>
<body>
<div id="app">
<p></p>
<button onclick="bindPlus()">加一</button>
</div>
<script>
// 目标对象
const data = {
count: 0,
}
const pEle = document.querySelector('p')
pEle.innerHTML = data.count
// 创建代理对象，代理目标对象，同时对数据进行劫持，当数据变化自动触发getter,setter
const proxy = new Proxy(data, {
get(target, propery) {//target目标对象，propery属性
return target[propery] //data[key]
},
set(target, propery, newValue) {//newValue新值
target[propery] = newValue
pEle.innerHTML = target[propery] // 自动更新界面
}
})
function bindPlus() {
proxy.count++
}
</script>
</body>
</html>
4.API风格
1>.选项式 API (Options API)
使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods、template、components 和watch、 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。
