在vue
3的版本中可能会用proxy实现数据的双向绑定,但是proxy
很多浏览器都不支持。可以通过caniuse查看。所以vue可能会进行浏览器的特性检测
特性检测
就是检查浏览器支持的特性
是通过navigator
检测,navigator
里面有个userAgent可以检测是哪一个浏览器,浏览器是那个版本
实际中一般不会去判断是那个浏览器的那个版本,一般都是判断浏览器是否支持某个属性就行了
例子
检测浏览器是否支持圆角和placeholder
⚠️注意:这里是特性检测的固定格式
可以通过返回的true
或·false
判断浏览器是否支持某个属性,支持就正常处理,不支持就处理兼容问题
Proxy的基础使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
const obj = new Proxy({}, {
set(obj, prop, value) {
console.log(obj,prop,value)
},
get() {
}
})
</script>
</body>
</html>
如果对obj
对象进行添加属性,那么打印出来的分别是对象(就是第一个花括号){}
、第二个是属性名、第三个是属性值
使用Proxy实现取值和赋值
<script>
const obj = new Proxy({}, {
set(obj, prop, value) {
// 使用一个变量来定义对象的key的时候需要用中括号
obj[prop] = value
},
get(obj, prop) {
return obj[prop]
}
})
</script>
简单的实现数据双绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="root">
<span id="count"></span>
<button onclick="increaseCount()">+</button>
</div>
<script>
// var x =10
const obj = new Proxy({}, {
set(obj, prop, value) {
obj[prop] = value
},
get(obj, prop) {
return obj[prop]
}
})
obj.x = 20
// 渲染方法
const setRootValue = () => {
document.querySelector('#count').innerHTML = obj.x
}
// 加
const increaseCount = () => {
obj.x += 1
setRootValue()
}
setRootValue()
</script>
</body>
</html>