Vue2：数据绑定(响应式数据、双向数据绑定)

1.什么是响应式数据

如果内存中的数据变化了页面UI也会动态跟着刷新这种数据就是响应式数据

响应式数据:

只能由代码改变UI或者只能由UI改变代码

// this.arr[2]="hello"//没有劫持数组的 下标(不能刷新页面)
// this.arr.splice(2,1, "hello")//劫持了数组的方法(可以刷新页面)
// Vue. set(this.arr,2,"hello" )//vue帮我们刷新页面
this . $set( this. arr,2,"hello")//vue帮我们刷新页面

响应式数据设计原理:

vue2.0采用数据劫持结合发布者-订阅者模式的方式，通过object . defineProperty ()来劫持各个
属性的setter, getter, 在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给
Vue实例来作为它的data 选项时，Vue将遍历它的属性，用object . def ineProperty 将它们转为getter/setter。用户看不到getter/setter，但是在内部它们让Vue追踪依赖，在属性被访问和修改时通知变化。
vue3.0 --使用es6 proxy 代理了data对象

双向数据绑定:

代码改变UI,UI也能改变代码

1、如果数据容器中的数据变了也会让页面刷新（DOM操作让页面改变）

2、如果用户操作DOM，改变了页面，反之也会让数据容器中的数据的值改变

双向数据绑定的实现: 2种方式

1.自己实现：

vue可以自己实现(没必要)

微信开发可以自己实现(只能自己实现) 利用input事件,用户交互的时候,获取用户输入的值,然后把值绑定到data容器中

2.系统指令:v-model

//vue实现数据双向绑定主要是：
//采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，
//在数据变动时发布消息给订阅者，触发相应监听回调。
//当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。
//用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。
//利用 Object.defineProperty 自己实现双向数据绑定
<body>
    <div id="app">
      <input type="text" id="txt">
      <p id="show"></p>
    </div>
</body>
<script type="text/javascript">
    var obj = {}
    Object.defineProperty(obj, 'txt', {
        get: function () {
            return obj
        },
        set: function (newValue) {
            document.getElementById('txt').value = newValue
            document.getElementById('show').innerHTML = newValue
        }
    })
    document.addEventListener('keyup', function (e) {
        obj.txt = e.target.value
    })
</script>

实例1：使用@input和 :value

<div id="box">
        <button v-on:click="fn()">{{msg}}</button>
        <button @click="change()">{{get}}</button>
        <!-- <input type="text"> -->
        <input type="text" :value="msg" @input="inp">
    </div>
    <!-- 双向数据绑定 -->
    <script type="text/javascript">
        new Vue({
            el:"#box",
            data:{
                msg:"",
                get:"获取",
            },
            methods: {
                fn(){
                    this.msg="改变了"
                },
                change(){
                    if(this.msg == 33){
                        alert("输入正确")
                    }else{
                        alert("错误，输入33")
                    }
                },
                inp(el){
                    this.msg=el.target.value
                }
            },
        })
    </script>

实例2：v-model代替@input和 :value

<div id="box">
        <button @click="change()">{{get}}</button>
        <input type="text" v-model="msg">

    </div>
    <script type="text/javascript">
        new Vue({
            el: "#box",
            data: {
                msg: "",
                get: "获取",
            },
            methods: {
                fn() {
                    this.msg = "改变了"
                },
                change() {
                    console.log(this.msg);
                },

            },
        })
    </script>

posted on 2022-08-30 22:52 香香鲲阅读(482) 评论(0) 收藏举报