Vue学习02

最新推荐文章于 2024-11-07 19:48:34 发布

123

最新推荐文章于 2024-11-07 19:48:34 发布

阅读量92

点赞数

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

本文链接：https://blog.csdn.net/weixin_45048086/article/details/120911699

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Vue双向绑定原理

在上一节里演示了如何用Vue实现数据的双向绑定，接下来要分析的是Vue双向绑定的原理

Vue的v-model是基于什么实现的：

由效果可知，Vue的v-model是基于inpout输入框的oninput事件来实现的。

下面用oninput事件来实现一下我们看到的效果(可以将下段代码复制直接放到body标签里，运行看效果)

<div>
        输入姓名：<input oninput="inputEvt()" id="input" type="text">
        <h2 id="h2"></h2>
    </div>

    <script>
        var obj = {
            name: '张 三'
        }

        var inputNode = document.getElementById('input')
        var hNode = document.getElementById('h2')

        function render() {
            inputNode.value = obj.name
            hNode.innerText = obj.name
        }
        
        // 让第一次的页面数据改变
        render();

        function inputEvt() {
            var evt = window.event
            obj.name = evt.target.value
            render()
        }
    </script>

在这个例子中暴露了以下两个问题：

数据是一个全局变量，不利于项目数据管理 (在浏览器里输入obj.name可以直接将内容给打印出来)。

在这里插入图片描述

需要对数据进行监听，当数据发生变化时，需要更新页面数据 (在浏览器里直接修改数据时(对obj.name重新赋值)，页面上的值理应也会改变，但事实是没有改变)。

在这里插入图片描述

上述的两个问题，其中问题1可以通过定义为类里的变量来解决这个问题，所以重点在解决问题2上。

针对问题2来说，我们用了一个全局变量obj的属性name来作为桥梁，通过对Dom节点的value的监听可以实现obj.name的值也改变，但是obj.name的值直接改变时却不能让Dom节点的valu也跟着一起改变。所以我们面对的实际问题是如何对一个值(obj.name)的变化进行监听，而es6里提供了两个方法可以实现这个效果，即setter 和 getter方法。

下面先来了解一下es6的setter 和 getter方法。

es6里的setter 和 getter方法

注意：setter 和 getter在使用时，方法名一般情况下是一样的，必须当成一个值来使用（就是不加函数调用的小括号）
setter方法：在一个方法前添加一个set标识，表明这是一个setter方法，setter方法必须要接收一个参数
getter方法：在一个方法前添加一个get标识，表明这是一个getter方法，getter方法必须要返回一个数据，否则为undefined

class Test{
    num
    set number(num){
        this.num = num;
    }
    get number(){
        return num;
    }
}

let test = new Test();
test.number = 12; // 调用setter，设置一个值
console.log(test.number);  // 调用getter，获取一个值

了解了getter和setter方法的使用，但我们还不能直接使用，因为js的对象（obj）没有getter和setter方法，所以我们给一个js对象添加getter和setter方法，就需要用到Object.defineProperty这个方法来完成。

下面就对这个方法的使用做一个简单的解析。

Object.defineProperty 方法解析：

方法定义：Object.defineProperty(o: any, p: PropertyKey, attributes: PropertyDescriptor)
o: 表示Object 需要给哪个对象进行属性定义
p: PropertyKey 需要给o对象中哪个属性key进行属性定义

let obj = {name:''};
// 对obj对象中的name属性进行属性定义
Object.defineProperty(obj, 'name', {...})

问题解决

解决问题的技术点已经了解得差不多了，就可以动手改动我们的代码了。为了便于测试，问题1就留着了，下面是更改后的代码。同样也是复制放在body标签里就可以了。

 <div>
    输入姓名：<input id="input" type="text">
    <h2 id="h2"></h2>
</div>
<script>
        
        var obj = {name: ''}
        var inputNode = document.getElementById('input')
        var hNode = document.getElementById('h2')
        // console.log(obj);

        Object.defineProperty(obj, 'name', {
            // 添加一个getter方法
            get: function() {
                console.log('调用了getter方法')
                // 不能再getter方法中获取这个数据，会陷入死循环
                // return obj.name
              
                // 这两种均可
                // return inputNode.value
                return hNode.innerText
            },
            set(val) {
                console.log('调用了setter方法')
                console.log(val)
                inputNode.value = val
                hNode.innerText = val
            }
        })

        // console.log(obj.name)
        obj.name = '张三'

        inputNode.addEventListener('input', function() {
            obj.name = this.value
        });
  
</script>