1、数据驱动
- 1、什么是数据驱动？
- 数据驱动视图，改变数据，模板自动刷新
- 不需要操作DOM
1.1、数据响应式
- 1、什么是数据响应式？
- 模板基于数据驱动，改变数据，模板自动刷新 - 2、Jquery操作DOM，vue操作数据，靠数据驱动视图
1.2、双向绑定
- 1、视图随数据改变而改变，数据也随视图改变而改变
- 2、可以使用v-model在表单元素上创建双向数据绑定。
2、响应式原理
vue2与vue3均有自己的响应式原理
2.1、Vue2.x响应式原理
- 1、官方文档：https://cn.vuejs.org/v2/guide/reactivity.html
- 2、为什么data函数返回的对象中的数据是响应式数据？（响应式原理）
- Vue2.x中响应式的实现是通过Object.defineProperty来完成的,Object.defineProperty可以将property全部转为getter/setter。
- defineProperty是ES5中的特性，在IE8及以下版本中没有该api，该属性无法降级（shim）处理，这也是Vue不支持IE8以及更低版本浏览器的原因
- Vue2响应式缺点：需要通过循环递归遍历对象，性能不高
1、将一个对象中的属性转换成getter/setter的形式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<script>
//模拟vue中data的选项
let data = {
msg: "hello"
}
document.querySelector("#app").textContent = data.msg;
let vm = {}; //模拟vue实例
//实现数据劫持 当访问或设置vm中的数据，做一些干预操作
//defineProperty可以精细化设置某个对象上的属性
Object.defineProperty(vm, "msg", {
//可遍历
enumerble: true,
//可配置（可以使用delete删除，可以通过defineProperty重新定义）
configurable: true,
//当获取值时自动调用get
get() {
console.log("get:", data.msg);
//......可以做一些干预操作，比如在拿数据时更新视图
return data.msg
},
set(newValue) {
console.log("set:", newValue);
//需要做一个判断，若新值与旧值相同，什么也不返回
if (newValue === data.msg) {
return;
}
data.msg = newValue;
// 数据变了，更新DOM(视图)
document.querySelector("#app").textContent = data.msg;
}
})
</script>
</body>
</html>
2、将对象中多个属性转换成getter/setter的形式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<script>
//普通对象
let data = {
msg: "hello",
count: 10
}
let vm = {};
proxyData(data)
function proxyData(data) {
//数组 遍历数组
Object.keys(data).forEach(key => {
Object.defineProperty(vm, key, {
enumerble: true,
configurable: true,
get() {
console.log("get:", key, data[key]);
return data[key]
},
set(newValue) {
console.log("set:", key, newValue);
if (newValue === data[key]) {
return;
}
data[key] = newValue;
document.querySelector("#app").textContent = data[key];
}
})
})
}
</script>
</body>
</html>
2.2、Vue3.x响应式原理
- Vue3 响应式原理是通过Proxy来完成的
- Proxy直接监听对象，而非属性，将多个属性转换成getter/setter的时候，不需要使用循环
- Proxy是ES6新增的，IE不支持
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app">hello</div>
<script>
// 目标对象
let data = {
msg: "hello",
count: 10
}
// 代理对象
// 为data创建一个代理对象vm 这样就可以通过代理对象获取目标对象身上的属性
// 当获取属性时会走get
let vm = new Proxy(data,{
//target表示目标对象，key表示代理对象中的属性
get(target,key){
console.log("get key:", key, target[key]);
return target[key]
},
set(target, key, newValue){
console.log("get key:",key,target[key]);
if(target[key] === newValue){
return ;
}
target[key] = newValue;
document.querySelector("#app").textContent = target[key];
}
})
</script>
</body>
</html>
420
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
