vue响应式property

最新推荐文章于 2022-08-09 08:46:19 发布

安和桥间奏

最新推荐文章于 2022-08-09 08:46:19 发布

阅读量224

点赞数

分类专栏： vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_42930809/article/details/116274453

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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>Document</title>
</head>
<body>
  <div id="div1" class="container">
    <p>vDom</p>
    <ul style="font-size:20px">
      <li>a</li>
    </ul>
  </div>
  <script>
     function updateView(){
       console.log('视图更新')
     }

     function defineReactive(target,key,value){
        observer(value)
        Object.defineProperty(target, key , {
          get() {
            return value
          },

          set(newVlue){
            observer(newVlue)
            if(newVlue !== value) {
              value = newVlue
              updateView()
            }
          }
        })
     }

     function observer(target){
        if(typeof target !== 'object' || typeof target === null) {
          return target
        }
        for(let key in target) {
          defineReactive(target, key, target[key])
        }
     }

     const data = {
       name: 'achu',
       age: 20,
       info:{
         num:1
       }
     }
     observer(data)
     data.name = 'shizhiwen'
     data.age = { num: 1}
     data.age.num = 22
     data.info.num = 33
  </script>
</body>
</html>

安和桥间奏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue响应式property

<!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>Document&l.
复制链接

扫一扫

专栏目录