Vue响应式原理，Object.defineProperty

最新推荐文章于 2024-04-26 17:54:13 发布

Elis_

最新推荐文章于 2024-04-26 17:54:13 发布

阅读量123

点赞数 2

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45679977/article/details/105565434

版权

写给自己看的，你们能不能看懂，复制下来不就知道了吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object.defineProperty</title>
</head>
<body>
    <input type="text" id="model">
    <div id="box"></div>
</body>
<script>
    let info = {
        age: 18
    }
    let arr = [{name: "Elise1"},{name: "Elise2"},{name: "Elise3"},{name: "Elise4"},{name: "Elise5"}]
    //自动给info添加一个arr属性
    Object.defineProperty(info, 'arr' ,{
        get(){
            console.log('读取数据:' + arr);
            return arr
        },
        set(param){
            arr = param
            updateView() //更新视图
        }
    })
    console.log('初始数据：' + info.arr);

    //把input的value值push到info.arr
    let text = document.getElementById("model")
    text.onkeydown = function(e){
        if(e.keyCode == 13){
            if(!text.value.trim()){
                return
            }
            let aa = info.arr
            aa.push({name: text.value})
            info.arr = aa
            text.value = ""
        }
    }
    //更新视图
    function updateView(){
        let box = document.getElementById('box')
        let str = ""
        info.arr.forEach(item=>{
            str += `<p>${item.name}</p>`
        })
        box.innerHTML = str
    }
    //先自执行一次
    updateView()
</script>
</html>

效果展示

在这里插入图片描述

Elis_

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue响应式原理，Object.defineProperty

写给自己看的，你们能不能看懂，复制下来不就知道了吗？<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
复制链接

扫一扫