vue实现双向绑定的简单原理: defineProperty

<div class="cnblogs_code">

<span style="color: #0000ff"><<span style="color: #800000">head<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">meta <span style="color: #ff0000">charset<span style="color: #0000ff">="UTF-8"<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">meta <span style="color: #ff0000">name<span style="color: #0000ff">="viewport"<span style="color: #ff0000"> content<span style="color: #0000ff">="width=device-width,initial-scale=1.0"<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">meta <span style="color: #ff0000">http-equiv<span style="color: #0000ff">="X-UA-Compatible"<span style="color: #ff0000"> content<span style="color: #0000ff">="ie=edge"<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">title<span style="color: #0000ff">>vue双向绑定的原理测试<span style="color: #0000ff"></<span style="color: #800000">title<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">head<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">body<span style="color: #0000ff">><span style="color: #000000">

手写一个简单双向绑定<span style="color: #0000ff"><<span style="color: #800000">br <span style="color: #0000ff">/>

<span style="color: #0000ff"><<span style="color: #800000">input <span style="color: #ff0000">type<span style="color: #0000ff">="text"<span style="color: #ff0000"> id<span style="color: #0000ff">="model"<span style="color: #0000ff">><<span style="color: #800000">br <span style="color: #0000ff">/>

<span style="color: #0000ff"><<span style="color: #800000">div <span style="color: #ff0000">id<span style="color: #0000ff">="modelText"<span style="color: #0000ff">></<span style="color: #800000">div<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">script<span style="color: #0000ff">>

<span style="background-color: #f5f5f5; color: #008000">/*<span style="background-color: #f5f5f5; color: #008000">

@Author: 曾经的水哥  https://www.cnblogs.com/cengjingdeshuige/
@Date: 2018-09-25 15:14:59 
@Last Modified by: mikey.zhaopeng
@Last Modified time: 2018-09-25 15:15:50

<span style="background-color: #f5f5f5; color: #008000">*/

    <span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; user </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; {};
    </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; defaultName </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;2222222222ssas</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span>
    <span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; model </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; document.querySelector(</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;#model</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;)
    </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; modelText </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; document.querySelector(</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;#modelText</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;);
    model.value </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; defaultName
    modelText.textContent </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; defaultName

    </span><span style="background-color: #f5f5f5; color: #008000"&gt;//</span><span style="background-color: #f5f5f5; color: #008000"&gt; 定义属性 监控改变</span>
<span style="background-color: #f5f5f5; color: #000000">        Object.defineProperty(user,<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">name<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">,{

get: <span style="background-color: #f5f5f5; color: #0000ff">function<span style="background-color: #f5f5f5; color: #000000"> () {

console.log(<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">获取值<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">)

<span style="background-color: #f5f5f5; color: #0000ff">return<span style="background-color: #f5f5f5; color: #000000"> defaultName

},set: <span style="background-color: #f5f5f5; color: #0000ff">function<span style="background-color: #f5f5f5; color: #000000"> (newValue) {

console.log(<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">设置新的值<span style="background-color: #f5f5f5; color: #000000">'<span style="background-color: #f5f5f5; color: #000000">)

defaultName <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> newValue

model.value <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> newValue

modelText.textContent <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> newValue

}

})
    model.addEventListener(</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;keyup</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;,</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt; () {
        user.name </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #0000ff"&gt;this</span><span style="background-color: #f5f5f5; color: #000000"&gt;.value
        console.log(</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;取值</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;)
    },</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;false</span><span style="background-color: #f5f5f5; color: #000000"&gt;)

    </span><span style="background-color: #f5f5f5; color: #008000"&gt;//</span><span style="background-color: #f5f5f5; color: #008000"&gt; 获取值</span>
<span style="background-color: #f5f5f5; color: #000000">        console.log(user.name)

<span style="color: #0000ff"></<span style="color: #800000">script<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">body<span style="color: #0000ff">>
<span style="color: #0000ff"></<span style="color: #800000">html<span style="color: #0000ff">>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!