码迷,mamicode.com
首页 > 其他好文 > 详细

vue 双向绑定的基本原理

时间:2020-06-08 12:36:28      阅读:62      评论:0      收藏:0      [点我收藏+]

标签:type   一个   赋值   obj   继承   ESS   原理   定义   selector   

首先了解一下Object.defineProperty
  • object.defineProperty(obj, prop, descriptor)有三个参数
    -- obj
        要定义属性的对象。
    -- prop
        要定义或修改的属性的名称或 symbol。
    --descriptor
        要定义或修改的属性描述符。
    --这里主要用到两个属性描述符
        get: 当访问该属性时,会调用此函数。但是会传入 this 对象(由于继承关系,这里的this并不一定是定义该属性的对象)。该函数的返回值会被用作属性的值。
        set:   当属性值被修改时,会调用此函数。该方法接受一个参数(也就是被赋予的新值),会传入赋值时的 this 对象。
// html
<input type="text" id="txt" />
// js
let obj = {}
let temp = ‘‘
let message = document.querySelector(‘input‘)
message.oninput = function(){
    obj.name = this.value
    console.log(obj.name)
}
// m => v
Object.defineProperty(obj, ‘name‘, {
    set(value){
        temp = value
        message.value = value
    },
    get(){
        return temp
    }
})

vue 双向绑定的基本原理

标签:type   一个   赋值   obj   继承   ESS   原理   定义   selector   

原文地址:https://blog.51cto.com/13132323/2502295

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!