三、proxy

最新推荐文章于 2024-04-10 15:50:28 发布

weixin_43791795

最新推荐文章于 2024-04-10 15:50:28 发布

阅读量285

点赞数 1

分类专栏： vue 文章标签： proxy

本文链接：https://blog.csdn.net/weixin_43791795/article/details/97422183

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在vue3的版本中可能会用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>

weixin_43791795

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三、proxy

在vue3的版本中可能会用proxy实现数据的双向绑定，但是proxy很多浏览器都不支持。可以通过caniuse查看。所以vue可能会进行浏览器的特性检测特性检测就是检查浏览器支持的特性是通过navigator检测，navigator里面有个userAgent可以检测是哪一个浏览器，浏览器是那个版本实际中一般不会去判断是那个浏览器的那个版本，一般都是判断浏览器是否支持某个属性就行了例子...
复制链接

扫一扫