Vue3数据双向绑定原理learn

最新推荐文章于 2024-05-23 20:55:08 发布

newbie (⊙o⊙)

最新推荐文章于 2024-05-23 20:55:08 发布

阅读量339

点赞数

分类专栏： JavaScript vue 学习

本文链接：https://blog.csdn.net/Jonn1124/article/details/115068801

版权

JavaScript 同时被 3 个专栏收录

51 篇文章 3 订阅

订阅专栏

vue

25 篇文章 0 订阅

订阅专栏

学习

9 篇文章 0 订阅

订阅专栏

function vue(){
    this.data = {
        content:'双向绑定开始'
    }
    this.el = document.getElementById('app')
    this._html = ''
    this.observe(this.data)
    this.render()
}
vue.prototype.observe = function(obj){
    var _this = this
        this.data = new Proxy(this.data,{
            get:function(target,key){
                return target[key]
            },
            set: function(target,key,newValue){
                target[key] = newValue
                 _this.render()
            }
        })
}
vue.prototype.render = function(){
    this._html = 'attention：' + this.data.content
    this.el.innerHTML = this._html
}

<!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="app"></div>
    <script src="vue3数据双向绑定原理.js"></script>
    <script>
        var vm = new vue()
        setTimeout(()=>{
            console.log('双向绑定已执行')
            console.log(vm.data)
            vm.data.content = '双向绑定结束'
        },1000)
    </script>
</body>
</html>

newbie (⊙o⊙)

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue3数据双向绑定原理learn

function vue(){ this.data = { content:'双向绑定开始' } this.el = document.getElementById('app') this._html = '' this.observe(this.data) this.render()}vue.prototype.observe = function(obj){ var _this = this this.data
复制链接

扫一扫