Vue的双向数据绑定原理

更新日期: 2020-02-20阅读: 2.2k标签: 数据绑定

1、属性类型

Object属性分为两个类型:数据属性、访问器属性,每类属性又有其不同的特显,双向绑定的原理是根据其访问器属性的特性来实现的。

1.1数据属性的特性

数据属性有四个描述其行为的特性
1、Configurable:是否可以通过delete删除,能否修改他的属性特性,能否修改为访问器属性。默认值true
2、Enumerable:是否可以通过for in循环返回改属性
3、Writable:是否能修改属性值
4、Value:属性值

要就修改数据属性的默认特性,需要用Object.defineProperty()方法

var person = {}
Object.defineProperty(person,"name",{
    writable:false;
    value:'Nicholas';
})

1.2访问器属性特性

1、Configurable:是否可以删除
2、Enumerable:是否能够循环返回属性
3、Get:在读取属性的时候调用的函数。默认值是undefind
4、Set:在写入属性时调用的函数。
访问器属性不能直接定义,必须使用Object.defineProperty()来定义。

var book = {
  _year:2014,
  edition:1
};

Object.defineProperty(book,"year",{
  get:function(){
   return this._year
  },
  set:function(newValue){
   if(newValue>2004){
     this._year = newValue;
     this.editon +=newValue -2004;
   }
  }
});

book.year = 2005;
alert(book.edition);  //2


2、定义多个属性

var book = {};
Object.defineProperties(book,{
    //数据属性
    _year:{
        writable:true,
        value:2004
    },
    edition:{
        writable:true,
        value:1
    },
    //访问器属性
    year:{
        get:()=>{
            return this._year;
        },
        set:(newValue)=>{
            if(newValue>2004){
                this._year = newValue;
                this.edition += newValue -2004;
            }
        }
    }
})


3、读取属性特性

var descriptor = Object.getOwnPropertyDescriptor(book,"year");
alert(descriptor.value);  //undefind  访问属性没有value值
alert(descriptot.get);  //funtion


4、模拟双向绑定

<div id="app">
    <input type="text" id="txt">
    <p id="show-txt"></p>
</div>
<script>
    var obj = {}
    Object.defineProperties(obj,{
        _txt:{
            writable:true,
            value:'测试'
        },
        txt:{
            get: function () {
                return obj
            },

            set: function (newValue) {
                document.getElementById('txt').value = newValue
                document.getElementById('show-txt').innerhtml = newValue
            }
        }
    })

    document.addEventListener('keyup', function (e) {
        obj.txt = e.target.value
    });
    console.log(bj.txt)  //或者txt值
</script>

链接: https://fly63.com/article/detial/7508

vue在自定义组件中使用v-model进行数据绑定

有这么一句话: 默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。先来一个组件,不用vue-model,正常父子通信;点击回应后,父亲对儿子说的话变成了儿子的回应。儿子收到的信息也变了,实现通信。

Angular双向数据绑定

双向数据绑定: 所谓双向数据绑定是指View(视图)与Model(模型)之间的绑定:View<=>Model。View的改变: 通过界面交互使视图发生改变,如Input框的输入,Select元素的选择,scrollBar滚动,浏览器窗口大小改变等等。

Nautil 中使用双向数据绑定

虽然是基于 react 的框架,但是在 nautil 中可以使用双向数据绑定,这得益于基于观察者模式的开发思路。在 react 中使用双向绑定并非没有需求,react 严格的单向数据流,严重影响了开发者的发挥空间,特别是在表单组件的使用中

组件使用v-model、$listeners、.sync(区别于v-model的双向数据绑定)

首先我们先说一下在自定义组件中使用v-model的必要条件,在自定义的组件中要有input(这里我们先不讨论单选复选框),在自定义组件的模板对象中要有props属性,且里面要含有一个value

不要再搞混Vue的响应式原理和双向数据绑定了

之前公司招人,面试了一些的前端同学,因为公司使用的前端技术是 Vue ,所以免不了问到其响应式原理和 Vue 的双向数据绑定。但是这边面试到的80%的同学会把两者搞混,通常我要是先问响应式原理再问双向数据绑定原理,来面试的同学大都会认为是一回事

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!