vue2.0+响应式原理

最新推荐文章于 2023-10-11 11:19:24 发布

摇摆小仙

最新推荐文章于 2023-10-11 11:19:24 发布

阅读量246

点赞数

分类专栏： vue 文章标签： vue 响应式原理 v-model双向数据绑定

本文链接：https://blog.youkuaiyun.com/weixin_44827421/article/details/96311276

版权

vue 专栏收录该内容

3 篇文章

订阅专栏

Vue.js通过将JavaScript对象的属性转换为getter/setter，实现数据响应化，确保视图在数据变化时实时更新。这一机制依赖于ES5的Object.defineProperty，因此Vue不支持IE8及更早版本浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

    <script>
        // 定义一个空对象
        let data = {}
        // 给 data 设置一个 message 属性,并设置 get 和 set 的回调
        Object.defineProperty(data,"message",{
            // 获取数据
            get(){
                console.log('get触发了')
                return message
            },
            // 设置数据
            set(newVal){
                console.log('set触发了')
                message = newVal
            }
        })
    </script>

在这里插入图片描述

    <input type="text" v-model> 
    <h2 v-text></h2>
    <h2 v-text></h2>
    <h2 v-text></h2>
    <h2 v-text></h2>
    <h2 v-text></h2>
    <h2 v-text></h2>
    <h2 v-text></h2>
    <script>
        let data = {}
        Object.defineProperty(data,"message",{
            // 获取数据
            get(){
                console.log('get触发了')
                return message
            },
            // 设置数据
            set(newVal){
                console.log('set触发了')
                message = newVal
                // 获取所有的 v-text 属性的标签动态赋值
                let arr = document.querySelectorAll('[v-text]');
                arr.forEach(item=>{
                    item.innerText = data.message
                })
                // 给 input 标签动态赋值
                document.querySelector('[v-model]').value = data.message
            }
        })
		
		// 输入事件触发的时候,调用 set 方法来实现双向绑定
        document.querySelector('[v-model]').oninput=function(){
            data.message = this.value
        }
    </script>

在这里插入图片描述